In the case of using the built-in Backend you need to specify the token property after the user has successfully logged in.
Chat widget expects a backend server to fetch chats, users and messages. You can provide a link to it by the url setting:
webix.ui({
view: "chat",
url:"http://localhost:3200/"
});
Chat uses the web-socket protocol.
Sample backend for Chat is available for downloading. Note that chatbots are available when using our sample backend server. For a better user experience with the chatbots, use your own OpenAI API key.
If you do not have a backend server, you can customize the methods of the Backend service and provide client-side data as a promise.
Backend service is a server-side model that contains methods for sending requests. They are called by the Operations service when data needs to be loaded or saved.
Check out the full list of methods below.
To change data requests, get and process the responses you can:
class MyBackend extends chat.services.Backend {
// define and override methods here
}
webix.ui({
view: "chat",
url:"http://localhost:3200/",
override: new Map([[chat.services.Backend, MyBackend]]),
});
If you need to fill Chat with client-side data, you can return it as a promise as it is shown below:
class MyBackend extends chat.services.Backend {
// you can intercept and customize server side calls
messages(chatId) {
return Promise.resolve([
{
user_id: 1,
text: "[Custom Message] Working in the offline mode",
}
]);
}
// other methods
}
Related sample: Chat: Local Data
Keep in mind that operations like adding chat/message, editing or deleting are performed from the current user perspective.
Below you can find descriptions of the following methods:
The method gets called upon widget initialization.
Returns: a promise that resolves with an array of users:
[
{
avatar: "remote/avatars/1.jpg",
email: "alex@brown.com",
id: 1,
name: "Alex Brown",
status: 2
},
{ .. }
]
The method loads chats array.
Returns: a promise that resolves with an array of chats:
[
{
avatar: "remote/avatars/photo.jpg",
date: new Date(),
direct_id: 17,
id: 52,
message: "Coffee tonight?",
name: "PM: Jean Catwright",
unread_count: 0,
users: [3, 17]
},
{ .. }
]
The method gets called when a private chat is created.
Parameters:
Returns: a promise that resolves with the newly created chat:
{
avatar: "remote/avatars/pm.jpg",
date: new Date(),
direct_id: 17,
id: 52,
message: "Hi there"
name: "Today's meeting",
unread_count: 1,
users: [3, 17]
}
The method gets called when user enters the chat.
Parameters:
Returns: a promise that resolves with an array of messages:
[
{
chat_id: 6,
date: new Date(),
id: 19,
text: "Oh, don't bother.. I believe that they can win anyway )",
user_id: 2
}
]
The method gets called when a new message is added.
Parameters:
Returns: message object with the following structure:
{
chat_id: 31,
date: new Date(),
id: 75,
text: "Anyone here?",
user_id: 3
}
The method gets called when a specified message has been deleted.
Parameters:
Returns: message object with the following structure:
{
chat_id: 31,
date: new Date(),
id: 71,
text: "",
user_id: 0
}
The method gets called when a specified message is updated.
Parameters:
Returns: message object with the following structure:
{
chat_id: 31,
date: new Date(),
id: 76,
text: "Hey, Alex :)",
user_id: 3
}
Initiates a call with a specified user. If it is a group call, userId should be 0.
Parameters
Returns: an object with the call data.
{
devices: [30, 0],
id: 778,
start: null,
status: 1,
users: [1, 0],
initiator: 6, // the id of the call initiator
group: true
}
Is called when the call is accepted or canceled.
Parameters:
Below you can find the list of all the status codes and their textual interpretations:
Returns: an object with the update data.
{
data: 902
error: ""
id: "21"
}
Is called during the call to change user status. Used for both LiveKit and P2P calls.
Parameters:
Below you can find the list of all the status codes and their textual interpretations:
Returns: a promise.
Gets a token to connect to the call when using the LiveKit service. Used only for LiveKit calls, even if it is a one-to-one call.
Parameters:
Returns: an object containing the token.
{
token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9EzMzciLCJ1c2VybmFtZSI6ImJpem9uZSIsImlhd"
}
Is called to send a signal to the server, when certain call operations are performed. Possible operations are listed in the payload parameter. Only used for one-to-one P2P calls.
Parameters:
// payload object
{
audio: true,
video: false,
}
Returns: an object containing the signal data.
{
data: null,
error: "",
id: "26"
}
The method resets the counter of the unread messages in a specified chat.
Parameters:
The method does not return any data.
The method gets called when a new group chat is created.
Parameters:
Returns: a promise that resolves with the chat object:
{
avatar: "remote/avatars/picture.jpg",
date: new Date(),
direct_id: 0,
id: 61,
message: "",
name: "Hikikomori",
unread_count: 0,
users: [4, 5, 3, 1, 87]
}
The method gets called when a specified chat has been updated.
Parameters:
Returns: a promise that resolves with the chat object:
{
avatar: "remote/avatars/another_picture.jpg",
date: new Date(),
direct_id: 0,
id: 61,
message: "",
name: "Renamed",
unread_count: 0,
users: [4, 5, 3, 1, 87]
}
The method gets called when a user leaves a specified chat.
Parameters:
Returns: null if the user left successfully.
The method gets called when a user adds or remove members.
Parameters:
Returns: a promise that resolves with the chat object:
{
avatar: "remote/avatars/another_picture.jpg",
date: new Date(),
direct_id: 0,
id: 61,
message: "Who knows.. I am rather optimistic.",
name: "Talks",
unread_count: 0,
users: [4, 5, 3, 1, 87]
}
The method returns a url for uploading chat avatars.
Returns: url string for uploading.
this.app.config.url + "/chat/0/avatar";
Is called when user sends a file.
Parameters:
Returns: url string for uploading.
this.app.config.url + "/chat/3/files";
The uploaded file is added to FormData as the upload property.
Is called when user records a voice message.
Parameters:
Returns: url string for uploading.
this.app.config.url + `/chat/${id}/voice`;