Настройка 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 по умолчанию
• typingMode (boolean) - режим симуляции печати ответа чат-ботом. true по умолчанию. Подробнее.
• typingDelay (number) - промежуток между печатью букв в мс. 50 по умолчанию. Для работы данного свойства необходимо активировать параметр конфигурации typingMode
• typingLoadedDelay (number) - промежуток между печатью букв в мс, когда маркер "end" приходит с сервера. 10 по умолчанию. Для работы данного свойства необходимо активировать параметр конфигурации typingMode

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

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

Наверх