Введение в базовые знания серии WebSocket

внешний интерфейс сервер HTTP WebSocket

Обзор

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

Основное содержание этой статьи следующее:

  • Знакомство с основными понятиями WebSocket
  • Первое чтение протокола WebSocket
  • Анализ API, связанный с WebSocket
  • Использование WebSocket в онлайн-проектах

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

Введение в веб-сокеты

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

НадMDN中关于WebSocket的说明。 в双向会话Относится к клиенту и серверу для передачи данных данных через WebSocket, то есть сервер может отправлять данные клиенту, а клиент также может передавать данные через WebSocket.

Зачем использовать веб-сокет

Когда не используем WebSocket, если нам нужно установить долгое соединение, есть несколько способов:

  • голосование
  • Долгий опрос (обычно используется)
  • SSE(Server Send Event)

Ниже мы кратко представим их.

голосование

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

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

долгий опрос

Длительный опрос — это улучшение опроса. Когда клиент отправляет HTTP-запрос, а сервер получает запрос, сервер будет поддерживать запрос, не возвращая его. В течение определенного времени (обычно 30 секунд, поскольку тайм-аут оценки HTTP обычно составляет 30 секунд), если у сервера нет данных, он ответит на запрос; когда у сервера есть данные для отправки, он немедленно отправит данные через ответ на HTTP-запрос, переданный клиенту. После того, как клиент получит ответ, он немедленно инициирует следующий HTTP-запрос.

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

SSE(Server Send Event)

SSE — это новый протокол, который используется сервером для передачи данных клиенту. Он реализует передачу отдельных данных через специальный протокол SSE. Недостатком SSE является то, что данные могут передаваться только от сервера к клиенту, а данные не могут передаваться от клиента к серверу.

Websocket может решить вышеуказанные проблемы

WebSocket может эффективно решить следующие проблемы:

  1. Проблема с пропускной способностью: по сравнению с HTTP заголовок протокола WebSocket меньше и доставляется по запросу.
  2. Проблемы в реальном времени в реальном времени: Websocket может доставлять данные в режиме реального времени относительно опроса и длительных опросов, задержка меньше.
  3. Проблема с состоянием: по сравнению с HTTP-запросом без сохранения состояния, WebSocket может поддерживать определенное состояние после установления соединения.

Другие преимущества могут относиться кВикипедия.

Протокол веб-сокета

Зная, зачем вам нужно использовать WebSocket, давайте узнаем о протоколе WebSocket.

Протокол WebSocket обновлен по сравнению с протоколом HTTP. Необходимо только добавить два рукопожатия на основе протокола HTTP для установления соединения WebSocket (если оно должно быть зашифровано с помощью SSL, также требуется процесс рукопожатия SSL).Некоторые детали рукопожатия можно найти вДокументация по веб-сокетам, мы кратко представляем следующие поля, связанные с заголовком.

заголовок запроса

Заголовок запроса выглядит следующим образом:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

в:

  • Host: server.example.com: указывает адрес WebSocket для подключения.
  • Connection: Upgrade: необходимо обновить HTTP-соединение.
  • Upgrade: websocket: Обновите HTTP-подключения до WebSocket-подключений.
  • Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==: сгенерированный клиентом ключ подключения WebSocket.
  • Sec-WebSocket-Protocol: chat, superchat: указывает, какие протоколы приемлемы для клиента.
  • Sec-WebSocket-Version: 13: номер версии WebSocket.

Заголовок ответа

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

в:

  • Upgrade: websocket: Подтвердите, чтобы обновить HTTP-соединение до соединения WebSocket.
  • Connection: Upgrade: подтвердите обновление HTTP-соединения.
  • Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo: ключ сервера, сгенерированный сервером на основе ключа подключения клиента.
  • Sec-WebSocket-Protocol: chat: выбранный протокол WebSocket.

Введение в API веб-сокетов

Есть предварительное представление о протоколе WebSocket, давайте посмотрим, как использовать WebSocket в конкретных сценариях использования.

Много из API Websocket API, здесь мы будем использовать в соответствии с заказом:

  • установить соединение
  • Получил новость
  • отправлять сообщения
  • закрыть соединение

Чтобы представить по одному, конкретную информацию MDN можно найти вздесь.

установить соединение

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

const webSocket = new WebSocket('ws://server.example.com');

webSocket.addEventListener('open', (event) => {
    // 建立连接成功
});

Когда WebSocket устанавливает соединение ws, URL-адрес может быть доменным именем или IP-адресом; но когда устанавливается соединение wss (зашифрованный WebSocket), URL-адрес должен быть доменным именем, поскольку необходимо настроить соответствующий сертификат и сертификат для доменного имени.

Получил новость

WebSocket черезmessageСобытия для получения сообщений.

socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});

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

  • еслиStringтип, и соответствующие преобразования могут выполняться непосредственно с помощью функций обработки строк, таких как JSON и другие форматы.

  • если двоичныйArrayBufferтип, вам нужно использоватьDataViewДля обработки соответствующий контент будет представлен во второй части этой серии.

отправлять сообщения

WebSocket черезsendспособ отправки сообщения.

webSocket.send(data);

Примерыdataполе, это также может быть то, что было сказано в полученном сообщенииString,ArrayBufferа такжеBlobОдин из трех типов данных. в,BlobКак файлоподобный тип данных, он не будет здесь подробно описываться. Мы используем самыеStringа такжеArrayBuffer.

  • StringТип просто нужно передать строку вsend
  • ArrayBufferТип должен передавать объект ArrayBuffer в качестве параметра, и соответствующее содержимое также будет представлено во второй части этой серии.

закрыть соединение

пассивное отключение

Когда сервер активно закрывает соединение WebSocket, он отправляет закрывающий пакет клиенту через WebSocket.closeСобытие сработает.

webSocket.addEventListener('close', (closeEvent) => {
    
});

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

Активное отключение

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

webSocket.close();

В настоящее время этот метод имеет два параметра (не поддерживается в некоторых версиях, см.Документация MDN):

  • Первый параметр указывает номер состояния закрытого соединения, по умолчанию 1000, что означает нормальное отключение.
  • Второй параметр — причина закрытия, представляющая собой текст UTF-8 размером не более 123 байт.

Суммировать

Эта статья в основном знакомит с базовыми знаниями, связанными с WebSocket.

Благодаря длительному соединению WebSocket клиент и сервер могут передавать большие объемы данных, не вызывая связанных с этим проблем с производительностью, что значительно расширяет функциональные возможности Интернета. В настоящее время веб-сторона может использовать WebSocket для разработки функций, связанных с обменом мгновенными сообщениями, совместной работы в реальном времени и других функций, которые требуют взаимодействия большого объема данных со стороной сервера и не требуют использования метода Hack с длительным опросом для достичь этого.

Конкретные методы использования и вопросы использования в Интернете будут представлены в последующих блогах этой серии.

Категории