Введение в WebSockets

WebSockets - это альтернатива HTTP-связи в веб-приложениях. Они предлагают долгоживущий двунаправленный канал связи между клиентом и сервером. Узнайте, как использовать их для выполнения сетевых взаимодействий.

WebSockets - это альтернатива HTTP-связи в веб-приложениях.

Они предлагают долгоживущий двунаправленный канал связи между клиентом и сервером.

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

Браузерная поддержка WebSockets

WebSockets поддерживаются всеми современными браузерами.

Browser support for WebSockets

Чем WebSockets отличается от HTTP

HTTP - это совершенно другой протокол, а также другой способ общения.

HTTP - это протокол запроса / ответа: сервер возвращает некоторые данные, когда клиент запрашивает их.

С помощью WebSockets:

всервер может отправить сообщение клиентубез явного запроса клиента
клиент и сервер могутразговаривать друг с другом одновременно
очень мало накладных расходов на данныенеобходимо обмениваться для отправки сообщений. Это означаетсвязь с низкой задержкой.

WebSocketsотлично подходят дляв реальном времениидолгожителькоммуникации.

HTTPотлично подходит дляпериодический обмен даннымии взаимодействия, инициированные клиентом.

HTTP намного прощедля реализации, в то время как WebSockets требует немного больше накладных расходов.

Защищенные веб-сокеты

Всегда используйте безопасный зашифрованный протокол для WebSockets,wss://.

ws://относится к небезопасной версии WebSockets (http://WebSockets), и этого следует избегать по очевидным причинам.

Создайте новое соединение WebSockets

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connectionэтоWebSocketобъект.

Когда соединение установлено успешно,openсобытие запущено.

Прислушайтесь к нему, назначив функцию обратного вызова дляonopenсобственностьconnectionобъект:

connection.onopen = () => {
  //...
}

Если есть ошибка,onerrorобратный вызов функции запускается:

connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

Отправка данных на сервер с помощью WebSockets

После открытия соединения вы можете отправлять данные на сервер.

Вы можете сделать это удобно внутриonopenфункция обратного вызова:

connection.onopen = () => {
  connection.send('hey')
}

Получение данных с сервера с помощью WebSockets

Слушайте с функцией обратного вызова наonmessage, который вызывается, когдаmessageсобытие получено:

connection.onmessage = (e) => {
  console.log(e.data)
}

Реализуйте сервер в Node.js

WSпопулярная библиотека WebSockets дляNode.js.

Мы будем использовать его для создания сервера WebSockets. Его также можно использовать для реализации клиента и использования WebSockets для связи между двумя внутренними службами.

Установите его, используяnpm:

npm init
npm install ws

Код, который вам нужно написать, очень мало:

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })
wss.on(‘connection’, (ws) => {
ws.on(‘message’, (message) => {
console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)
})
ws.send(‘ho!’)
})

Этот код создает новый сервер на порту 8080 (порт по умолчанию для WebSockets) и добавляет функцию обратного вызова, когда соединение установлено, отправляяho!клиенту и регистрирует полученные сообщения.

Посмотреть живой пример на Glitch

Вот живой пример сервера WebSockets:https://glitch.com/edit/#!/flavio-websockets-server-example

Вот клиент WebSockets, который взаимодействует с сервером:https://glitch.com/edit/#!/flavio-websockets-client-example

Отладка веб-сокетов

В Chrome и Firefox есть удобный способ визуализировать всю информацию, отправляемую через WebSockets. Их поддержка DevTools постоянно улучшается. На момент написания статьи Firefox имел самый полезный и информативный инструмент отладки.

В обоих случаях вы заглядываете в панель «Сеть» и выбираете WS, чтобы фильтровать только соединения WebSockets.

Я сделал эти скриншоты Firefox (Developer Edition) в действии:

Firefox headers

Firefox detail

Firefox DevTools может намного больше, чем то, что я показал. В примере, который я использовал для тестирования, я просто отправляю строку, но вы можете проверить любые данные, которые отправляются более организованным образом:

Data in Firefox

Проверитьэтот пост на Mozilla Hacksчтобы узнать больше о том, как использовать этот инструмент.

Вот скриншот Chrome, который, надеюсь, скоро улучшит его инструменты отладки WebSockets:

Chrome