Предисловие

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

В JavaScript реализация связи WebSocket может осуществляться через API WebSocket. В этой статье будут подробно представлены принципы реализации, методы использования и распространенные сценарии применения связи WebSocket.

Текстовый контент

1. Принцип реализации связи через WebSocket.

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

Прежде чем установить соединение WebSocket, клиенту необходимо отправить HTTP-запрос на сервер. Заголовок запроса содержит информацию о WebSocket, как показано ниже:

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

Среди них поля «Обновление» и «Соединение» представляют собой обновление HTTP-соединения до соединения WebSocket; Sec-WebSocket-Key — это случайная строка, используемая для вычисления поля Sec-WebSocket-Accept в ответе на подтверждение связи; Sec-WebSocket-Protocol является необязательным; поле, используемое для указания подпротокола Sec-WebSocket-Version, указывает номер версии WebSocket.

После того, как сервер получит этот запрос, он выполнит ряд процессов и вернет ответ на рукопожатие, как показано ниже:

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

Среди них код состояния HTTP 101 указывает, что обновление прошло успешно; поля «Обновление» и «Соединение» также указывают на обновление до соединения WebSocket; поле Sec-WebSocket-Accept генерируется путем расчета Sec-WebSocket-Key и используется для проверьте, является ли запрос клиента законным; Sec-WebSocket -Protocol указывает подпротокол.

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

2. Как использовать связь через WebSocket

В JavaScript реализация связи WebSocket с использованием API WebSocket очень проста. Сначала вам нужно создать объект WebSocket и указать адрес и протокол сервера:

const socket = new WebSocket('ws://example.com:8080', 'chat');

Среди них первый параметр — это адрес сервера, а второй параметр — подпротокол. Второй параметр можно опустить, если не указан подпротокол.

После создания объекта WebSocket вы можете общаться через его свойства и методы:

1. Атрибут ReadyState: указывает состояние соединения WebSocket. Он имеет 4 значения: CONNECTING (подключение), OPEN (подключено), CLOSING (закрытие) и CLOSED (закрыто).
2. Метод send(): отправка данных на сервер. Может отправлять строки, двоичные данные или объекты ArrayBuffer.
3. Метод close(): закрывает соединение WebSocket.
4. Событие onopen: срабатывает, когда соединение WebSocket успешно установлено.
5. Событие onmessage: срабатывает, когда данные получены с сервера, и объект события содержит полученные данные.
6. Событие onerror: срабатывает, когда в соединении WebSocket возникает ошибка, и объект события содержит информацию об ошибке.
7. Событие onclose: срабатывает, когда соединение WebSocket закрывается.

Вот простой пример связи через WebSocket:

const socket = new WebSocket('ws://example.com:8080', 'chat');

socket.onopen = () => {
  console.log('Соединение WebSocket установлено');
  socket.send('Hello, WebSocket!');
};

socket.onmessage = (event) => {
  console.log(`Полученные данные, отправленные сервером: ${event.data}`);
};

socket.onerror = (error) => {
  console.error(`Ошибка подключения WebSocket: ${error}`);
};

socket.onclose = () => {
  console.log('Соединение WebSocket закрыто');
};

3. Сценарии применения связи через WebSocket.

Связь через WebSocket может применяться во многих сценариях, таких как:

1. Чат в реальном времени. Чат в реальном времени через WebSocket позволяет пользователям общаться более удобно и быстро.
2. Отображение данных в реальном времени: сбор данных на стороне сервера в режиме реального времени через WebSocket может реализовать функцию отображения данных в реальном времени, таких как котировки акций, прогноз погоды и т. д.
3. Взаимодействие в игре. Взаимодействие в игре в реальном времени через WebSocket может сблизить игроков.
4. Дистанционное управление: удаленное управление через WebSocket позволяет пользователям управлять одним и тем же устройством на разных устройствах в разных местах, например, в умном доме, удаленном мониторинге и т. д.

Подвести итог

Связь через WebSocket — это полнодуплексный протокол связи, основанный на протоколе TCP, который может устанавливать постоянное соединение между клиентом и сервером для обеспечения связи в реальном времени. В JavaScript связь WebSocket может быть реализована через API WebSocket, что очень просто и удобно. Связь через WebSocket может применяться во многих сценариях, таких как чат в реальном времени, отображение данных в реальном времени, взаимодействие в игре, удаленное управление и т. д.