Настройка тестовых данных через Node-Red для передачи данных через WebSocket

Я буду использовать Node-Red для получения данных через соединение WebSocket. Он вернет входящие данные в интервале.

Установка Node-Red на локальном компьютере

sudo npm install -g --unsafe-perm node-red

Запустите Node-Red на локальном компьютере

Теперь вы открываете cmd или терминал, а затем запускаете следующий код:

node-red

После запуска node-red мы получим что-то вроде этого:

Вам нужно добавить узлы timestamp и WebSocket out. В узлах timestamp мы определяем данные JSON.

Вы можете создать данные JSON из панели управления, как показано ниже:

После, дважды щелкнув метку времени, вставьте свои данные. Вы можете изменить это в соответствии с вашими потребностями:

Вы можете редактировать WebSocket out узлов таким образом, путь необходим для ваших URL-адресов подключения.

Проверьте подключение к WebSocket

Для тестирования соединения WebSocket вы можете использовать это расширение клиента WebSocket.

После установки вы можете проверить URL-адрес подключения WebSocket по адресу 127.0.0.1:1880/test.

Когда соединение будет установлено, вы увидите «connected» под Node-Red WebSocket out.

Подключение к библиотеке JQuery

Во-первых, для использования JQuery мы добавили пакет jquery.min.js в файл сценария. Когда у нас нет сетевого подключения, это будет наш порт подключения. Когда я пишу коды JavaScript, я предпочитаю использовать jQuery, чтобы облегчить мою работу.

Мы будем использовать много вызовов в полезной нагрузке WebSocket, поэтому JQuery сократит нашу работу.

Одним из лучших преимуществ jQuery является то, что мы можем легко управлять CSS. Кроме того, мы можем очень легко выполнять наши манипуляции с DOM и HTML.

Теперь давайте посмотрим на использование JQuey в нашем index.js файле.

jQuery(function () {
   console.log(“test”);
});

Установка lite-сервера

npm install -g lite-server

Запустим наш проект на терминале с lite-servercommand.

Приступим к консоли DevTools. Если вы видите, что написано test, теперь мы можем использовать библиотеку.

Теперь, когда мы установили библиотеку, мы можем вызвать наш файл app.json. Отсюда мы получим URL-адрес для подключений WebSocket и Stomp.

Сначала мы создаем локальную переменную с именем appSettings.

Мы вызываем переменные с помощью метода$.get(), чтобы использовать значения из файла app.json. Мы бросаем полученные значения в созданные нами appSettings.

Поскольку lite-server сейчас работает, мы сохраняем изменения с помощью Ctrl + S. Снова смотрим на Devtools. Если в консоли отображается журнал «Соединение успешно», это означает, что соединение установлено.

Подключение через WebSocket

Для подключения к WebSocket нам нужно создать функцию. После создания этой функции мы вызовем ее внутри jQuery.

var ws = new WebSocket(appSettings.websocket.ws);
// where appSettings.websocket.ws = ws://127.0.0.1:1880/test

Мы устанавливаем наше соединение WebSocket. Нашим портом будет порт appSettings.websocket.

Несколько выводов, которые мы можем сделать из приведенного выше кода:

ws.onopen = function(){} метод используется, чтобы проверить, есть ли у нас соединение. Если есть фрагмент кода, который мы хотим запустить, мы напишем его здесь.

ws.onclose = function(){} этот метод используется, чтобы проверить, не разорвано ли наше соединение:

Сначала мы устанавливаем ws в значение null, чтобы входящие данные не вызывали проблем при потере нашего соединения.

Нам может потребоваться отправить запрос, когда соединение потеряно. Если мы хотим, мы можем оживить соединение с таймаутом.

В приведенном выше коде мы создали отдельную функцию, чтобы мы могли получать входящее сообщение.

Если вы отметите Console, вы увидите входящее сообщение.

В приведенном выше коде нам нужно проверить, есть ли входящее сообщение. Если сообщения нет, он не должен выполнять эти операции.

Поскольку входящее сообщение имеет формат JSON, нам нужно преобразовать это сообщение в объект JavaScript. Мы проделываем эту операцию в функции msg.

Вызов имени пользователя с помощью функции userList ()

Во-первых, нам нужно создать тег div с идентификаторами userList в файле index.html.

В приведенном выше коде мы сбросили данные внутри userList. В противном случае входящие данные будут перезаписаны. Поскольку наша структура сообщения представляет собой массив, мы будем выполнять наши вызовы в цикле. Мы будем печатать имена в цикле до длины массива.

Мы создаем столько div, сколько объектов в userList, и присваиваем ему имена с ${object.name}.

Код CSS для классовuser и userlist:

Мы использовали userlist, чтобы создать динамическое пространство для divs, которое будет создано. И я использовал его, чтобы собрать 28_, которые будут сформированы в поле. user - это имя класса divs, который будет создан.

Вот окончательный результат:

Спасибо за прочтение.