Настройка Chat

Так как Chat - это приложение на базе Webix Jet, оно состоит из отдельных Webix компонентов. Эти компоненты можно переопределить или же работать с отдельными настройками чата.

Базовая конфигурация

Чтобы настроить общую конфигурацию виджета, используйте следующие свойства:

  • id (string, number) - необязательный параметр, ID виджета;
  • url (string) - URL для загрузки и сохранения данных;
  • locale (string, object) - текущая локаль или объект с настройками локали;
  • width (number) - ширина виджета;
  • height (number) - высота виджета;
  • token (string) - необязательный параметр, токен авторизации;
  • mode (string) - задаёт режим для Chat:
    • "limited"- чаты заранее заданы, пользователи не могут изменять их;
    • "single" - все пользователи в одном чате;
    • "full" (default);
  • compact (boolean) - компактный режим. false по умолчанию;
  • compactWidth (number) - ширина виджета, при которой он переключается в компактный режим. 650 по умолчанию.

Обратите внимание, что token - необязательное свойство, которое используется сервисом Backend и передаётся на сервер. Вы можете разработать свой вариант авторизации пользователя.

Реактивные свойства

Кроме базовых свойств, у Chat есть реактивные, которые хранят состояние приложения и позволяют разработчикам отслеживать его изменения:

  • chatId (number, string) - ID текущего чата.

Получить текущее состояние компонента можно с помощью метода getState():

webix.ui({
    view:"chat", 
    id:"myChat",
    token, // токен приходит от сервера
    url: "https://docs.webix.com/chat-backend/"
});
 
var state = $$("myChat").getState();
/*
{
  chatId: 6,
  chatType: "chat",
  search: "",
  userId: null
}
*/

Объект состояния также хранит несколько свойств только для чтения:

  • userId (number, string) - ID пользователя, с которым открыт текущий приватный чат;
  • search (string) - хранит значение поисковой строки в текущем списке чатов ("Chats" или "Users");
  • chatType (string) - тип текущего чата ("chat" или "user"). "chat" - это групповой чат, "user" - это приватный чат.

Отслеживание изменений реактивных свойств

Следить за изменениями реактивных свойств можно с помощью обработчика $observe:

webix.ui({
  view: "chat",
  url: "https://docs.webix.com/chat-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      state.$observe("chatId", id => {
        webix.message("The chat id is " + id);
      });
    }
  }
});

Related sample:  Chat: Listening to States

В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.

Наверх