Websocket API на NodeJS

В данной статье мы рассмотрим технологию Websocket для разработки приложений на nodejs. Первым делом нам необходимо понять, что же такое Websocket и для чего он нужен. Websocket — это один из протоколов связи, используемый поверх TCP-соединения, который необходим для обмена сообщениями между браузером и веб-сервером через постоянное соединение. Данные, в свою очередь, передаются в обоих направлениях в виде «пакетов», не разрывая соединение, без дополнительных HTTP-запросов. Данная технология необходима для сервисов, которые требуют постоянный обмен данными. Это могут быть как игры, так и чаты в реальном времени. Данная технология используется во многих веб-приложениях и умение разработки с использованием данного протокола - может быть очень полезным навыком для разработчика.

С ее помощью можно реализовывать большое количество функционала, моментальную передачу уведомлений для пользователя и многое другое.

Одно из главных преимуществ – данная технология достаточно проста в использовании, научившись с ней обращаться один раз - далее работа с ней не доставит никаких трудностей.

Также не обязательно строить все серверное приложение с использованием данной технологии, можно внедрять ее постепенно, только по необходимости в конкретных местах функционала.

Как внедрять и применять технологию Websocket в Nodejs?

Nodejs обладает рядом библиотек, которые дают возможность строить взаимодействие между клиентом и сервером, используя протокол Websocket поверх нативной имплементации HTTP. В качестве примеров таких библиотек можно выделить ws или еще более популярную библиотеку socket.io. Разберем внедрение Websocket в nodejs на примере библиотеки ws.

Первым делом необходимо установить данную библиотеку в проект, для этого существует несколько команд: yarn add ws или npm i ws.

Используйте необходимую команду в зависимости от вашего менеджера пакетов. Далее, после установки необходимо подключить данную библиотеку с помощью следующей команды: 

const webSocket = require('ws');

После этого создадим экземпляр класса WebSocket, укажем порт на котором будет запущен наш сервер с WebSocket:

const server = new webSocket.Server({port: 8000});

Подходы HTTP сервера и WebSocket сервера сильно отличаются в следующем: сервер HTTP принимает все запросы напрямую, а сервер с использованием технологии WebSocket принимает запросы от подключения, при этом само соединение является полнодуплексным. 

Что такое полнодуплексное состояние? Дуплекс и полудуплекс —  это режимы работы приёмо-передающих устройств. 

Если мы говорим о режиме дуплекс - устройства могут передавать и принимать информацию одновременно.

 А в режиме полудуплекс — или передавать, или принимать информацию. Далее нам необходимо написать обработчик подключения с использованием функции onConnection:

server.on(‘connection', onConnection);

Сейчас мы реализуем подключение двух обработчиков событий для объектов wsClient: message и close. message - данный параметр обрабатывает событие входящего сообщения от клиента. close - это событие для разрыва соединения с клиентом. В нашей функции onConnection напишем любое сообщение в консоли и отправим его клиенту: function onConnect(wsClient) {

    console.log(‘New message‘);

    wsClient.send(‘Hello world‘);

    wsClient.on('message', function(message) {

        /* тут описывается обработка сообщений от клиента */

    }

    wsClient.on('close', function() {

        console.log(‘Closed‘);

    }

}

Таким образом мы реализовали отправку сообщений на серверной стороне. Если произойдет событие close, то нам выведется об этом уведомление в консоль. Но нам недостаточно описать всю логику только на стороне  сервера, нам также необходимо настроить данную библиотеку и прием данных на клиенте.

Добавляем библиотеку с помощью используемого менеджера пакета на клиенте по аналогии с примером на сервере и далее переходим к процессу подключения. Подключение технологии на стороне клиента:

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

clientSocket.onopen = function () {

    console.log(‘Server was connected’);

}; Далее нам необходимо описать команду для приема данных от сервера на клиенте, чтобы мы могли обмениваться данными в реальном времени: try {

    const newMessage = JSON.parse(message);

    wsClient.send(newMessage.data);

} catch (error) {

    console.log('Ошибка', error);

}

Таким образом мы настроили WebSocket на клиенте и на сервере.

Теперь мы можем дальше дополнять наш функционал различными дополнительными функциями. Мы можем описывать дополнительные middleware перед использованием нашей логики на  WebSocket, а также можем создавать различные сообщения или же организовать отправку уведомлений и получение всего этого на стороне клиента.

В данной статье мы познакомились с технологией WebSocket API на nodejs и научились внедрять ее в проекты.