Comment on page
Using Vanilla Javascript
To get started, you will need to install MinChat Javascript SDK in your Javascript front-end project.
npm
yarn
pnpm
npm install @minchat/js
yarn add @minchat/js
pnpm install @minchat/js
Next, initialize the MinChat SDK passing the
MINCHAT_API_KEY as a parameter as well as a user. The API Key can be found on the Minchat dashboard.add to imports section
import MinChat from '@minchat/js'
const currentUser = {
username: "micheal",
name: "Micheal Saunders",
}
const minchat = await MinChat.getInstance(MINCHAT_API_KEY).connectUser(currentUser)
Each connection to MinChat has to specify the current User to send messages as, this is achieved with
connectUser(...)note:
connectUser(...) automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.Usually, you would create users based on the data from your database. A User is represented by a JSON object.
before you can start a conversation with another user, the user would first need to be created.
const otherUser = await minchat.createUser({
username: "example-username",
name: "Example Name",
})
note:
createUser(...) automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.You can fetch an already existing user using either their username or their id.
const otherUser = await minchat.fetchUser("example-username")
const otherUser = await minchat.fetchUserById("example-id")
There's not much point in a chat app with only one person using it, with a User created we can start a new conversation with them.
A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one-on-one conversations.
const chat = await minchat.chat(otherUser.username)
const chat = await minchat.groupChat({
title: "Epic Group Chat",
memberUsernames: [ otherUser.username , thirdUser.username ]
})
To send a message, call a function on the chat object.
chat.sendMessage({ text: "Hello World!" })
Messages retrieved in a conversation are paginated to 25 messages at a time.
async/await
callback
const { messages , page , totalMessages , totalPages } = await chat.getMessages(1 /** page to query **/ )
chat.getMessages(1 /** page to query **/ ,({ messages , page , totalMessages , totalPages })=>{
//do something with the messages
})
add a listener to listen for new messages received in the chat.
chat.onMessage((message) => {
//do something with message
})
You can get a list of the conversations of the current user. conversations retrieved are paginated to 25 chats at a time.
async/await
callback
const { chats , page , totalChats , totalPages } = await minchat.getChats(1 /** page to query **/ )
minchat.getChats(1 /** page to query **/ , ({ chats , page , totalChats , totalPages })=>{
//do something with the list of chats
})
Add a listener to listen for conversations that receive a new message.
minchat.onChat((chat) => {
//do something with the chat
})
This concludes our setup instructions for our most basic form of integration. In this short guide, you've taken your javascript application to the next level with powerful user-to-user chat. You also learned more about the fundamentals of MinChat, and how it all fits together. Most importantly, you've built a starting point to try out all the features MinChat offers.
Last modified 2mo ago