Содержание


Создание чат-приложения реального времени за пять минут с помощью Node-RED

Comments

Node-RED — это инструмент с открытым исходным кодом, разработанный группой новых технологии IBM, который позволяет создавать приложения, просто соединяя готовые компоненты. Эти компоненты могут быть устройствами, веб-API или онлайн-службами.

Мы покажем, как всего за несколько минут построить приложение чата реального времени на платформе Node-RED с помощью Bluemix.

На платформе IBM Bluemix легко организовать среду выполнения Node-RED. Всего несколько щелчков кнопки мыши, и вы получаете рабочую среду, готовую к созданию нового приложения. В этой статье мы покажем, как всего за несколько минут построить приложение чата реального времени на платформе Node-RED с помощью Bluemix.

Запустить приложениеПолучить код

Что для этого требуется

  • Учетная запись Bluemix
  • Знакомство с HTML, CSS и JavaScript. Мы предоставляем весь необходимый код, но знакомство с этими технологиями поможет вам понять детали.

Шаг 1. Создание приложения на платформе Node-RED

  1. Войдите в Bluemix и создайте новый шаблон Node-RED.
  2. Присвойте приложению имя и нажмите кнопку CREATE.Имя приложения Node-RED
    Имя приложения Node-RED
  3. На информационной панели Bluemix перейдите по URL-адресу, указанному для вашего нового приложения, чтобы запустить его на главной странице Node-RED.URL-адрес Node-RED на Bluemix
    URL-адрес Node-RED на Bluemix
  4. Теперь щелкните на ссылке Go to your Node-RED flow editor, чтобы открыть редактор блок-схемы.Главная страница Node-RED
    Главная страница Node-RED
  5. Вы увидите пустой лист, на котором мы будем строить приложение. При использовании Node-RED приложения строятся с помощью этого графического редактора путем соединения нужных блоков. Блоки просто перетаскиваются из левого меню в рабочую область в центре экрана и соединяются для создания новой блок-схемы.Пустой лист на Node-RED
    Пустой лист на Node-RED

Шаг 2. Импорт кода

Каждое приложение Node-RED можно импортировать и экспортировать в формате JSON. Давайте импортируем наше приложение чата на новый лист.

  1. Войдите в репозиторий проекта на сайте IBM DevOps Services и откройте файл nodechat.json.
  2. Скопируйте все содержимое файла, а затем вернитесь в свой браузер с открытой страницей Node-RED.
  3. Нажмите кнопку меню в верхнем правом углу и выберите Import from… > Clipboard…
    . Меню импорта на Node-RED
    Меню импорта на Node-RED
  4. Вставьте содержимое файла из репозитория и нажмите кнопку ОК.Область вставки импортируемого кода
    Область вставки импортируемого кода
  5. Щелкните где-нибудь на пустом листе, чтобы добавить импортированные узлы.
    Импорт приложения в Node-RED
    Импорт приложения в Node-RED

Позже мы объясним, что делает каждый компонент, а пока развернем и запустим приложение.

Шаг 3. Развертывание и запуск приложения

  1. Нажмите красную кнопку Deploy рядом с кнопкой меню, чтобы оживить свое приложение.
    Кнопка Deploy на Node-RED
    Кнопка Deploy на Node-RED
  2. Вы увидите сообщение об успешном развертывании в верхней части окна, и синие точки над узлами исчезнут. Эти точки означают, что узел был изменен, но еще не развернут.
    Сообщение об успешном развертывании
    Сообщение об успешном развертывании
  3. Теперь откройте новую вкладку в браузере и перейдите на страницу http://[appname].mybluemix.net/chat, заменив [app name] именем своего приложения.
    Запуск приложения чата
    Запуск приложения чата
  4. Теперь приложение чата работает. Введите имя пользователя в поле слева, напишите сообщение в поле справа и нажмите кнопку Send.
    Отправка чат-сообщения
    Отправка чат-сообщения
  5. Откройте чат во втором окне или отправьте ссылку кому-нибудь из своих друзей и наслаждайтесь общением. Сообщения должны приходить мгновенно.
    Чат в режиме реального времени с несколькими пользователями
    Чат в режиме реального времени с несколькими пользователями

Шаг 4. Разбор кода (факультативно)

В этом разделе мы рассмотрим код нашего приложения. Этот раздел можно пропустить, но мы рекомендуем прочесть его, чтобы понять, как построено приложение, и узнать, как работает Node-RED.

  1. В первом разделе у нас есть три узла:
    • WebSocket in
    • Function
    • WebSocket out
    Первый поток приложения
    Первый поток приложения

    Эти блоки отвечают за создание канала связи и обработку сообщений в режиме реального времени с помощью протокола WebSocket. Блок Function довольно прост. Он всего лишь удаляет значение _session из объекта msg, чтобы сообщение транслировалось во все клиенты, подключенные к WebSocket.

    Код трансляции сообщений
  2. Второй поток отвечает за код на стороне клиента. В нем есть узел HTTP in, Template для отображения HTML-страницы и узел HTTP out для ответа. Второй поток приложения чата
    Второй поток приложения чата

    Узел HTTP in ([get] /chat) создает конечную точку для получения запросов GET и их передачи в Template. Узел HTTP out создает надлежащий ответ, возвращаемый пользователю после визуализации шаблона.

  3. Шаблон можно разбить на три части: структура страницы, обработка сообщений и визуальное представление.
  4. По своей структуре страница – это простая HTML-страница с элементом div, в который поступают все сообщения чата, и нижним колонтитулом, который содержит поля для отправки сообщений. Структура HTML-кода приложения
    Структура HTML-кода приложения
  5. Обработка сообщений производится с помощью JavaScript. Сначала мы открываем соединение с конечной точкой WebSocket, которую создали с помощью Node-RED.
    Открытие соединения WebSocket
    Открытие соединения WebSocket

    Затем регистрируем обработчики событий для объекта ws, чтобы обрабатывать такие события, как открытие и закрытие соединения с сервером и получение новых сообщений.

    Регистрация обработчиков событий
    Регистрация обработчиков событий
  6. Когда пользователь отправляет сообщение, создается объект с именем пользователя и сообщением, который передается на сервер с помощью метода send в нашем объекте ws. Код отправки нового сообщения
    Код отправки нового сообщения
  7. Визуальная часть выполнена с помощью простых правил CSS, которые не рассматриваются в этой статье.

Заключение

Node-RED упрощает разработку кода, предоставляя набор узлов, готовых к соединению и использованию. Как показано в этой статье, для получения сервера, установленного на платформе Bluemix, который можно использовать в своих проектах, требуется совсем немного усилий. Это простое приложение чата можно совершенствовать, добавляя к существующим узлам новые и создавая новые потоки.


Ресурсы для скачивания


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Облачные вычисления
ArticleID=993343
ArticleTitle=Создание чат-приложения реального времени за пять минут с помощью Node-RED
publish-date=12192014