Настройка 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) - the ширина виджета, при которой он переключается в компактный режим. 650 по умолчанию
• typingMode (boolean) - the mode that simulates typing of response for bots. true by default. Check the details
• typingDelay (number) - the delay between letters typing in ms. 50 by default. The property works only with the typingMode configuration option enabled
• typingLoadedDelay (number) - the delay between letters typing in ms, when the "end" operation comes from the server. 10 by default. The property works only with the typingMode configuration option enabled

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

Кроме базовых свойств, у 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.

Наверх