Socket.io

Ця бібліотека покликана здійснювати взаємодію реального часу тим способом, який найбільше підходить для його учасників. Socket.io забезпечує двосторонній зв'язок у реальному часі та на основі подій. Він працює на будь-який платформі, браузері або пристрої, приділяючи однакову увагу надійності та швидкості. Socket.io складається з двох частин:

Сервер, який інтегрується (або монтується) з HTTP-сервером Node.JS socket.io
Клієнтська бібліотека, що завантажується на стороні браузера socket.io-client

Під час розробки, socket.io як ми побачимо, автоматично обслуговує і клієнта, тому поки що нам потрібно встановити тільки один модуль:

npm install socket.io

Також додамо express у наш додаток і створимо файл app.js

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static('public'));

io.on('connection', socket => {
  console.log('User connected!');
  socket.emit('message', 'User connected!');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Зверніть увагу, що при ініціалізації екземпляра socket.io, ми передаємо http об'єкт (HTTP-сервер). Потім прослуховуємо подію connection для вхідних сокетів та виводимо повідомлення User connected! у консоль, а після відправляємо подію message на клієнт з тим самим повідомленням. В папці public розташуємо файл index.html, який буде нашою клієнтською частиною

<!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" />
    <script src="/socket.io/socket.io.js"></script>
    <title>SocketIO</title>
  </head>
  <body>
    <script>
      const socket = io.connect('/');
      socket.on('message', data => {
        console.log(data);
      });
    </script>
  </body>
</html>

Все, що потрібно, щоб почати працювати з вебсокетами це завантажити socket.io-client (робимо GET запит /socket.io/socket.io.js), скрипт надає глобальну змінну io, а потім можна підключитися до сервера io.connect('/') та поставити обробник на подію message

Якщо запустимо сервер, то при зверненні на адресу http://localhost:3000/ в консолі браузера ми побачимо повідомлення User connected!

Розглянемо докладніше події серверної та браузерної частин socket.io.

Ідея побудови sосkеt.iо-додатків полягає у тому, що її частини — серверна і клієнтська - мають однакові властивості та методи, однак список обробників подій у них різний

У сервера визначених подій лише три:

connection — подія настає при встановленні з'єднання з клієнтом;
message — подія настає при отриманні повідомлення від клієнта;
disconnect (дисконект) — розрив з'єднання.

Документацію каже, що є ще подія anything, і воно, мабуть, саме головне — ми можемо створювати свої події. Ви можете створювати скільки завгодно багато своїх подій. Наприклад, повідомлення про досягнення певної кількості учасників або настання нового часу доби тощо.

У браузерної частини socket.io подій більше:

connecting — подія настає в процесі встановлення з'єднання з сервером;
connect_failed — подія настає при невдалій спробі з'єднання;
connect — подія настає при встановленні з'єднання з сервером;
message — подія настає при отриманні повідомлення від сервера;
disconnect — подія настає при розриві з'єднання з сервером;
reconnecting (може виникати неодноразово) — подія настає при спробі відновлення з'єднання;
reconnect — подія настає при відновленні з'єднання;
error — події помилки;
anything — будь-яка подія.

Після вступної частини саме час реалізувати простий чат на бібліотеці Socket.io