Using Vanilla Javascript
To get started, you will need to install MinChat Javascript SDK in your Javascript front-end project.
npm
yarn
npm install @minchat/js
yarn add @minchat/js
Usually, you would create users based on the data from your database. A User is represented by a JSON object.
const currentUser = {
id: "8843223323423" ,
name: "Micheal Saunders" ,
avatar: "urltoavatar.com/avatar.jpg" //optional
}
Next, initialize the MinChat SDK passing the
MINCHAT_API_KEY
as a parameter as well as the newly created currentUser
. The API Key can be found on the Minchat dashboard.add to imports section
import MinChat from '@minchat/js'
const minchat = MinChat.getInstance(MINCHAT_API_KEY).connectUser(currentUser)
const otherUser = {
id: "4324423d2ddf" ,
name: "Mercy Wells" ,
avatar: "urltoavatar.com/mercyavatar.jpg" //optional
}
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 = minchat.chat(otherUser)
const chat = minchat.groupChat({name: "Epic Group Chat", members: [ otherUser , thirdUser ] })
To send a message, call a function on the chat object.
chat.sendMessage({ text: "Hello World!" }, (error, data)=> { /** */ })
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.
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 messages 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 4mo ago