Настройка Chat

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

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

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

  • id (string, number) - необязательный параметр, ID виджета
  • url (string) - URL для загрузки и сохранения данных
  • locale (string, object) - текущая локаль или объект с настройками локали
  • width (number) - ширина виджета
  • height (number) - высота виджета
  • token (string) - необязательный параметр, токен авторизации;
  • calls (boolean) - включает/отключает возможность совершать звонки. Подробнее о настройке звонков "один на один" и групповых звонков читайте в соответствующей статье.
  • files (boolean) - включает/отключает возможность загрузки и скачивания файлов
  • emojis (boolean) - включает/отключает возможность отправлять эмодзи
  • 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: 9,
  callStatus: 1,
  callId: 4,
  callUsers: [9, 3],
  callChatId: 6,
  timer: 5000,
  time: 5,
  callChatId: 0, 
  callInitiator: 0, 
  callIsGroup: false, 
  callName: "", 
  callAvatar: ""
}
*/

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

  • userId (number, string) - ID пользователя, с которым открыт текущий приватный чат
  • search (string) - хранит значение поисковой строки в текущем списке чатов ("Chats" или "Users")
  • chatType (string) - тип текущего чата ("chat" или "user"). "chat" - это групповой чат, "user" - это приватный чат
  • callStatus (number) - статус звонка. Возможные значения:
    • 1 - статус звонка: начат
    • 2 - статус звонка: принят
    • 3 - статус звонка: активный
    • 801 - статус звонка: разъединен
    • 901 - статус звонка: отклонён
    • 902 - статус звонка: завершён
    • 903 - статус звонка: нет ответа
    • 904 - статус звонка: соединение разорвано
    • 905 - статус звонка: занят..
  • callId (number) - хранит ID звонка
  • callUsers (array) - массив с ID пользователей, которые участвуют в звонке
  • callChatId (number) - ID чата, в котором происходит звонок
  • timer (number) - таймер звонка. Инкрементирует значение поля time
  • time (number) - кол-во секунд с начала звонка.

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

Следить за изменениями реактивных свойств можно с помощью обработчика $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 State Changes

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

Наверх