Socket-IO для початківців 🔌 - javascript.org.ua

Socket-IO: Socket.IO — це бібліотека з відкритим кодом, крос-платформенний інструмент, який забезпечує двосторонню комунікацію між клієнтом і сервером на основі подій.

Навіщо потрібен Socket-IO?

Традиційна модель клієнт-сервер

У традиційній архітектурі клієнт-сервер комунікація відбувається за принципом запит-відповідь. Клієнт надсилає запит серверу, сервер обробляє цей запит і надсилає відповідь. Після цього з'єднання закривається. Ця модель має суттєве обмеження: сервер не може ініціювати комунікацію з клієнтом. Якщо сервер хоче надіслати додаткові дані або оновлення клієнту, він не може цього зробити без того, щоб клієнт спочатку не надіслав запит.

Приклад: Розглянемо чат-додаток, побудований за традиційною моделлю. Коли користувач (клієнт) надсилає повідомлення, воно потрапляє на сервер. Повідомлення зберігається на сервері, чекаючи, коли отримувач (інший клієнт) зробить запит, щоб отримати його. Отримувач отримає повідомлення тільки коли зробить новий запит до сервера. Це створює затримку у доставці повідомлень, як показано нижче:

Одним з рішень цієї проблеми є Polling. Polling передбачає, що клієнти періодично надсилають запити до сервера через певні інтервали часу, щоб перевірити наявність нових даних. Хоча це гарантує, що клієнти врешті отримають оновлення, це призводить до значних затримок та накладних витрат на з'єднання. Постійне відкриття та закриття з'єднань для кожного запиту споживає ресурси і може спричиняти затримки, особливо при великому навантаженні.

Для подолання цих обмежень були введені WebSockets.
Web Socket : WebSocket — це комп'ютерний комунікаційний протокол, який надає одночасний двосторонній канал комунікації через одне з'єднання протоколу TCP (Transmission Control Protocol).

Як працює Web-Socket?

Під час початкового налаштування з'єднання HTTP заголовок включає поле Upgrade, яке сприяє переходу від HTTP-з'єднання до WebSocket-з'єднання.
Upgrade: Заголовок Upgrade HTTP 1.1 (тільки) може використовуватися для оновлення вже встановленого з'єднання клієнт/сервер до іншого протоколу (через той самий транспортний протокол). Наприклад, його можна використовувати, щоб оновити з'єднання з HTTP 1.1 до HTTP 2.0 або з'єднання HTTP або HTTPS до WebSocket.

Таким чином, з'єднання WebSocket встановлюється, і тепер воно працюватиме в режимі повного двостороннього зв'язку. Для того, щоб спростити реалізацію WebSocket, існує бібліотека під назвою socketio.
Socket.IO розширює WebSockets і надає більш потужне, масштабоване рішення для реального часу. Вона підтримує двосторонню подієву комунікацію, що дозволяє як клієнту, так і серверу миттєво надсилати і отримувати повідомлення.
Socket.IO також включає механізми резервного копіювання, що забезпечують надійну комунікацію, навіть якщо WebSockets не підтримуються.
Використовуючи Socket.IO, ми можемо створювати додатки в реальному часі, такі як системи чату, де повідомлення миттєво доставляються всім підключеним клієнтам без необхідності повторних запитів.

Давайте створимо простий чат-додаток за допомогою Node.js та HTML

index.js :

const express = require('express');  
const http = require('http');  
const port = 3000;  
const path = require('path');  
const {Server} = require('socket.io');

const app = express();  
const server = http.createServer(app);  
const io = new Server(server);io.on('connection', (socket) => {  
 socket.on('user-message', (msg) => {  
 io.emit('message', msg);  
 }  
 );  
});  
app.use(express.static(path.join(__dirname, 'public')));  
app.get('/', (req, res) => {  
 res.sendFile(path.join(__dirname, 'public', 'index.html'));  
});server.listen(port, () => {  
 console.log(`Сервер працює на порту ${port}`);  
});

index.html




Чат
Надіслати

Ви можете отримати повний код тут - Після запуску коду ви можете побачити деталі з'єднання, здійснивши інспекцію розділу мережі, як показано нижче, де ви побачите заголовок, що містить з'єднання для оновлення, а поле upgrade містить WebSocket.

Пояснення коду :

Налаштування сервера: Сервер слухає нові з'єднання клієнтів за допомогою io.on('connection'). Коли підключається новий клієнт, сервер налаштовує власні слухачі подій (Event Listener) на сокеті клієнта за допомогою socket.on.
Події на стороні клієнта: Клієнти надсилають події на сервер за допомогою socket.emit. Наприклад, коли користувач надсилає повідомлення в чат, клієнт випромінює подію 'user-message' на сервер.
Обробка та трансляція на сервері: Сервер отримує подію за допомогою socket.on('user-message') та обробляє дані (наприклад, повідомлення чату). Сервер потім може транслювати це повідомлення всім підключеним клієнтам за допомогою io.emit('message', msg), гарантуючи, що кожен клієнт миттєво отримає нове повідомлення в чаті.

Результат коду:

Висновок

Підсумовуючи, Socket.IO надає рішення для двосторонньої комунікації в реальному часі між клієнтами та серверами, долаючи обмеження традиційних моделей клієнт-сервер. Завдяки технології WebSocket, Socket.IO забезпечує миттєву доставку повідомлень без необхідності постійного polling'у, зменшуючи затримки та накладні витрати на з'єднання. За допомогою простого прикладу створення чат-додатка на Node.js та HTML, ми продемонстрували, як Socket.IO дозволяє безперешкодну комунікацію в реальному часі. Його простота у використанні, гнучкість та надійність роблять його незамінним інструментом для розробників, які прагнуть створювати динамічні веб-додатки з інтерактивними функціями.

Перекладено з: Socket-IO for Beginners 🔌