🤝🏻 Двусторонняя клиент-серверная связь, часть 2: WebSocket

Несколько постов назад я писала о том, что порой нам нужно поддерживать двустороннюю связь между клиентом и сервером и приводила пример реализации такой связи с помощью Long Polling. Сегодня поговорим о другом более распространенном методе реализации такой связи - использование WebSocket.

Итак, с помощью WebSocket можно открыть так называемый “туннель” между клиентом и сервером, который будет пересылать данные в обоих направлениях. При этом сервер должен предоставлять адрес, по которому этот туннель можно открыть, и обрабатывать входящие соединения, а клиент, в свою очередь, будет инициировать эти соединения.

Передавать в такой туннель можно не любые, а только текстовые и двоичные данные (binary data), а также специальные фреймы, которые помогают отслеживать и менять статус соединения. То есть перекидываться совсем любыми JavaScript-объектами не получится, но вряд ли это будет проблемой. В качестве примера можно рассмотреть небольшой фрагмент кода на Express, который принимает объекты сообщений, которые приведены к строке через JSON.stringify():

const express = require('express');
const expressWs = require('express-ws');

const app = express();
const wsApp = expressWs(app);

const allMessages = [];

// Открываем урл для соединений
app.ws('/chat', (ws, _) => {

    // Подписываемся на сообщения от клиентов
    ws.on('message', (message) => {

        // Сохраняем сообщение в виде исходного объекта
        allMessages.push(JSON.parse(message));

        // Рассылаем сообщение всем остальным подключенным клиентам
        wsApp.getWss().clients.forEach((client) => {
            client.send(message.toString());
        });
    });
});

Если наш сервер поднят на http://localhost:8000, то туннель будет доступен по адресу ws://localhost:8000/chat. При этом подключение на клиенте будет выглядеть следующим образом:

const ws = new WebSocket('ws://localhost:8000/chat');

// Подписываемся на сообщения от сервера
ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
};

// Отправляем новое сообщение на сервер
const sendMessage = (message) => {
   ws.send(JSON.stringify(message));
}

Вот и всё! На самом деле, базово всё очень просто. Конечно, WebSocket API предоставляет больше методов, чем onmessage и send, но про них можно почитать на MDN.

🔗 Более подробный пример реализации для чата есть в нашем репозитории. И для этого типа связи мы также подготовили Live Demo, в котором можно потрогать результат и пообщаться.

🤔 И снова вопрос: какие тут могут быть сложности? А вот какие:

1. Безопасность: По умолчанию WebSocket не обеспечивает шифрование данных, что может создать уязвимости. Чтобы обеспечить безопасность, следует использовать WSS (WebSocket Secure), который работает через TLS/SSL.

2. Совместимость с браузерами: Хотя поддержка WebSockets хороша в современных браузерах, в старых версиях или некоторых браузерах поддержка может отсутствовать или быть неполной.

3. Масштабируемость: Управление большим количеством соединений WebSocket также может быть ресурсоемким, и требует дополнительных настроек на сервере для поддержания большого числа одновременных соединений.

4. Управление состоянием: В отличие от стандартных HTTP-запросов, WebSocket поддерживает постоянное соединение, что означает дополнительную сложность в управлении состоянием соединения.

5. Обработка ошибок и повторные соединения: Необходимо предусмотреть механизмы для обработки потери соединения и автоматического повторного соединения.

⚡ Но если отойти от нюансов, то WebSockets - это достаточно мощный интрумент, которым пользуется огромное количество сервисов с real-time данными!