Передача сообщений по WebSocket

Руководство
Сложный

WebSocket используется для передачи сообщений. Сообщения, которые получены по WebSocket, Creatio транслирует подписчикам с использованием схемы ClientMessageBridge клиентского модуля. Внутри Creatio сообщения передаются через объект sandbox. Сообщение является широковещательным и ему присваивается имя SocketMessageReceived. Вы можете подписаться на сообщение и обработать полученные данные.

Реализовать пользовательскую логику передачи сообщения 

Чтобы реализовать пользовательскую логику передачи сообщения, которое получено по WebSocket:

  1. Создайте замещающую схему схемы клиентского модуля ClientMessageBridge. Подробнее читайте в статье Клиентский модуль.
  2. Добавьте сообщение в дополнительное свойство messages схемы. Подробнее читайте в статье Свойство messages.
  3. Добавьте сообщение, которое получено по WebSocket, в конфигурационный объект сообщений схемы. Для этого реализуйте перегрузку родительского метода init().
  4. Отследите рассылку сообщения. Для этого реализуйте перегрузку базового метода afterPublishMessage().

Сохранить сообщения в историю 

Работа с историей сообщений зависит от обработчика Listener, который присутствует при публикации сообщения в Creatio.

scr_PublishMessage.png

Действия, которые выполняет Creatio, если обработчик Listener не загружен:

  1. Сохраняет необработанные сообщения в историю.
  2. Проверяет наличие обработчика Listener перед публикацией сообщения.
  3. Публикует все сохраненные сообщения в порядке их получения после загрузки обработчика.
  4. Очищает историю после публикации сообщений из истории.
scr_PublishMessageWithoutListener.png

Абстрактные методы класса BaseMessageBridge, которые реализуют сохранение сообщений в историю и работу с ними через localStorage хранилище браузера:

  • saveMessageToHistory() — сохраняет новое сообщение в коллекцию сообщений.
  • getMessagesFromHistory() — получает массив сообщений по указанному имени.
  • deleteSavedMessages() — удаляет сохраненные сообщения по указанному имени.

В схеме ClientMessageBridge реализованы абстрактные методы родительского класса BaseMessageBridge.

Чтобы реализовать сохранение сообщений в историю, укажите значение true для свойства isSaveHistory при добавлении конфигурационного объекта.

Пример реализации сохранения сообщений в историю
init: function() {
   /* Вызывает родительский метод init(). */
   this.callParent(arguments);
   /* Добавляет новый конфигурационый объект в коллекцию конфигурационных объектов. */
   this.addMessageConfig({
       /* Имя сообщения, которое получено по WebSocket. */
       sender: "OrderStepCalculated",
       /* Имя сообщения, которое используется при рассылке сообщения в Creatio. */
       messageName: "OrderStepCalculated",
       /* Признак сохранения сообщения в историю. */
       isSaveHistory: true
    });
},

Чтобы реализовать работу с сообщениями через другое хранилище:

  1. Cоздайте класс-наследник класса BaseMessageBridge.
  2. В классе-наследнике реализуйте пользовательскую логику методов saveMessageToHistory(), getMessagesFromHistory() и deleteSavedMessages().
Смотрите также
Клиентский модуль
Клиентская схема
Настроить нового подписчика
Сложный

Пример. При сохранении контакта опубликовать сообщение NewMessage на back-end стороне. Сообщение отправлено по WebSocket и содержит информацию о дне рождения и имени контакта. На front-end стороне реализовать рассылку сообщений NewMessage. Отобразить сообщения в консоли браузера.

1. Создать схему замещающего объекта 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающий объект (Add —> Replacing object).

  3. Заполните свойства схемы.

    • Код (Code) — "Contact".
    • Заголовок (Title) — "Контакт" ("Contact").
    • Родительский объект (Parent object) — выберите "Contact".

  4. В схему добавьте событие.

    1. Перейдите в узел События (Events) структуры объекта.

    2. В блоке Сохранение (Saving) установите признак После сохранения записи (After record saved). Событию присвоено имя ContactSaved.

    3. На панели инструментов дизайнера объектов нажмите Сохранить (Save).

  5. Реализуйте событийный подпроцесс.

    1. На панели инструментов дизайнера объектов нажмите Открыть процесс (Open process).

    2. В области элементов дизайнера нажмите Действия системы (System actions) и разместите элемент Событийный подпроцесс (Event sub-process) в рабочей области дизайнера процессов.

    3. На панели настройки элементов заполните свойство Заголовок (Title) — "Contact Saved Sub-process".

    4. Настройте элементы событийного подпроцесса.

      1. Настройте начальное событие Сообщение (Message).

        • Заголовок (Title) — "After contact saved".
        • При получении какого сообщения запускать процесс? (Which message event should start the process?) — "ContactSaved".

      2. Добавьте действие системы Задание-сценарий (Script task).

        1. В области элементов дизайнера нажмите Действия системы (System actions) и разместите действие системы Задание-сценарий (Script task) в рабочей области подпроцесса.

        2. Действию системы Задание-сценарий (Script task) добавьте имя "Опубликовать сообщение по WebSocket" ("Publish a message via WebSocket").

        3. Добавьте код действия системы Задание-сценарий (Script task).

          Код действия системы Задание-сценарий (Script task)
          /* Получает имя контакта. */
string userName = Entity.GetTypedColumnValue<string>("Name");
/* Получает дату дня рождения контакта. */
DateTime birthDate = Entity.GetTypedColumnValue<DateTime>("BirthDate");
/* Формирует текст сообщения. */
string messageText = "{\"birthday\": \"" + birthDate.ToString("s") + "\", \"name\": \"" + userName + "\"}";
/* Присваивает имя сообщению. */
string sender = "NewMessage";
/* Публикует сообщение по WebSocket. */
MsgChannelUtilities.PostMessageToAll(sender, messageText);
return true;
        4. На панели инструментов дизайнера процессов нажмите Сохранить (Save).

    5. Настройте поток управления. Для этого в меню начального события Сообщение (Message) нажмите на кнопку и соедините начальное событие Сообщение (Message) с действием системы Опубликовать сообщение по WebSocket (Publish a message via WebSocket).

    Событийный подпроцесс представлен на рисунке ниже.

  6. На панели инструментов дизайнера процессов нажмите Сохранить (Save), а затем Опубликовать (Publish).

2. Реализовать рассылку сообщения в Creatio 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).

  3. Заполните свойства схемы.

    • Код (Code) — "ClientMessageBridge".
    • Заголовок (Title) — "ClientMessageBridge".
    • Родительский объект (Parent object) — выберите "ClientMessageBridge".

  4. Реализуйте рассылку широковещательного сообщения NewMessage.

    • В свойстве messages привяжите широковещательное сообщение NewMessage, которое может публиковаться в приложении.

    • В свойстве methods перегрузите родительские методы:

      • init() — добавляет сообщение, которое получено по WebSocket, в конфигурационый объект сообщений схемы.
      • afterPublishMessage — отслеживает рассылку сообщения.

    Исходный код схемы замещающей модели представления представлен ниже.

    ClientMessageBridge
    define("ClientMessageBridge", ["ConfigurationConstants"], function(ConfigurationConstants) {
    return {
        /* Сообщения. */
        messages: {
            /* Имя сообщения. */
            "NewMessage": {
                /* Широковещательное сообщение. */
                "mode": Terrasoft.MessageMode.BROADCAST,
                /* Направление сообщения — публикация. */
                "direction": Terrasoft.MessageDirectionType.PUBLISH
            }
        },
        /* Методы. */
        methods: {
            /* Инициализация схемы. */
            init: function() {
                /* Вызывает родительский метод. */
                this.callParent(arguments);
                /* Добавляет новый конфигурационный объект в коллекцию конфигурационных объектов. */
                this.addMessageConfig({
                    /* Имя сообщения, которое получено по WebSocket. */
                    sender: "NewMessage",
                    /* Имя сообщения, с которым рассылается сообщение. */
                    messageName: "NewMessage"
                });
            },
            /* Метод, который выполняется после публикации сообщения. */
            afterPublishMessage: function(
                /* Имя сообщения, с которым рассылается сообщение. */
                sandboxMessageName,
                /* Содержимое сообщения. */
                webSocketBody,
                /* Результат отправки сообщения. */
                result,
                /* Конфигурационный объект рассылки сообщения. */
                publishConfig) {
                /* Проверяет, что сообщение соответствует добавленному в конфигурационный объект. */
                if (sandboxMessageName === "NewMessage") {
                    /* Сохраняет содержимое в локальные переменные. */
                    var birthday = webSocketBody.birthday;
                    var name = webSocketBody.name;
                    /* Выводит содержимое в консоль браузера. */
                    window.console.info("Published message: " + sandboxMessageName +
                        ". Name: " + name +
                        "; birthday: " + birthday);
                }
            }
        }
    };
});
  5. На панели инструментов дизайнера нажмите Сохранить (Save).

3. Реализовать подписку на сообщение 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.
  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).

  3. Заполните свойства схемы.

    • Код (Code) — "ContactPageV2".
    • Заголовок (Title) — "Display schema - Contact card".
    • Родительский объект (Parent object) — выберите "ContactPageV2".

  4. Реализуйте подписку на широковещательное сообщение NewMessage.

    • В свойстве messages привяжите широковещательное сообщение NewMessage, на которое можно подписаться.
    • В свойстве methods перегрузите родительский метод init(). Метод подписывается на сообщение NewMessage. Укажите метод-обработчика onNewMessage(), который обрабатывает полученный в сообщении объект и выводит результат в консоль браузера.

    Исходный код схемы замещающей модели представления представлен ниже.

    ContactPageV2
    define("ContactPageV2", [], function(BusinessRuleModule, ConfigurationConstants) {
    return {
        /* Имя схемы объекта. */
        entitySchemaName: "Contact",
        messages: {
            /* Имя сообщения. */
            "NewMessage": {
                /* Широковещательное сообщение. */
                "mode": Terrasoft.MessageMode.BROADCAST,
                /* Направление сообщения — подписка. */
                "direction": Terrasoft.MessageDirectionType.SUBSCRIBE
            }
        },
        /* Методы. */
        methods: {
            /* Инициализация схемы. */
            init: function() {
                /* Вызывает родительский метод. */
                this.callParent(arguments);
                /* Подписывается на прием сообщения NewMessage */
                this.sandbox.subscribe("NewMessage", this.onNewMessage, this);
            },
            /* Обрабатывает событие получения сообщения NewMessage. */
            onNewMessage: function(args) {
                /* Сохраняет содержимое сообщения в локальные переменные. */
                var birthday = args.birthday;
                var name = args.name;
                /* Выводит содержимое в консоль браузера. */
                window.console.info("Received message: NewMessage. Name: " +
                    name + "; birthday: " + birthday);
            }
        }
    };
});
  5. На панели инструментов дизайнера нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Очистите кэш браузера.
  2. Обновите страницу раздела Контакты (Contacts).
  3. Откройте страницу контакта. Например, Alexander Wilson.
  4. Откройте вкладку Console в консоли браузера.
  5. Измените любое поле.
  6. Сохраните контакт.

В результате полученное и отправленное сообщения NewMessage отображаются в консоли браузера.

scr_result.png
Ресурсы
Пакет с реализацией примера
Класс ClientMessageBridge
Сложный

Сообщения, которые получены по WebSocket, Creatio транслирует подписчикам с использованием схемы ClientMessageBridge клиентского модуля.

Свойства 

LocalStoreName

Название хранилища, в котором сохраняется история сообщений.

LocalStore Terrasoft.LocalStore

Экземпляр класса, который реализует доступ к локальному хранилищу.

Методы 

init()

Инициализирует значение по умолчанию.

saveMessageToHistory(sandboxMessageName, webSocketBody)

Сохраняет сообщение в хранилище, если подписчик отсутствует, а в конфигурационном объекте указан признак необходимости сохранения.

Параметры
sandboxMessageName: String Имя сообщения, которое используется при рассылке сообщения в Creatio.
webSocketBody: Object Сообщение, которое получено по WebSocket. 
getMessagesFromHistory(sandboxMessageName)

Возвращает массив сохраненных сообщений из хранилища.

Параметры
sandboxMessageName: String Имя сообщения, которое используется при рассылке сообщения в Creatio. 
deleteSavedMessages(sandboxMessageName)

Удаляет из хранилища сохраненное сообщение.

Параметры
sandboxMessageName: String Имя сообщения, которое используется при рассылке сообщения в Creatio.