Создание веб-чата с помощью Webix и WebSockets API

Одним из новейших и действительно классных API в настоящее время является WebSockets API. Данный интерфейс позволяет создавать приложения, работающие в режиме реального времени, где пользователи могут совместно работать, получать уведомления и обновления данных, всякий раз, когда данные изменяются. Данная статья призвана показать вам как можно создать простой веб-чат, используя Webix и WebSockets API.

Веб-чат — простейшее среди приложений, работающих в режиме реального времени. Вы можете взять исходный код на github.

Серверная часть

Для работы (в качестве серверной стороны) мы будем использовать платформу NodeJS , которая в настоящее время является лучшей основой для создания приложений, работающих в режиме реального времени. Предположим, что у NodeJS установлен на вашем компьютере. Давайте начнем с создания новой папки для приложения и установим Faye library, а также пакет Connect. Для установки вам нужно запустить следующие команды:

Faye — это система обмена сообщениями, которая предполагает, что клиентские приложения могут обмениваться сообщениями в режиме реального времени путем создания Издателей (Publishers) и Подписчиков (Subscribers). Данная система может быть использована вместе с NodeJS и Ruby на серверной стороне. Она значительно упрощает работу с веб-сокетами (web sockets). “Connect” — это основной веб-сервер для NodeJS.

Приступим к созданию сервера для нашего чата. Это будет всего один файл: server.js. Содержимое данного файла очень простое:

var connect = require ( 'connect' ) , faye = require ( 'faye' ) ;

//serve static files var app = connect ( ) . use ( connect. static ( "public" ) ) . use ( connect. logger ( 'dev' ) ) . listen ( 3000 ) ;

//init faye var bayeux = new faye. NodeAdapter ( { mount : '/faye' } ) ; bayeux. attach ( app ) ;

Как видите, мы создали веб-сервер, располагающийся на порте 3000, который раздает статические файлы из папки под названием “public”. Затем мы подключили к серверу Faye-адаптер. На этом создание необходимого нам серверного кода завершено.

WebSocket — это HTML API, поэтому вся логика будет задаваться в клиентском коде. Давайте запустим веб-сервер и перейдем к клиентской части.

Клиентская часть

Для начала, давайте создадим папку для файлов клиента, и назовем ее “public”. Затем добавим в нее файл “index.html” следующего содержания:

< script type = "text/javascript" src = "http://cdn.webix.io/edge/webix.js" ></ script > < link href = "http://cdn.webix.io/edge/webix.css" rel = "stylesheet" type = "text/css" /> < style type = "text/css" ></ style > < script type = "text/javascript" > // <![CDATA[ var user_name = "Guest " + Math . ceil ( Math . random ( ) * 9999 ) ; function chat_template ( obj ) { return "<span " + ( obj. user == user_name ? "class='own'" : "" ) + ">" + obj. user + "</span> " + obj. value ; } function send_message ( ) { var text = $$ ( "message" ) . getValue ( ) ;

webix. ui ( { rows : [ { template : "Webix Based Chat" , type : "header" } , { view : "list" , id : "chat" , gravity : 3 , type : { height : "auto" } , template : chat_template } , { cols : [ { view : "text" , id : "message" , placeholder : "Type message here" , gravity : 3 } , { view : "button" , value : "Send" , click : send_message } ] } ] , type : "space" , margin : 2 } ) ;

webix. UIManager . addHotKey ( "Enter" , send_message , $$ ( "message" ) ) ; webix. UIManager . setFocus ( $$ ( "message" ) ) ; // ]]></script>

Давайте проанализируем созданный код. Сначала мы загрузили библиотеку Webix на страницу и создали список для сообщений чата и два контрола внизу для добавления новых записей. После создания списка мы добавили горячую клавишу в окно сообщений и установили фокус на этом поле ввода. Вы можете открыть созданную страницу в браузере, ввести несколько строк и нажать клавишу “Enter”. Новое сообщение отобразится в списке. Мы все еще не применяли какой-либо код, специфичный для веб-сокетов, т.е. данные приложения пока не передаются за пределы браузера.

Чтобы активировать веб-сокеты, нужно настроить вышеприведенный код:

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

инициализировать транспортный протокол веб-сокетов, добавив к нему следующий блок кода перед созданием UI:

в конфигурации Webix List необходимо задать urls для загрузки и хранения данных. Поскольку мы используем веб-сокеты, это будут не реальные urls, а каналы сообщений:

Вот и все. Если вы откроете страницу в браузере, то не заметите каких-либо внешних изменений. Однако, теперь вы можете открыть эту страницу в нескольких/различных браузерах. Все сообщения, которые вы будете писать в окне одного браузера, будут отображаться в окне другого, и наоборот. Возможно, это звучит не слишком впечатляюще, однако созданный нами код будет работать для любого количества браузеров и пользователей по всему миру. Для реального использования, вам нужно заменить в коде «localhost» на реальное имя хоста.

Заключение

Как видите, создать быстрый двунаправленный обмен сообщениями в браузере не так уж и сложно. Всего несколько строк кода нужны для того, чтобы синхронизировать данные компонента Webix между многочисленными пользователями. Создание веб-чата — это всего лишь пример. Описанная техника может быть использована для более полезных вещей, таких как мониторинг данных в реальном времени или совместная деятельность многочисленных пользователей.

📎📎📎📎📎📎📎📎📎📎