Як створити групу чату додатки реального часу за п'ять хвилин за допомогою Node-RED

1. Що для цього потрібно
2. Крок 2. Імпорт коду
3. Крок 4. Розбір коду (факультативно)
4. висновок
5. Ресурси для скачування

Увійдіть в IBM Bluemix ™
Ця хмарна платформа містить безкоштовні служби, інструменти часу виконання і інфраструктуру, які допоможуть вам швидко створити і розгорнути своє наступне мобільне або веб-додаток.

Node-RED - це інструмент з відкритим вихідним кодом, розроблений групою нових технології IBM, який дозволяє створювати додатки, просто поєднуючи готові компоненти. Ці компоненти можуть бути пристроями, веб-API або онлайн-службами.

На платформі IBM Bluemix легко організувати середу виконання Node-RED. Всього декілька кліків кнопки миші, і ви отримуєте робочу середу, готову до створення нової програми. У цій статті ми покажемо, як всього за кілька хвилин побудувати додаток чату реального часу на платформі Node-RED за допомогою Bluemix.

запустити програму отримати код

Що для цього потрібно

• Обліковий запис Bluemix
• Знайомство з HTML, CSS і JavaScript. Ми надаємо весь необхідний код, але знайомство з цими технологіями допоможе вам зрозуміти деталі.

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

Крок 2. Імпорт коду

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

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

Пізніше ми пояснимо, що робить кожен компонент, а поки розгорнемо і запустимо додаток.

1. Натисніть червону кнопку Deploy поруч з кнопкою меню, щоб оживити свій додаток.
   
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, в який надходять всі повідомлення чату, і нижнього колонтитула, який містить поля для відправки повідомлень.
5. Обробка повідомлень проводиться за допомогою JavaScript. Спочатку ми відкриваємо з'єднання з кінцевою точкою WebSocket, яку створили за допомогою Node-RED.
   

   Потім реєструємо обробники подій для об'єкта 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