WebSocket in JavaScript: Building Real-Time Applications with Node.js

WebSocket на JavaScript: создаем real-time приложения на Node.js

Современный веб требует мгновенной реакции. Пользователи ожидают, что сообщения в чате доставляются за миллисекунды, котировки акций обновляются без перезагрузки страницы, а уведомления приходят в реальном времени. Технология WebSocket на JavaScript решает эту задачу, обеспечивая постоянное двустороннее соединение между клиентом и сервером. В этой статье мы разберем, как использовать WebSocket в среде Node.js для создания быстрых и масштабируемых real-time приложений.

Что такое WebSocket и зачем он нужен?

Традиционный HTTP-протокол работает по принципу "запрос-ответ": клиент отправляет запрос, сервер отвечает, соединение закрывается. Для получения новых данных клиенту приходится постоянно опрашивать сервер (polling) или использовать длинные HTTP-запросы (long polling). Это неэффективно, создает избыточную нагрузку и увеличивает задержку.

WebSocket (RFC 6455) — это протокол, который устанавливает постоянное дуплексное соединение через один TCP-канал. После рукопожатия (handshake) через HTTP сервер и клиент могут отправлять данные друг другу в любой момент без дополнительных заголовков. Это делает WebSocket идеальным решением для:

• Чатов и мессенджеров
• Онлайн-игр и совместного редактирования
• Биржевых котировок и финансовых дашбордов
• Push-уведомлений и мониторинга
• Потоковой передачи данных (IoT, логи)

Установка и настройка сервера WebSocket на Node.js

Для работы с WebSocket на серверной стороне мы будем использовать библиотеку ws — самую популярную и надежную реализацию для Node.js. Установим её через npm:

npm install ws

Создадим простой WebSocket-сервер. Сначала импортируем модуль и создаём экземпляр сервера на порту 8080:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {    console.log('Новый клиент подключился');

    // Отправляем приветственное сообщение клиенту    ws.send('Добро пожаловать на WebSocket сервер!');

    // Обрабатываем входящие сообщения    ws.on('message', function incoming(message) {        console.log('Получено: %s', message);        // Отвечаем всем подключенным клиентам        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`Эхо: ${message}`);            }        });    });

    // Обрабатываем отключение клиента    ws.on('close', function close() {        console.log('Клиент отключился');    });

    // Обрабатываем ошибки    ws.on('error', function error(err) {        console.error('Ошибка WebSocket:', err);    });});

console.log('WebSocket сервер запущен на ws://localhost:8080');

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

Клиентская часть WebSocket в браузере

На стороне клиента (браузера) WebSocket является встроенным объектом — никаких дополнительных библиотек не требуется. Подключимся к нашему серверу и реализуем простой чат:

// Создаем WebSocket соединениеconst socket = new WebSocket('ws://localhost:8080');

// Обработчик открытия соединенияsocket.addEventListener('open', function (event) {    console.log('Соединение установлено');    socket.send('Привет, сервер!');});

// Обработчик получения сообщенияsocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');