Working with Server

In the case of using the built-in Backend you need to specify the token property after the user has successfully logged in.

Loading Data

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.

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

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.

How to customize backend model

To change data requests, get and process the responses you can:

  • create your own backend service by extending the default one;
  • define and override the needed methods;
  • use custom backend service instead of the default one by including it into the override map.
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]]),
});

Parsing client-side data

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

Backend Service methods

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:

users()

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
  },
  { .. }
]

chats()

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]
  },
  { .. }
]

addChat(uid)

The method gets called when a private chat is created.

Parameters:

  • uid (number) - ID of the user the current user creates chat with.

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]
}

messages(cid)

The method gets called when user enters the chat.

Parameters:

  • cid (number) - ID of the chat to get messages from.

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
 }
]

addMessage(cid, text, origin)

The method gets called when a new message is added.

Parameters:

  • cid (number) - chat ID;
  • text (string) - message text;
  • origin (number) - client-side ID of the message.

Returns: message object with the following structure:

{
  chat_id: 31,
  date: new Date(),
  id: 75,
  text: "Anyone here?",
  user_id: 3
}

removeMessage(messageId)

The method gets called when a specified message has been deleted.

Parameters:

  • messageId (number) - message ID.

Returns: message object with the following structure:

{
  chat_id: 31,
  date: new Date(),
  id: 71,
  text: "",
  user_id: 0
}

updateMessage(messageId, text)

The method gets called when a specified message is updated.

Parameters:

  • messageId (number) - message ID;
  • text (string) - message text.

Returns: message object with the following structure:

{
  chat_id: 31,
  date: new Date(),
  id: 76,
  text: "Hey, Alex :)",
  user_id: 3
}

resetCounter(cid)

The method resets the counter of the undread messages in a specified chat.

Parameters:

  • cid (number) - chat ID.

The method does not return any data.

addGroupChat(name, avatar, users)

The method gets called when a new group chat is created.

Parameters:

  • name (number) - chat name;
  • avatar (string) - URL for the chat avatar;
  • users (array) - IDs of the users being invited.

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]
}

updateChat(chatId, name, avatar)

The method gets called when a specified chat has been updated.

Parameters:

  • chatId (number) - chat ID;
  • name (string) - chat name;
  • avatar (string) - URL for the chat avatar.

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]
}

leave(chatId, userId)

The method gets called when a user leaves a specified chat.

Parameters:

  • chatId (number) - chat ID
  • userId (number) - user ID

Returns: null if the user left successfully.

setUsers(chatId, users)

The method gets called when a user adds or remove members.

Parameters:

  • chatId (number) - chat ID;
  • users (array) - IDs of the chat members.

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]
}

avatarUploadUrl()

The method returns a url for uploading chat avatars.

Returns: url string for uploading.

this.app.config.url + "/chat/0/avatar";
Back to top