Що таке html5 websockets?

Всім привіт! У цій статті ми поговоримо про те, що таке html5 websockets і навіщо вони потрібні.

У цій статті ми розглянемо наступне:

Навіщо потрібні веб-сокети
Що таке веб-сокети
Що робить їх відмінними
Що це може означати для майбутніх веб-додатків

Сподіваюся, в кінці статті ви будете мати чітке уявлення про те, що таке веб-сокети і як їх використовувати.

Навіщо потрібні веб-сокети?

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

Перший - опитування сервера про нові дані. Якщо дані є, вони відправляться клієнту, зазвичай, через Ajax. Це схоже на постійне питання дітей до їхніх батьків "ми вже приїхали?" кожні кілька секунд під час їзди в автомобілі. На превеликий жаль батьків, вони зобов`язані говорити "ні" кожні кілька секунд, поки не прибудуть до місця призначення. Опитування сервера дуже схожий на це. Клієнт опитує сервер про нові дані кожні кілька секунд, і сервер кожні кілька секунд відповідає йому, навіть якщо даних немає.
другий - Long Polling(Довгий опитування). Це варіація першої техніки, але замість того, щоб повертати порожній відповідь клієнту, коли даних немає, і закривати з`єднання, сервер тримає з`єднання відкритим (з таймаут). В деякий момент в майбутньому, коли у сервера будуть нові дані для клієнта, він віддасть їх клієнту і закриє з`єднання. У більшості випадків це набагато краще, ніж звичайний polling, проте, якщо у вас приходить багато даних за короткий проміжок часу, то це буде працювати майже як звичайний polling.

Обидва методи мають свої переваги в порівнянні один з одним, але вони також мають загальний набір недоліків, які розробники не могли обійти.

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

Це причини, за якими поточні техніки не є хорошими для швидкої, масштабованої зв`язку в реальному часі в інтернеті. Нам потрібно краще рішення і це - веб-сокети.

Що таке веб-сокети?

Веб-сокети - новий шлях для клієнтів, щоб зв`язуватися з сервером і навпаки без зайвих http заголовків. Веб-сокети використовують свій власний протокол, який був визначений IETF. Остання версія - RFC 6455. Попередні версії протоколу довели, що він має деякі проблеми безпеки, тому він був реалізований в деяких браузерах, як Opera, але не був включений за замовчуванням. Нові версії протоколу, здається, вирішили ці проблеми, і браузери працюють над його підтримкою в даний час.

Крім свого протоколу, веб-сокети також мають свій API, який може бути використаний в веб-додатках, щоб відкрити або закрити з`єднання і посилати / отримувати повідомлення. Він називається WebSockets API і визначено в специфікації W3C.

З веб-сокетами ви можете використовувати двосторонню повну дюплексную зв`язок між сервером і клієнтом з мінімальними накладними витратами в порівнянні зі звичайним http. Веб-сокети обіцяють швидку, більш масштабовану і міцнішу високу продуктивність додатків в реальному часі. Насправді, за деякими оцінками Kaazing корпорації, це може зменшити розмір трафіку заголовків http від 500: 1 до 1000: 1 і зменшити затримки в мережі до 3: 1. Це призводить до серйозного підвищення продуктивності, особливо для додатків, що вимагають швидкого оновлення в реальному часі.

Як це працює?

До того, як клієнт і сервер почнуть обмінюватися повідомленнями, вони повинні встановити з`єднання. Це робиться установкою "рукостискання", де клієнт і сервер надсилають запит на з`єднання, і, якщо сервер хоче цього, то він пошле відповідь, що підтверджує з`єднання. Специфікація протоколу дає зрозуміти, що одне з проектних рішень цього протоколу було забезпечити, щоб обидва, заснованих на http клієнтів і заснованих на websocket, могли використовувати один порт.

Відео: The simplest possible HTML5 WebSockets client and Node.js server talking!

Специфікація протоколу містить приклад "рукостискання". Ініціалізація рукостискання від клієнта виглядає так:

GET /chat HTTP/1.1 
Host: server.example.com 
Upgrade:WebSocket 
Connection:Upgrade 
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== 
Origin: http://example.com 
Sec-WebSocket-Protocol: chat, superchat 
Sec-WebSocket-Version:13

і сервер, який повертає підтвердження на встановлення з`єднання, виглядає так:

HTTP/1.1101SwitchingProtocols 
Upgrade:WebSocket 
Connection:Upgrade 
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= 
Sec-WebSocket-Protocol: chat

Тут клієнт пошле ключ в Sec-WebSocket-Key заголовку, який шифрується base64. Для сервера, щоб сформувати відповідь, він прийме цей ключ і додасть магічну рядок 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 до нього, потім він порахує sha-1 хеш з отриманого рядка. Потім цей хеш буде закодований в base64 і відправлений клієнтові в заголовку sec-WebSocket-Accept.

Слід звернути увагу на заголовок Origin. Клієнтське рукостискання завжди матиме цей заголовок, і він буде відправлений на сервер, хочуть вони брати клієнтів з різних джерел чи ні.

WebSocket API

Front-end розробники будуть зацікавлені в WebSocket API [2], який базується на jаvascript API, який розробники будуть використовувати, щоб реалізувати обмін повідомленнями між їх клієнтської стороною додатки і сервером.

Чи підтримують браузери WebSockets?

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

if(`WebSocket`in window){ 
/ * WebSocket підтримується. Ви можете писати свій код * / 
}else{ 
/ * WebSockets не підтримується. Спробуйте використовувати старі методи зв`язку * / 
}

Відкриття і закриття з`єднання з WebSocket

Для початку слід з`єднатися з WebSocket сервером, використовуючи його конструктор.

var connection =newWebSocket(`Ws: //example.org: 12345 / myapp`) -

Ви можете також використовувати wss, якщо потрібно захищене з`єднання.

var connection =newWebSocket(`Wss: //secure.example.org: 67890 / myapp`) -

Крім того, можна вказати свої під-протоколи.

var connection =newWebSocket(`Ws: //example.org: 12345 / myapp`,[`Chat`,`Super-awesome-chat`]) -

Якщо ваше з`єднання підтверджено успішно, то спрацює onopen подія. Ви можете відловити його так:

connection.onopen =function(){ console.log(`Connection open!`) -}

Якщо в з`єднанні відмовлено, то спрацює подія onclose.

connection.onclose =function(){ 
 console.log(`Connection closed`) - 
}

Ви можете самі закрити з`єднання, якщо вам потрібно, таким чином:

connection.close() -

Ви можете відловити помилки і, наприклад, вивести їх в консоль таким чином:

connection.onerror =function(error){ 
 console.log(`Error detected:`+ error) - 
}

Відправлення та отримання повідомлень

Коли ми успішно відкрили з`єднання з сервером, нам потрібно відправляти і отримувати повідомлення. Відправлення повідомлень дуже проста. Потрібно лише використовувати .send () метод на об`єкті з`єднання.

connection.send(`Hey server, whats up?`) -

Якщо клієнт отримує повідомлення від сервера, то він викликає метод onmessage для вас.

connection.onmessage =function(e) { 
var server_message = e.data- 
 console.log(server_message) - 
}

Якщо ви хочете відправити json об`єкти на сервер замість звичайного повідомлення, вам слід серіалізіровать їх в звичайний рядок ось так:

var message ={ 
`Name`:`Bill murray`, 
`Comment`:`No one will ever believe you` 
} - 
connection.send(JSON.stringify(message)) -

Підтримка WebSockets на сервері

Більшість веб-серверів працюють на http протоколі. Так як веб-сокети використовують свій протокол, то вам буде потрібно встановити додаткові бібліотеки і доповнення, щоб підтримувати ws: // і wss: // протоколи на додаток до http і https.

Відео: HTML5 WebSocket and Java

підтримка браузерами

Більшість сучасних браузерів підтримують веб-сокети. про старі IE доведеться забути.

Якщо ви хочете зробити кросбраузерності рішення, то використовуйте socket.io і node.js.

Інший шлях - використовувати такі сервіси, як Pusher або BeaconPush та їх API.

висновок

WebSockets дуже легкі у використанні, дуже швидкі, надійні і ефективні. Забезпечують двосторонню зв`язок між клієнтом і сервером. Веб-сокети підходять додатків, які отримують і відсилають дуже багато даних за дуже короткий проміжок часу в реальному часі. Наприклад, дуже хороше застосування - онлайн ігри або отримання повідомлень, повідомлень, стрім, медіа та інше.

Стаття є перекладом.

Поділися в соціальних мережах:

Схожі