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('wss://echo.websocket.org/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
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('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on 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 Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', 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('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// Рассылка сообщения всем подключенным клиентам
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ