01:08
Урок 37: Введение в WebSockets

Курс по программированию на JavaScript

Урок 37: Введение в WebSockets

WebSockets — это технология, позволяющая устанавливать постоянное соединение между клиентом и сервером, что позволяет передавать данные в реальном времени. WebSockets часто используются в приложениях, где требуется мгновенное обновление данных, таких как чаты, онлайн-игры и системы обмена сообщениями.

Основы WebSockets

WebSockets предоставляют двусторонний канал связи между клиентом и сервером, который остается открытым, пока не будет закрыт одной из сторон. Это отличается от традиционного HTTP-запроса, где соединение закрывается после каждого запроса-ответа.

  • Клиент и сервер могут отправлять данные в любое время: В отличие от HTTP, где клиент инициирует запрос, в WebSockets и клиент, и сервер могут отправлять данные в любое время.
  • Низкая задержка: Постоянное соединение снижает задержку, так как не требуется устанавливать новое соединение для каждого сообщения.
  • Эффективность: WebSockets используют меньше ресурсов, так как соединение не закрывается после каждого сообщения.

Протокол WebSocket

WebSockets используют протокол ws:// (или wss:// для защищенных соединений) для установления соединения. После установки соединения данные могут передаваться в обоих направлениях в формате текстовых или бинарных сообщений.

Примеры использования WebSockets

Рассмотрим пример создания простого WebSocket-сервера и клиента с использованием библиотеки ws для Node.js.

Шаг 1: Установка библиотеки ws

Установите библиотеку ws, выполнив следующую команду:

npm install 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 для отображения сообщений о подключении и отключении клиента.

Категория: JavaScript | Просмотров: 12 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: