Одним из новейших и действительно классных API в настоящее время является WebSockets API. Данный интерфейс позволяет создавать приложения, работающие в режиме реального времени, где пользователи могут совместно работать, получать уведомления и обновления данных, всякий раз, когда данные изменяются. Данная статья призвана показать вам как можно создать простой веб-чат, используя Webix и WebSockets API.
Веб-чат — простейшее среди приложений, работающих в режиме реального времени. Вы можете взять исходный код на github.
Серверная часть
Для работы (в качестве серверной стороны) мы будем использовать платформу NodeJS , которая в настоящее время является лучшей основой для создания приложений, работающих в режиме реального времени. Предположим, что у NodeJS установлен на вашем компьютере. Давайте начнем с создания новой папки для приложения и установим Faye library, а также пакет Connect. Для установки вам нужно запустить следующие команды:
npm install connect
Faye — это система обмена сообщениями, которая предполагает, что клиентские приложения могут обмениваться сообщениями в режиме реального времени путем создания Издателей (Publishers) и Подписчиков (Subscribers). Данная система может быть использована вместе с NodeJS и Ruby на серверной стороне. Она значительно упрощает работу с веб-сокетами (web sockets). “Connect” — это основной веб-сервер для NodeJS.
Приступим к созданию сервера для нашего чата. Это будет всего один файл: server.js. Содержимое данного файла очень простое:
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” следующего содержания:
<style type="text/css"><!--
.webix_list_item span{ font-weight: bold; min-width: 100px; float: left; text-align: center; } .webix_list_item span.own{ color:#4a4; }
--></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();
if (text)
$$("chat").add({
user: user_name,
value: text
});
$$("message").setValue("");
$$("message").focus();
}
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.proxy.faye.client = new Faye.Client('//localhost:3000/faye/');
//set unique client id
webix.proxy.faye.clientId = webix.uid();
- в конфигурации Webix List необходимо задать urls для загрузки и хранения данных. Поскольку мы используем веб-сокеты, это будут не реальные urls, а каналы сообщений:
Вот и все. Если вы откроете страницу в браузере, то не заметите каких-либо внешних изменений. Однако, теперь вы можете открыть эту страницу в нескольких/различных браузерах. Все сообщения, которые вы будете писать в окне одного браузера, будут отображаться в окне другого, и наоборот. Возможно, это звучит не слишком впечатляюще, однако созданный нами код будет работать для любого количества браузеров и пользователей по всему миру. Для реального использования, вам нужно заменить в коде «localhost» на реальное имя хоста.
Заключение
Как видите, создать быстрый двунаправленный обмен сообщениями в браузере не так уж и сложно. Всего несколько строк кода нужны для того, чтобы синхронизировать данные компонента Webix между многочисленными пользователями. Создание веб-чата — это всего лишь пример. Описанная техника может быть использована для более полезных вещей, таких как мониторинг данных в реальном времени или совместная деятельность многочисленных пользователей.
