12.03.2021 14:42
WebEagle 4 2900 Источник

Сейчас мы с вами напишем простой WebSocket-сервер на node.js. При подключении к этому серверу в ответ придёт приветственное сообщение. А так же будет доступна к выполнению пара не сложных команд.

Для этого потребуется установить Node.js с менеджером пакетов npm, он идёт в комплекте

Настройка проекта

В начале, нам потребуется создать директорию будущего проекта

mkdir websocket-server-node

Переходим в директорию

cd websocket-server-node

Далее нужно инициализировать новый проект через npm

npm init

Установщик потребует ответить на несколько вопросов, их можно пропустить

После инициализации проекта, необходимо добавить в проект библиотеку WS и настройку для работы с текстом в UTF-8

npm install ws
npm install --save-optional utf-8-validate

Код websocket-сервера

Теперь приступим к написанию кода. В директории проекта создадим новый файл server.js, откроем файл. Далее я последовательно опишу весь код, а вот ссылка на полный код на GitHub.

server.js:

В начале нужно подключить библиотеку для работы с websocket

const WebSocket = require('ws');

Далее, создадим константу, экземпляр класса WebSocket, с указанием порта на котором будет запущен WebSocket-сервер.

const wsServer = new WebSocket.Server({port: 9000});

В отличии от HTTP-сервера, WebSocket-сервер принимает подключение и удерживает его. HTTP-сервер принимает запросы напрямую, а WebSocket-сервер принимает запросы от подключения, такое соединение является полнодуплексное.

Напишем обработчик подключения, в качестве обработчика укажем функцию onConnect.

wsServer.on('connection', onConnect);

В момент подключения нового клиента в onConnection передаётся объекта ws-соединения, через него сервер будет общаться с каждым конкретным клиентом.

Функция onConnect принимает только один параметр, назовём его wsClient. В нашем конкретном примере мы подключим только два обработчика событий на объект wsClient: message и close.

message - обрабатывает событие входящего сообщения от клиента.

close - событие разрыва соединения с клиентом.

В самом начале функции onConnect, выведем в консоль сообщение что новый пользователь в сети. И отправим клиенту приветственное сообщение

Далее опишу заготовку для функции onConnect:

function onConnect(wsClient) {
  console.log('Новый пользователь');
  // отправка приветственного сообщения клиенту
  wsClient.send('Привет');
wsClient.on('message', function(message) {
    /* обработчик сообщений от клиента */
  }
wsClient.on('close', function() {
    // отправка уведомления в консоль
    console.log('Пользователь отключился');
  }
}

На событие close сервер выведет в консоль уведомление.

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

Формат JSON команд от клиента:

{
  action: 'ECHO' | 'PING',
  data?: string // необязательный параметр
}

Как видно из формата, сервер будет принимать две команды:

  • echo-запрос, в ответ на который сервер отправит содержимое data

  • ping, в ответ сервер отправит pong

  • если команда не известна, сервер выведет в консоль уведомление "Неизвестная команда"

Содержимое обработчика сообщений от клиента:

try {
  // сообщение пришло текстом, нужно конвертировать в JSON-формат
  const jsonMessage = JSON.parse(message);
  switch (jsonMessage) {
    case 'ECHO':
      wsClient.send(jsonMessage.data);
      break;
    case: 'PING':
      setTimeout(function() {
        wsClient.send('PONG');
      }, 2000);
      break;
    default:
      console.log('Неизвестная команда');
      break;
  }
} catch (error) {
  console.log('Ошибка', error);
}

Как вы уже видите, на команду PING сервер не сразу ответит, а подождёт 2 секунды.

Добавим в конце файла server.js строку, которая выведет в консоль информацию, на каком порту запущен сервер.

console.log('Сервер запущен на 9000 порту');

Запуск сервера

Для запуска сервера необходимо перейти в консоль и ввести команду:

node server.js

Сервер доступен локально по адресу ws://localhost:9000. Остановить сервер можно сочетанием клавиш:

  • Для Windows и Linux (Ctrl + C)

  • Для MacOs (Cmd + C)

Если хотите проверить работу сервера с другого устройства в рамках локальной сети, то откройте ещё одно окно консоли и запустите команду

для Window:

ipconfig

для Linux и MacOS:

ifconfig

В моём случае локальный адрес 192.168.0.15, значит из локальной сети сервер будет доступен по адресу ws://192.168.0.15:9000.

Проверка работы сервера

Чтобы протестировать работу сервера, откроем любую страницу в браузере и нажмём клавишу F12. Откроется DevTools, перейдём в консоль браузера и скопируем следующий код:

const myWs = new WebSocket('ws://localhost:9000');
// обработчик проинформирует в консоль когда соединение установится
myWs.onopen = function () {
  console.log('подключился');
};
// обработчик сообщений от сервера
myWs.onmessage = function (message) {
  console.log('Message: %s', message.data);
};
// функция для отправки echo-сообщений на сервер
function wsSendEcho(value) {
  myWs.send(JSON.stringify({action: 'ECHO', data: value.toString()}));
}
// функция для отправки команды ping на сервер
function wsSendPing() {
  myWs.send(JSON.stringify({action: 'PING'}));
}

Запустите этот код. Далее в консоли браузера вызовите функцию wsSendPing:

wsSendPing()

Через 2 секунды сервер пришлёт ответ, и в консоли выведется:

Message: PONG

Вызовите функцию wsSendEcho, к примеру, с содержимым "Test!", и в консоли будет выведено:

Message: Test!

Вот и всё! Кому понравилось, ставьте Like, подписывайтесь. Всем Добра!

Ссылка на полный код GitHub