WebSockets

WebSocket - це протокол двонаправленого обміну даними, який характеризує повністю дуплексний характер взаємодії. На практиці це означає наступне. WebSockets встановлює одне, причому єдине, з'єднання клієнта з сервером. Після необхідних перевірок, що підтверджують, що сервер може працювати з WebSocket, сервер та клієнт можуть надсилати через нього текстові повідомлення, причому передача відбувається відразу ж, при надсиланні WebSockets створює двонаправлені канали зв'язку. З'єднання постійно тримається відкритим, що дозволяє не передавати зайвих НТГР-заголовків. При цьому у веб-сокетах немає обмежень не на кількість з'єднань, не на черговість запитів.

Модуль ws

Для того щоб почати працювати з веб-сокетами, потрібні лише дві речі - браузер, підтримуючий WebSocket, та сервер, що реалізує цю технологію. На стороні браузера все просто - WebSockets підтримується більшістю сучасних версій браузерів. Перевірити підтримку браузером цієї технології можна за цим посиланням http://websocket.org/echo.html Там же можна завантажити код та створити свій тест за допомогою сторінки websocket.html

На сервері потрібно поставити відповідний модуль:

npm install ws

Давайте розглянемо приклад

const WebSocketServer = new require('ws');

І запустимо WebSocket-cepвep:

const wss = new WebSocketServer.Server({ port: 8080 });

WebSocket-cepвep буде працювати, чекаючи запитів за протоколом ws:// на заданий порт (у нашому випадку 8080). Напишемо функцію зворотного виклику на подія з'єднання:

wss.on('connection', ws => {
  console.log('Hoвe з\'єднання');
});

Потім необхідно написати невеликого клієнта – веб-сторінку, розміщену на звичайному веб-сервері:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>WebSocket</title>
  </head>
  <script>
    window.onload = () => {
      const ws = new WebSocket('ws://localhost:8080');
    };
  </script>
  <body></body>
</html>

Тепер при відкритті сторінки в браузері буде створено з'єднання, і відповідно, у консолі сервера з'явиться напис - Hoвe з\'єднання.

Поки це взаємодії у напрямку від сервера до клієнта, зробимо обмін повідомленнями спільним. Додамо потрібний функціонал на сервер:

const WebSocketServer = new require('ws');

const wss = new WebSocketServer.Server({ port: 8080 });

let clients = [];

wss.on('connection', ws => {
  let id = clients.length;
  clients[id] = ws;
  console.log(`Hoвe з\'єднання #${id}`);
  // надсилаємо клієнту повідомлення
  clients[id].send(`Привіт, вам надано номер №${id}`);
  // відправляємо всім іншим
  clients.forEach((item, index) => {
    if (index !== id) {
      item.send(`До нас приєднався номер - ${id}`);
    }
  });
});

На клієнті треба дописати код для отримання повідомлень:

window.onload = () => {
  const ws = new WebSocket('ws://localhost:8080');
  ws.onmessage = e => {
    console.log(e.data);
  };
};

Тепер спробуємо відкрити сторінку у кількох вікнах браузера. Ми побачимо повідомлення в консолях як браузерів, так і сервера. Обмін повідомленнями пішов.

WebSockets​

Модуль ws​

WebSockets

Модуль ws