6.1 Основні концепції WebSocket
WebSocket — це протокол зв'язку, що надає повний дуплексний канал зв'язку через одне TCP-з'єднання. Він дозволяє виконувати двосторонню передачу даних між клієнтом та сервером, що робить його ідеальним для застосунків, які вимагають постійного обміну даними в режимі реального часу, таких як чати, онлайн-ігри та системи сповіщень.
Переваги WebSocket
- Двосторонній зв'язок: WebSocket забезпечує двосторонню передачу даних, дозволяючи серверу та клієнту надсилати повідомлення один одному в будь-який момент.
- Менша затримка: порівняно з традиційними HTTP-запитами, WebSocket зменшує затримку завдяки постійному з'єднанню.
- Менше навантаження на сервер: WebSocket зменшує кількість HTTP-запитів, що знижує навантаження на сервер.
Основні компоненти WebSocket
- Сервер WebSocket: серверна частина, яка приймає та обробляє з'єднання WebSocket.
- Клієнт WebSocket: клієнтська частина, яка встановлює з'єднання з сервером WebSocket та обмінюється даними.
6.2 Робота з WebSocket у JavaScript
Робота з WebSocket у JavaScript здійснюється за допомогою об'єкта WebSocket, який надає методи для встановлення з'єднання, надсилання й отримання повідомлень, а також обробки подій.
Створення WebSocket-з'єднання:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Події WebSocket:
open: спрацьовує, коли з'єднання встановлено.message: спрацьовує, коли отримано повідомлення від сервера.error: спрацьовує у разі виникнення помилки.close: спрацьовує при закритті з'єднання.
Приклад використання WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('З'єднання з WebSocket сервером встановлено');
socket.send('Привіт, Сервер!');
});
socket.addEventListener('message', (event) => {
console.log('Повідомлення від сервера:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('Помилка WebSocket:', event);
});
socket.addEventListener('close', (event) => {
console.log('З'єднання з WebSocket сервером закрито');
});
6.3 Приклад сервера WebSocket на Node.js
Для створення WebSocket-сервера можна використовувати бібліотеку ws у Node.js.
Установка бібліотеки:
Terminal
npm install ws
Приклад сервера WebSocket:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Новий клієнт підключився');
ws.on('message', (message) => {
console.log('Отримано:', message);
ws.send(`Сервер каже: ${message}`);
});
ws.on('close', () => {
console.log('Клієнт відключився');
});
});
console.log('WebSocket сервер працює на ws://localhost:8080');
6.4 Основні події та методи WebSocket
Клієнтські події:
onopen: спрацьовує, коли з'єднання WebSocket встановленоonmessage: спрацьовує, коли отримано повідомлення від сервераonclose: спрацьовує, коли з'єднання WebSocket закритоonerror: спрацьовує у випадку помилки WebSocket
Клієнтські методи
send(data): надсилає дані на серверclose(code, reason): закриває з'єднання WebSocket із зазначеним кодом та причиною
Серверні події
connection: спрацьовує, коли клієнт підключається до сервераmessage: спрацьовує, коли сервер отримує повідомлення від клієнтаclose: спрацьовує, коли з'єднання WebSocket закритоerror: спрацьовує у разі помилки WebSocket
Серверні методи
send(data): надсилає дані клієнтуclose(code, reason): закриває з'єднання WebSocket із зазначеним кодом та причиною
6.5 Приклади використання WebSocket
Приклад: Чат у режимі реального часу
Клієнтська сторона:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Чат</title>
</head>
<body>
<input type="text" id="message" placeholder="Введіть ваше повідомлення" />
<button onclick="sendMessage()">Надіслати</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket відкрито.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket закрито.');
};
socket.onerror = function(event) {
console.error('Помилка WebSocket:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Серверна сторона:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('Новий клієнт підключився!');
ws.on('message', (message) => {
console.log('Отримано:', message);
// Розсилка повідомлення всім підключеним клієнтам
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Клієнт відключився');
});
ws.on('error', (error) => {
console.error('Помилка WebSocket:', error);
});
});
console.log('WebSocket сервер працює на ws://localhost:8080');
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ