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

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

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

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

WebSocket — это протокол полнодуплексной связи (full-duplex) поверх TCP-соединения. В отличие от HTTP, где клиент всегда инициирует запрос, WebSocket позволяет серверу самостоятельно отправлять данные клиенту в любой момент. Это достигается за счёт установки постоянного двустороннего канала после первоначального handshake.

Основные преимущества WebSocket перед HTTP:

• Низкая задержка — данные передаются мгновенно без повторных HTTP-заголовков.
• Экономия трафика — минимальный служебный оверхед после установки соединения.
• Постоянное соединение — нет необходимости в polling или long-polling.
• Двусторонняя связь — сервер может инициировать отправку данных.

WebSocket идеально подходит для real-time приложений: чаты, уведомления, совместное редактирование документов, финансовые терминалы и онлайн-игры.

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

Для работы с WebSocket на Node.js мы будем использовать популярную библиотеку ws. Она легковесна, надёжна и хорошо документирована.

Начнём с установки:

npm init -ynpm install ws

Теперь создадим простой сервер WebSocket, который будет принимать соединения и отвечать на сообщения:

// server.jsconst 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('Клиент отключился');    });});

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

Запустите сервер командой node server.js. Сервер готов принимать подключения.

Создание клиентской части на JavaScript

Клиентская часть работает прямо в браузере. WebSocket API встроен во все современные браузеры, поэтому никаких дополнительных библиотек не требуется.

Создадим HTML-страницу с простым интерфейсом:

<!DOCTYPE html><html><head>    <title>WebSocket Чат</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Real-time Чат</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="Введите сообщение..." />    <button onclick="sendMessage()">Отправить</button>

    <script>        // Подключаемся к WebSocket серверу        const socket = new WebSocket('ws://localhost:8080');

        // Обработчик о