Урок 37: Введение в WebSockets
WebSockets — это технология, позволяющая устанавливать постоянное соединение между клиентом и сервером, что позволяет передавать данные в реальном времени. WebSockets часто используются в приложениях, где требуется мгновенное обновление данных, таких как чаты, онлайн-игры и системы обмена сообщениями.
Основы WebSockets
WebSockets предоставляют двусторонний канал связи между клиентом и сервером, который остается открытым, пока не будет закрыт одной из сторон. Это отличается от традиционного HTTP-запроса, где соединение закрывается после каждого запроса-ответа.
- Клиент и сервер могут отправлять данные в любое время: В отличие от HTTP, где клиент инициирует запрос, в WebSockets и клиент, и сервер могут отправлять данные в любое время.
- Низкая задержка: Постоянное соединение снижает задержку, так как не требуется устанавливать новое соединение для каждого сообщения.
- Эффективность: WebSockets используют меньше ресурсов, так как соединение не закрывается после каждого сообщения.
Протокол WebSocket
WebSockets используют протокол ws:// (или wss:// для защищенных соединений) для установления соединения. После установки соединения данные могут передаваться в обоих направлениях в формате текстовых или бинарных сообщений.
Примеры использования WebSockets
Рассмотрим пример создания простого WebSocket-сервера и клиента с использованием библиотеки ws для Node.js.
Шаг 1: Установка библиотеки ws
Установите библиотеку ws, выполнив следующую команду:
+ ws@8.2.3
added 15 packages from 7 contributors and audited 20 packages in 1.345s
Шаг 2: Создание WebSocket-сервера
Создайте файл server.js и добавьте следующий код для создания WebSocket-сервера:
// Импорт библиотеки ws
const WebSocket = require('ws');
// Создание WebSocket-сервера
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-сервер запущен на порту 8080');
// WebSocket-сервер запущен на порту 8080
В этом примере мы создаем WebSocket-сервер, который прослушивает порт 8080. Когда клиент подключается, сервер обрабатывает сообщения от клиента и отправляет обратно эхо-сообщения.
Шаг 3: Создание WebSocket-клиента
Создайте файл client.html и добавьте следующий код для создания WebSocket-клиента:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client</h1>
<input id="message" type="text" placeholder="Enter message">
<button id="send">Send</button>
<ul id="messages"></ul>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('Connected to server');
};
ws.onmessage = event => {
const messages = document.getElementById('messages');
const message = document.createElement('li');
message.textContent = event.data;
messages.appendChild(message);
};
document.getElementById('send').onclick = () => {
const messageInput = document.getElementById('message');
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
};
</script>
</body>
</html>
// WebSocket-клиент подключен к серверу
// Эхо-сообщение отображается в списке
В этом примере мы создаем WebSocket-клиент, который подключается к серверу, отправляет сообщения и отображает полученные эхо-сообщения в списке.
Упражнения
Упражнение 1: Обработка нескольких клиентов
Модифицируйте WebSocket-сервер, чтобы он мог обрабатывать несколько клиентов одновременно. Когда один клиент отправляет сообщение, сервер должен передавать это сообщение всем подключенным клиентам.
Решение:
// Обработка сообщений от клиента
wss.on('connection', ws => {
console.log('Новое соединение');
ws.on('message', message => {
console.log('Получено сообщение:', message);
// Передача сообщения всем подключенным клиентам
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Соединение закрыто');
});
});
// Сообщение передано всем подключенным клиентам
Объяснение: Мы модифицировали сервер, чтобы передавать полученные сообщения всем подключенным клиентам с помощью wss.clients.forEach.
Упражнение 2: Обработка событий соединения и отключения клиентов
Добавьте обработку событий подключения и отключения клиентов на клиентской стороне. Когда клиент подключается или отключается, в списке сообщений должно отображаться соответствующее сообщение.
Решение:
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('Connected to server');
addMessage('Connected to server');
};
ws.onclose = () => {
console.log('Disconnected from server');
addMessage('Disconnected from server');
};
ws.onmessage = event => {
addMessage(event.data);
};
document.getElementById('send').onclick = () => {
const messageInput = document.getElementById('message');
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
};
function addMessage(message) {
const messages = document.getElementById('messages');
const li = document.createElement('li');
li.textContent = message;
messages.appendChild(li);
}
</script>
// Connected to server
// Disconnected from server
// Сообщения отображаются в списке
Объяснение: Мы добавили обработку событий onopen и onclose для отображения сообщений о подключении и отключении клиента.