WebSockets — передовая технология, обеспечивающая интерактивное соединение между клиентом (браузером) и сервером для обмена сообщениями в реальном времени.
Как работают WebSockets? Сравнение с HTTP
В отличие от HTTP, WebSockets используют двунаправленный поток данных. Это ключевое отличие, делающее технологию уникальной.
HTTP работает по принципу запроса-ответа: клиент постоянно запрашивает обновления у сервера. Схема обмена выглядит так:
- Клиент запрашивает: «Есть ли сообщения?»
- Сервер отвечает: «Нет».
- Клиент повторяет запрос.
- Сервер отвечает: «Нет».
- (Этот цикл повторяется многократно)
- Боб отправляет сообщение на сервер.
- Клиент запрашивает: «Есть ли сообщения?»
- Сервер отвечает: «Да, сообщение: Привет, мир!»
WebSockets работают иначе. Достаточно одного запроса:
- Клиент говорит: «Сообщи мне, когда появится сообщение».
- Боб отправляет сообщение на сервер.
- Сервер отвечает клиенту: «Сообщение: Привет, мир!»
Применение WebSockets
WebSockets идеально подходят для приложений, требующих взаимодействия в режиме реального времени, таких как:
- Чат-приложения
- Приложения IoT (Интернет вещей)
- Многопользовательские игры
Когда WebSockets не нужны?
WebSockets — эффективное решение в большинстве случаев. Исключения:
- Несовместимость браузеров: Несмотря на широкую поддержку (более 95% браузеров), в редких случаях она может отсутствовать.
- Простые приложения: Для простых приложений (например, CMS), где не требуется функциональность реального времени, достаточно REST API с методами GET, POST, PUT и другими.
Практический пример: Код на JavaScript и Node.js
Ниже приведены упрощённые примеры кода на JavaScript (клиент) и Node.js (сервер), демонстрирующие работу WebSockets. Они не предназначены для использования в реальных проектах.
Код клиента (JavaScript):
// Код клиента (упрощенный пример)
let socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
console.log(event.data);
};
socket.send('Hello server!');Код сервера (Node.js):
// Код сервера (упрощенный пример)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});Альтернатива: Long Polling
Если WebSockets недоступны, можно использовать Long Polling. При этом клиент с заданной периодичностью (например, каждые 200 миллисекунд) проверяет наличие новых сообщений на сервере. Библиотека Axios может упростить работу с HTTP-запросами.
WebSockets — перспективная технология для создания приложений с взаимодействием в реальном времени, включая онлайн-игры.