Введение

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

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

Так есть хорошее решение?

Поскольку запрос нельзя использовать, его можно изменить на отправку сервера. Мы знаем, что в HTTP/2 предусмотрен серверный метод push, но этот метод является односторонним, то есть на одном и том же TCP-соединении взаимодействие между клиентом и сервером не может быть реализовано.

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

webSocket vs HTTP

webSocket — это сетевой протокол двусторонней связи, основанный на базовом протоколе TCP. Эта двусторонняя связь достигается через TCP-соединение. webSocket был опубликован в качестве стандарта IETF в 2011 году как RFC 6455.

Также как стандартный протокол, основанный на протоколе TCP, в чем разница между ним и HTTP?

С точки зрения семиуровневой модели OSI оба находятся на четвертом уровне семиуровневого протокола. Но это два разных протокола. Учитывая, что HTTP стал настолько популярным, чтобы обеспечить универсальность webSocket, webSocket также совместим с протоколом HTTP. То есть там, где можно использовать протокол HTTP, можно использовать и webScoket.

Это похоже на рассмотренный ранее HTTP 3. Хотя HTTP 3 является новым протоколом, для обеспечения его широкой базы приложений HTTP 3 все еще переписывается и строится на существующем протоколе UDP. Цель - совместимость.

В режиме реального времени webSocket использует заголовок обновления HTTP для перехода с протокола HTTP на протокол webSocket.

HTTP upgrade header

Что такое заголовок обновления HTTP?

Заголовок обновления HTTP — это заголовок HTTP, представленный в HTTP 1.1. Когда клиент чувствует, что протокол HTTP нуждается в обновлении, он отправляет запрос на обновление на сервер, и сервер отвечает соответствующим образом.

Для websocket после того, как клиент установит соединение с сервером, он сначала отправит на сервер заголовки Upgrade: WebSocket и Connection: Upgrade. После того, как сервер получит запрос клиента, если он поддерживает протокол webSocket, он вернет клиенту те же заголовки Upgrade: WebSocket и Connection: Upgrade. После того, как клиент получает ответ от сервера, он знает, что сервер поддерживает протокол websocket, и тогда он может отправлять сообщения, используя протокол websocket.

Преимущества веб-сокетов

На самом деле, как мы упоминали ранее, по сравнению с традиционным HTTP-запросом, webSocket может реализовать передачу данных в реальном времени с помощью TCP-соединения. Связь в режиме реального времени между сервером и клиентом может быть реализована при снижении нагрузки на сервер.

Применение веб-сокета

WebSocket использует ws и wss в качестве маркеров URI. Где ws представляет websocket, а wss представляет WebSocket Secure.

Потому что обычно мы используем веб-браузер для связи с сервером. Браузер — это наш веб-клиент, современные браузеры в основном поддерживают протокол WebSocket, так что вы можете уверенно им пользоваться, не беспокоясь о совместимости протоколов.

Для клиента браузера вы можете использовать стандартный объект браузера WebSocket для связи с сервером.Давайте рассмотрим простой пример клиента javascript, использующего для связи webSocket:

// 使用标准的WebSocket API创建一个socket连接
const socket = new WebSocket('ws://www.flydean.com:8000/webscoket');

// 监听webSocket的open事件
socket.onopen = function () {
  setInterval(function() {
    if (socket.bufferedAmount == 0)
      socket.send(getUpdateData());
  }, 50);
};

// 监听接收消息事件
socket.onmessage = function(event) {
  handleUpdateData(event.data);
};

// 监听socket关闭事件
socket.onclose = function(event) {
  onSocketClose(event);
};

// 监听error事件
socket.onerror = function(event) {
  onSocketError(event);
};

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

Процесс рукопожатия веб-сокета

Как мы сказали выше, websocket обновляется с протокола HTTP, и клиент отправляет:

Upgrade: websocket
Connection: Upgrade

На стороне сервера обновите протокол. Возьмем конкретный пример:

GET /webscoket HTTP/1.1
Host: www.flydean.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x123455688xafe=
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://flydean.com

Соответствующий возврат на стороне сервера:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: Qhfsfew12445m=
Sec-WebSocket-Protocol: chat

В приведенном выше примере, помимо использования заголовка Upgrade, клиент также отправил серверу заголовок Sec-WebSocket-Key. Этот заголовок содержит случайный байт в кодировке base64. Сервер соответственно возвращает хеш-значение этого ключа и устанавливает его в заголовке Sec-WebSocket-Accept.

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

WebSocket API

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

Он обеспечивает функциональную инкапсуляцию веб-сокета. Его конструктор такой:

WebSocket(url[, protocols])

URL-адрес — это адрес веб-сокета, к которому нужно подключиться, так каковы необязательные протоколы? протоколы могут быть переданы одной строкой протокола или массивом строк протокола. Это относится к подпротоколу, реализованному сервером WebSocket.

Подпротокол — это протокол, разработанный на основе протокола WebSocket. Он в основном используется для обработки конкретных сценариев. Это более строгая спецификация, установленная поверх протокола WebSocket.

Например, когда клиент запрашивает сервер, он помещает соответствующий протокол в заголовок Sec-WebSocket-Protocol:

GET /socket HTTP/1.1
...
Sec-WebSocket-Protocol: soap, wamp

Сервер будет делать соответствующие возвраты в соответствии с поддерживаемыми типами, такими как:

Sec-WebSocket-Protocol: soap

WebSocket API имеет четыре состояния, а именно:

определение состояния	ценность
WebSocket.CONNECTING	0
WebSocket.OPEN	1
WebSocket.CLOSING	2
WebSocket.CLOSED	3

При вызове метода close или Send будет инициировано соответствующее событие события.События WebSocket API в основном включают в себя: закрытие, ошибка, сообщение и открытие.

Ниже приведен пример конкретного использования:

// 创建连接
const socket = new WebSocket('ws://localhost:8000');

// 开启连接
socket.addEventListener('open', function (event) {
    socket.send('没错，开启了!');
});

// 监听消息
socket.addEventListener('message', function (event) {
    console.log('监听到服务器的消息 ', event.data);
});

Суммировать

Выше приведено краткое введение и использование websocket.Если вы хотите узнать, как Websocket передает сообщения, ждите моей следующей статьи.

Эта статья была включена вWoo Woo Floyd Press.com/06-Web Soc для…

Самая популярная интерпретация, самая глубокая галантерея, самые краткие уроки и множество трюков, о которых вы не знаете, ждут вас!

Добро пожаловать, чтобы обратить внимание на мой официальный аккаунт: «Программируйте эти вещи», разбирайтесь в технологиях, лучше поймите себя!