Webix Blog Створення веб-чату з допомогою Webix і WebSockets API
Веб-чат - найпростіше серед додатків, що працюють в режимі реального часу. Ви можете взяти вихідний код на 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 # 40; 'Connect' # 41 ;.
faye = require # 40; 'Faye' # 41; ;
// serve static files
var app = connect # 40; # 41;
. use # 40; connect. static # 40; "Public" # 41; # 41;
. use # 40; connect. logger # 40; 'Dev' # 41; # 41 ;. listen # 40; 3000 # 41; ;
// init faye
var bayeux = new faye. NodeAdapter # 40; # 123; mount. '/ Faye' # 125; # 41; ;
bayeux. attach # 40; app # 41; ;
Як бачите, ми створили веб-сервер, що розташовується на порте 3000, який роздає статичні файли з папки під назвою "public". Потім ми підключили до сервера Faye-адаптер. На цьому створення необхідного нам серверного коду завершено.
WebSocket - це HTML API, тому вся логіка буде здаватися в клієнтському коді. Давайте запустимо веб-сервер і перейдемо до клієнтської частини.
клієнтська частина
Для початку, давайте створимо папку для файлів клієнта, і назвемо її "public". Потім додамо в неї файл "index.html" такого змісту:
if # 40; text # 41;
$$ # 40; "Chat" # 41 ;. add # 40; # 123;
user. user_name.
value. text
# 125; # 41; ;
$$ # 40; "Message" # 41 ;. setValue # 40; "" # 41; ;
$$ # 40; "Message" # 41 ;. focus # 40; # 41; ;
# 125;
webix. ui # 40; # 123;
rows. # 91;
# 123; template. "Webix Based Chat". type. "Header" # 125 ;.
# 123;
view. "List". id. "Chat". gravity. 3.
type. # 123; height. "Auto" # 125 ;.
template. chat_template
# 125 ;.
# 123; cols. # 91;
# 123; view. "Text". id. "Message". placeholder. "Type message here". gravity. 3 # 125 ;.
# 123; view. "Button". value. "Send". click. send_message # 125;
# 93; # 125;
# 93 ;. type. "Space". margin. 2
# 125; # 41; ;
webix. UIManager. addHotKey # 40; "Enter". send_message. $$ # 40; "Message" # 41; # 41; ;
webix. UIManager. setFocus # 40; $$ # 40; "Message" # 41; # 41; ;
//]]>
Давайте проаналізуємо створений код. Спочатку ми завантажили бібліотеку Webix на сторінку і створили список для повідомлень чату і два контрола внизу для додавання нових записів. Після створення списку ми додали гарячу клавішу в вікно повідомлень і встановили фокус на цьому полі введення. Ви можете відкрити створену сторінку в браузері, ввести кілька рядків і натиснути клавішу "Enter". Нове повідомлення відобразиться в списку. Ми все ще не застосовували якийсь код, специфічний для веб-сокетів, тобто дані програми поки не передаються за межі браузера.
Щоб активувати веб-сокети, потрібно налаштувати вищенаведений код:
- форматувати транспортний протокол веб-сокетів, додавши до нього наступний блок коду перед створенням UI:
// init Faye
webix. proxy. faye. client = new Faye. Client # 40; '// localhost: 3000 / faye /' # 41; ;
// set unique client id
webix. proxy. faye. clientId = webix. uid # 40; # 41; ;
- в конфігурації Webix List необхідно задати urls для завантаження і зберігання даних. Оскільки ми використовуємо веб-сокети, це будуть не реальні urls, а канали повідомлень:
# 123; view. "List". url. "Faye-gt; / data". save. "Faye-gt; / data"
От і все. Якщо ви відкриєте сторінку в браузері, то не помітите будь-яких зовнішніх змін. Однак, тепер ви можете відкрити цю сторінку в декількох / різних браузерах. Всі повідомлення, які ви будете писати у вікні одного браузера, будуть відображатися у вікні іншого, і навпаки. Можливо, це звучить не дуже вражаюче, проте створений нами код буде працювати для будь-якої кількості браузерів і користувачів по всьому світу. Для реального використання, вам потрібно замінити в коді «localhost» на реальне ім'я хоста.
висновок
Як бачите, створити швидкий двонаправлений обмін повідомленнями в браузері не так вже й складно. Всього кілька рядків коду потрібні для того, щоб синхронізувати дані компонента Webix між численними користувачами. Створення веб-чату - це всього лише приклад. Описана техніка може бути використана для більш корисних речей, таких як моніторинг даних в реальному часі або спільна діяльність численних користувачів.