Як створити групу чату додатки HTML5 в Bluemix за допомогою Node.js, Redis і Socket.io

Що потрібно для створення додатка
Крок 1. Створення додатка
Крок 2. Розгортання додатки в Bluemix
Крок 3. Оновлення клієнтських додатків в режимі реального часу за допомогою Socket.io
Крок 4. Зберігання історії повідомлень в сховищі Redis
Крок 5. Створення служби Redis і її прив'язка до Bluemix.
висновок
Ресурси для скачування

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

До недавнього часу створення програми веб-чату було непростим завданням. Протокол HTTP ускладнює реалізацію веб-чату, так як його архітектура «запит-відповідь» погано узгоджується з природою чату, що вимагає постійного оновлення інформації. З цієї статті видно, що завдяки HTML5 і API WebSocket це положення докорінно змінилося. Ви дізнаєтеся, як використовувати бібліотеку Socket.io для швидкого створення чат-додатки реального часу.

На стороні сервера додаток, описане в цій статті, працює в Node.js, популярної серверної середовищі виконання JavaScript, заснованої на механізмі JavaScript V8 . Воно обслуговує регулярні HTTP-запити за допомогою інфраструктури Express і механізму шаблонів Jade . Більшу частину важкої роботи для цього додатка виконує Socket.io, але його легко реалізувати як на сервері, так і на стороні клієнта. 100 останніх повідомлень кешуються в сховище даних Redis . Додаток працює на платформі Bluemix, що гранично спрощує його публікацію.

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

Що потрібно для створення додатка

Знайомство з HTML, CSS і JavaScript
Node.js
Redis
Обліковий запис Bluemix
Інтерфейс командного рядка Bluemix (cf)

Примітка. Повний вихідний код програми доступний в IBM DevOps Services. Для стислості в статті не наводяться всі листинги вихідного коду. Щоб стежити за ходом статті, завантажте вихідний код (натисніть кнопку Отримати код вище).

Крок 1. Створення додатка

Створіть каталог для цього додатка в своїй локальній системі і додайте в нього файл package.json.

{ "Name": "bluemixchat", "version": "0.0.1", "private": true, "scripts": { "start": "node server.js"}, "dependencies": {}}

Встановіть необхідні npm-модулі:

Express
Jade
Redis
Socket.io

Для цього використовуйте команду npm install --saveexpress jade redis socket.io.

Вона встановлює npm-модулі (і будь-які інші модулі, від яких вони залежать) в підкаталог node_modules вашого проекту і автоматично додає ці модулі в якості залежностей в файл package.json. Наступний крок полягає в тому, щоб отримати працюючий скелет Express-додатки (server.js), як показано нижче.

// Початкове Express-додаток var express = require ( 'express'); var app = express (); app.listen (process.env.PORT || 3000); // Налаштування шаблонізатора Jade var path = require ( 'path'); app.set ( 'views', path.join (__ dirname, 'views')); app.set ( 'view engine', 'jade'); app.use (express.static (path.join (__ dirname, 'public'))); // обробка HTTP-запиту GET по URL-адресою «/» app.get ( '/', function (req, res) {res.render ( 'index');});

У цьому лістингу додаток обробляє вхідні запити по URL-адресою / і візуалізує уявлення з ім'ям index. Тепер створимо цю виставу. Спочатку створіть підкаталог з ім'ям views та додайте в нього файл index.jade. Вміст цього файлу показано в наступному лістингу.

Примітка. Цей код завантажує таблицю стилів додаток з підкаталогу public / stylesheets. Файл в цій статті stylesheet не розглядається. Цей файл, який містить код CSS, присутній в прикладі коду, завантаженому з DevOps Services.

doctype html html (lang = 'en') head meta (charset = 'utf-8') title Bluemix Chat meta (name = 'viewport', content = 'initial-scale = 1.0, width = device-width, \ height = device-height, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no ') link (rel =' stylesheet ', href =' // cdn.jsdelivr.net/normalize/3.0.1/normalize. min.css ') link (rel =' stylesheet ', href =' / stylesheets / style.css ') body h1 Bluemix Chat form input (id =' msg ', autocomplete =' off ', autofocus) button (type =' submit ') Send ul # messages

Механізм шаблонів Jade надає зручний спосіб визначення HTML-сторінок. Зверніть увагу, що для визначення структури документа в ньому використовуються прогалини. Не змішуйте прогалини зі знаками табуляції і дуже акуратно дотримуйтесь відступи в своєму коді.

Тепер додаток можна запустити. Виконайте команду npm start з командного рядка в каталозі проекту.

Ця команда запускає на вашому комп'ютері веб-сервер, що працює через порт 3000. Щоб побачити додаток в дії, відкрийте в браузері URL http: // localhost 3000. Ви повинні побачити вікно, зображене на рисунку.

Крок 2. Розгортання додатки в Bluemix

Розгорніть додаток в Bluemix за допомогою інструменту командного рядка cf. Якщо у вас його немає, зверніться на сторінку GitHub проекту за інформацією про те, як його встановити. Додатка і можна створювати і з панелі управління Bluemix, але для розгортання готового додатка все одно буде потрібно інструмент cf; так що в цій статті я використовую тільки його.

Виконайте наступні команди, щоб встановити з'єднання з API Bluemix і увійти за допомогою облікового запису Bluemix:

cf api https://api.bluemix.net cf login

Після введення другої команди введіть свою адресу електронної пошти і пароль.

Увага! При роботі в Bluemix використовуйте унікальні імена додатків і хостів. При використанні імен з цих прикладів ви будете отримувати повідомлення про помилки.

Тепер можна розгорнути додаток в Bluemix за допомогою команди cf push bluemixchat.

Коли додаток розгорнуто, повідомлення вказує, що воно запущено, і надає свій URL-адресу. Щоб перевірити, чи працює додаток, відкрийте в браузері сторінку http://bluemixchat.mybluemix.net . Наступним кроком ми забезпечуємо обмін повідомленнями в режимі реального часу за допомогою Socket.io.

Крок 3. Оновлення клієнтських додатків в режимі реального часу за допомогою Socket.io

Socket.io - це npm-модуль, який дозволяє дуже легко створювати додатки, що використовують WebSockets HTML5, на стороні сервера і на стороні клієнта. При прив'язці бібліотеки Socket.io до додатка Node.js вона автоматично стає клієнтської бібліотекою JavaScript, розташованої по URL-адресою /socket.io/socket.io.js, яку можна використовувати для передачі і прийому нових повідомлень з сервера.

Щоб додати до Express-додатком сервер Socket.io, знайдіть в файлі server.js наступний рядок: app.listen (process.env.PORT || 3000) ;. Замініть цей рядок наступним кодом:

var http = require ( 'http'). Server (app); var io = require ( 'socket.io') (http); http.listen (process.env.PORT || 3000);

Цей код завантажує HTTP-модуль і прив'язує до нього сервер Socket.io. Код прослуховує вхідні запити на порт 3000 або порт, визначений у змінній середовища PORT пов'язаних з поточною діяльністю. Коли додаток розгорнуто в Bluemix, порт для прослуховування визначається параметром PORT.

Далі, додайте код для обробки різних подій в чат-додатку і відправки повідомлень до приєднаним клієнтам за допомогою Socket.io. Додайте в кінець файлу server.js наступний код:

// socket.io прослуховує повідомлення io.on ( 'connection', function (socket) {// Коли повідомлення отримано, передати його // всім користувачам, за винятком вихідного socket.on ( 'msg', function (data) {socket .broadcast.emit ( 'msg', data);}); // Коли користувач приєднується до чату, відправити повідомлення // всім користувачам, за винятком вихідного socket.on ( 'join', function (nickname) {// Прикріпити до сокету псевдонім користувача socket.nickname = nickname; socket.broadcast.emit ( 'notice', nickname + 'has joined the chat.');}); // При відключенні користувача відправити повідомлення // всім користувачам, за винятком вихідного socket. on ( 'disconnect', function () {socket.broad cast.emit ( 'notice', socket.nickname + 'has left the chat.');});});

Тепер, коли код на стороні сервера готовий, додамо код на стороні клієнта для взаємодії з Socket.io. Додайте наступний код в кінець файлу views / index.jade. Зверніть увагу, що цей код повинен слідувати з відступом всередині елемента body в шаблоні Jade. В іншому випадку можуть виникнути проблеми.

script (src = '// cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js') script (src = '/ socket.io/socket.io.js') script (src = '/ javascripts /client.js ')

Цей код завантажує jQuery з Content Delivery Network (CDN), бібліотеку Socket.io з стандартного місця, куди її поміщає сервер, і файл client.js, який зберігається в каталозі public / javascripts додатки. Створіть цей файл. Ось його вміст.

$ (Document) .ready (function () {var socket = io (), nickname, msgList = $ ( '# messages'); // Перевірити, чи зберігається псевдонім в localStorage if ( 'localStorage' in window && localStorage.getItem ( 'nickname')) {nickname = localStorage.getItem ( 'nickname');} else {// Якщо в localStorage його немає, запросити псевдонім nickname = prompt ( 'Please enter your nickname'); if ( 'localStorage' in window) {localStorage.setItem ( 'nickname', nickname);}} // Надіслати повідомлення на сервер, до якого підключений користувач socket.emit ( 'join', nickname); // Функція додавання повідомлення на сторінку var newMessage = function ( data) {var who = $ ( '<div class = "who">'). text (data.nickname), when = $ ( '<div class = "when">'). text (new Date (). toString (). substr (0, 24)), msg = $ ( '<div class = "msg">'). text (data.msg), header = $ ( '<div class = "header clearf ix "> '). append (who) .append (when), li = $ (' <li> '). append (header) .append (msg); msgList.prepend (li);}; // Обробити форму для відправки нового повідомлення $ ( 'form'). submit (function (e) {var msgField = $ ( '# msg'), data = {msg: msgField.val (), nickname: nickname, when: new Date () }; e.preventDefault (); // Надіслати повідомлення на сервер Socket.io socket.emit ( 'msg', data); // Додати повідомлення на сторінку newMessage (data); // Очистити поле повідомлення msgField.val ( ''); }); // При отриманні повідомлення від сервера // додати його на сторінку за допомогою функції newMessage () socket.on ( 'msg', function (data) {newMessage (data);}); // При отриманні повідомлення від сервера // (про підключення або відключення користувача) додати його на сторінку socket.on ( 'notice', function (msg) {msgList.prepend ($ ( '<div class = "notice">') .text (msg));}); });

Цей код перевіряє, ввів користувач свій псевдонім, переглядаючи сховище localStorage браузера. Якщо немає, то код запитує його у користувача. Код зберігає псевдонім в localStorage на майбутнє. При завантаженні сторінки в Socket.io відправляється повідомлення про підключення нового користувача. При відправці форми повідомлення додаток додає повідомлення на сторінку і відправляє його на сервер. На останньому кроці додаток прослуховує дві події Socket.io, msg і notice, і оновлює сторінку кожен раз при отриманні даних про ці події.

Відкрийте програму знову, щоб ввести повідомлення, і перегляньте їх на екрані. Можна запустити інший браузер і підключитися до додатка, щоб відправляти повідомлення з одного браузера і бачити їх на іншому. Спробуйте зробити це з декількома браузерами - ви тільки що створили чинне чат-додаток.

Тепер ми пояснимо, як зберігати повідомлення в сховище даних Redis.

Крок 4. Зберігання історії повідомлень в сховищі Redis

Якщо програма використовується його нинішньому вигляді після оновлення сторінки вся історія чату втрачається. Якщо програма використовується на мобільному пристрої, то це створює додаткову проблему, так як мобільні користувачі зазвичай працюють з подібними програмами епізодично. Коли пристрій заблоковано і вони знову відкривають браузер, він може оновити сторінку, що призведе до втрати історії.

Для вирішення цієї проблеми збережіть історію чату в сховище даних. Сховище Redis значно спрощує зберігання таких даних, як пари ключ-значення, списки і т.д. Воно набагато швидше, ніж звичайна база даних, так як дані зберігаються в оперативній пам'яті, а не на жорсткому диску. Це ідеально підходить для кешування даних, як у випадку зберігання історії повідомлень в чат-додатку.

Переконайтеся, що Redis працює на вашому локальному комп'ютері. (Як правило, для цього потрібно виконати команду redis-server. Потім знайдіть в файлі server.js наступний рядок: http.listen (process.env.PORT || 3000) ;. Вставте під цим рядком наступний код.

// Налаштування підключення клієнта Redis var redis = require ( 'redis'); var credentials; // Перевірка, чи перебуваємо ми в Bluemix або в localhost if (process.env.VCAP_SERVICES) {// В Bluemix - вважати установки для з'єднання з // змінної середовища VCAP_SERVICES var env = JSON.parse (process.env.VCAP_SERVICES); credentials = env [ 'redis-2.6'] [0] [ 'credentials']; } Else {// В localhost - деталі з'єднання жорстко програмуються credentials = { "host": "127.0.0.1", "port": 6379}} // Підключення до Redis var redisClient = redis.createClient (credentials.port, credentials. host); if ( 'password' in credentials) {// З Bluemix потрібно пройти аутентифікацію в Redis redisClient.auth (credentials.password); }

Примітка. При розгортанні додатки в Bluemix воно зчитує параметри налаштування з'єднання Redis з змінної середовища VCAP_SERVICES. Цей код встановлює з'єднання і виконує аутентифікацію на сервері Redis.

Оновлення серверний додаток, щоб передати нові повідомлення в Redis при їх отриманні. Знайдіть такий блок:

socket.on ( 'msg', function (data) {socket.broadcast.emit ( 'msg', data);});

На початку анонімної функції додайте наступні рядки.

redisClient.lpush ( 'messages', JSON.stringify (data)); redisClient.ltrim ( 'messages', 0, 99);

Цей код поміщає останні повідомлення в список messages в Redis, а потім обрізає список до 100 останніх елементів (якщо їх більше 100). Остання частина завдання полягає в пошуку існуючих повідомлень в Redis при вході клієнта. Для цього знайдіть наступний блок:

app.get ( '/', function (req, res) {res.render ( 'index');});

Замініть цей рядок наступним кодом.

app.get ( '/', function (req, res) {// Отримання 100 останніх повідомлень з Redis var messages = redisClient.lrange ( 'messages', 0, 99, function (err, reply) {if (! err) {var result = []; // Циклічний обхід списку з розбором кожного елемента в об'єкт for (var msg in reply) result.push (JSON.parse (reply [msg])); // Передача списку повідомлень в уявлення res.render ( 'index', {messages: result});} else res.render ( 'index');});});

Цей код отримує 100 останніх елементів в список Redis messages, перебирає їх і аналізує як повідомлення JSON, записуючи результати в об'єкти JavaScript. Потім він передає масив цих об'єктів в уявлення. Відкрийте файл views / index.jade і вкладіть в елемент ul # messages наступний код:

- for (var i = 0, ln = messages.length; i <ln; i ++) li .header.clearfix .who = messages [i] .nickname .when = new Date (messages [i] .when) .toString ( ) .substr (0, 24) .msg = messages [i] .msg

Знову запустіть додаток і надішліть кілька повідомлень. Зверніть увагу, що при перезавантаженні сторінки історія повідомлень відновлюється. Додаток не зберігає повідомлення join і disconnect користувача, але цю функцію легко додати. В якості останнього кроку виконаємо настройку Redis в Bluemix і опублікуємо готовий продукт.

Крок 5. Створення служби Redis і її прив'язка до Bluemix.

Щоб опублікувати останні зміни в Bluemix, створіть екземпляр служби Redis і прив'яжіть його до свого додатком. Для створення служби використовуйте команду cf create-service redis 100 bmcredis.

Змініть ім'я бази даних на що-небудь унікальне (в попередній команді - bmcredis). Щоб додаток могло встановити зв'язок з базою даних, його необхідно прив'язати: cf bind-service bluemixchat bmcredis.

Перезапустіть програму, щоб прив'язка вступила в силу. Опублікуйте зміни в Bluemix за допомогою команди cf push.

Вітаємо! Ви побудували чат-додаток з використанням Node.js, Redis і Socket.io і розгорнули його в Bluemix. Можете переконатися, що ваш додаток працює.

висновок

Додаток, який ви створили, - це повнофункціональний чат, але є безліч способів його розширення. Можна дозволити користувачам змінювати свої псевдоніми або переглядати список підключених користувачів. Можна додати підтримку декількох групах МП, особисті повідомлення і багато іншого. Так як додаток вже розгорнуто в Bluemix, будь-які додані функції можна розгорнути за допомогою простої команди cf push. Немає нічого простіше!

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

Схожі теми

Підпишіть мене на повідомлення до коментарів

Fast : Интернет-провайдеры и сети