Блог

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

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

webix-based-chat

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

 

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

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

npm install faye
npm install 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, поэтому вся логика будет задаваться в клиентском коде. Давайте запустим веб-сервер и перейдем к клиентской части.

node server.js

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

Для начала, давайте создадим папку для файлов клиента, и назовем ее “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"><!--
.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:
<script type="text/javascript" src="//localhost:3000/faye/client.js"></script>
  • инициализировать транспортный протокол веб-сокетов, добавив к нему следующий блок кода перед созданием UI:
//init Faye
webix.proxy.faye.client = new Faye.Client('//localhost:3000/faye/');
//set unique client id
webix.proxy.faye.clientId = webix.uid();
  • в конфигурации Webix List необходимо задать urls для загрузки и хранения данных. Поскольку мы используем веб-сокеты, это будут не реальные urls, а каналы сообщений:
{ view:"list", url:"faye-&gt;/data", save: "faye-&gt;/data"

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

Заключение

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

Автор
The following two tabs change content below.

Maksim Kozhukh

Основные инструменты – Javascript, HTML и CSS. В детстве был благовоспитанным мальчиком, но начал программировать калькуляторы, контроллеры, компьютеры, связался с программистами и покатился…
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit
  • Guest

    faye работает через bayeux причем тут web сокеты?

    • Maksim Kozhukh

      bayex это протокол, который может использоваться как с сокетами так и с голым http
      В качестве транспорта по умолчанию Faye использует веб-сокеты
      http://faye.jcoglan.com/node/websockets.html