Контакт с нулевым расстоянием с веб-сокетом 🚀

JavaScript
Контакт с нулевым расстоянием с веб-сокетом 🚀

Что такое веб-сокет

определение

Websocket — это постоянный сетевой протокол связи, который может выполняться через одно TCP-соединение.全双工通讯, не осталосьRequestиResponseИх концепция полностью одинакова: после установления соединения можно осуществлять двустороннюю передачу данных между клиентом и сервером в режиме реального времени.

ассоциация и различие

  • HTTP

  1. HTTP является непостоянным протоколом, клиент хочет знать, что ход обработки сервера может использоваться только непрерывно.Ajaxопросить или использоватьlong pollобразом, но первое будет сильно нагружать сервер, а второе будет заблокировано, потому что он ждал ответа

  2. Хотя http1.1 включен по умолчаниюkeep-aliveдолгое соединение сохраняет этоTCP通道Таким образом, в HTTP-соединении можно отправить несколько запросов и получить несколько ответов, но запрос может иметь только один ответ. И эта реакция также пассивна и не может быть инициирована активно.

  3. Хотя веб-сокет является протоколом, независимым от HTTP, веб-сокет должен полагаться на протокол HTTP для握手(то же самое и на этапе рукопожатия), после успешного рукопожатия данные передаются напрямую из TCP-канала, который не имеет ничего общего с HTTP.Вы можете использовать картинку, чтобы понять пересечение между ними, но не все.

  • socket
  1. розетка также называется套接字, в отличие от HTTP и WebSocket, сокет — это не протокол, это инкапсуляция интерфейса протокола транспортного уровня (который в основном можно понимать как TCP/IP) на программном уровне. Его можно понимать как вызывающий интерфейс (API), который может обеспечить сквозную связь.
  2. Для программистов им необходимо создать экземпляр сокета на стороне A и предоставить этому экземпляру IP-адрес и номер порта стороны B, к которой он хочет подключиться, а также создать другой экземпляр сокета на стороне B и привязать локальный номер порта для мониторинга. Когда A и B устанавливают соединение, обе стороны устанавливают сквозное TCP-соединение, которое обеспечивает двустороннюю связь. WebSocekt опирается на идею сокета и обеспечивает аналогичный механизм двусторонней связи между клиентом и сервером.

Сценарии применения

WebSocket можно использовать для заграждения, подписки на сообщения, многопользовательских игр, совместного редактирования, котировок акций в реальном времени, видеоконференций, онлайн-обучения, чатов и других приложений для отслеживания изменений на сервере в режиме реального времени.

Рукопожатие через веб-сокет

  • Сообщение запроса рукопожатия Websocket:
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Вот отличия от традиционных HTTP-сообщений:

Upgrade: websocket
Connection: Upgrade

Указывает, что протокол WebSocket инициирован

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

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

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

101 код ответаУказывает, что протокол должен быть преобразован.

Connection: UpgradeУказывает на запрос на обновление нового протокола.

Upgrade: websocketУказывает на обновление до протокола WebSocket.

Sec-WebSocket-AcceptЭто Sec-WebSocket-Key, подтвержденный сервером и зашифрованный. Используется для доказательства того, что клиент и сервер могут обмениваться данными.

Sec-WebSocket-ProtocolУказывает протокол конечного использования.

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

О веб-сокете

Сердцебиение WebSocket

Могут быть некоторые неизвестные ситуации, которые приводят к отключению SOCKET, но клиент и сервер не знают, и клиенту необходимо отправить обычный心跳 PingСообщите серверу, что он в сети, и сервер также должен ответить心跳 PongСообщите клиенту, что он доступен, иначе он считается отключенным

Состояние веб-сокета

Свойство readyState объекта WebSocket имеет четыре состояния:

  • 0: означает подключение
  • 1: Указывает, что соединение установлено успешно и может обмениваться данными.
  • 2: указывает, что соединение закрывается.
  • 3: Указывает, что соединение было закрыто или не удалось открыть соединение.

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

Сервер получает и отправляет сообщения

Серверная часть WebSocket, в этой статье будет собрана на Node.js

Установитьexpressи тот, кто отвечает за обработку протокола WebSocketws:

npm install express ws

Package.json после успешной установки:

Затем создайте файл server.js в корневом каталоге:

//引入express 和 ws
const express = require('express');
const SocketServer = require('ws').Server;

//指定开启的端口号
const PORT = 3000;

// 创建express，绑定监听3000端口，且设定开启后在consol中提示
const server = express().listen(PORT, () => console.log(`Listening on ${PORT}`));

// 将express交给SocketServer开启WebSocket的服务
const wss = new SocketServer({ server });

//当 WebSocket 从外部连接时执行
wss.on('connection', (ws) => {
  //连接时执行此 console 提示
  console.log('Client connected');

  // 对message设置监听，接收从客户端发送的消息
  ws.on('message', (data) => {
    //data为客户端发送的消息，将消息原封不动返回回去
    ws.send(data);
  });

  // 当WebSocket的连接关闭时执行
  ws.on('close', () => {
    console.log('Close connected');
  });
});

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

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

Клиент получает и отправляет сообщения

Создайте файлы index.html и index.js в корневом каталоге соответственно.

  • index.html
<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
  • index.js
// 使用WebSocket的地址向服务端开启连接
let ws = new WebSocket('ws://localhost:3000');

// 开启后的动作，指定在连接后执行的事件
ws.onopen = () => {
  console.log('open connection');
};

// 接收服务端发送的消息
ws.onmessage = (event) => {
  console.log(event);
};

// 指定在关闭后执行的事件
ws.onclose = () => {
  console.log('close connection');
};

вышеurlэто машинаnodeОткрыть адрес службы, указать события выполнения соединения (onopen), закрытия (onclose) и получения сообщения (onmessage), получить доступ к html и вывести информацию ws

печатныйopen connectionУказывает, что соединение установлено успешно, и клиент будет использоватьonmessageпроцесс получения

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

Ручной вызов на консолиsendОтправьте сообщение, распечатайте информацию о возврате события:

Сервер отправляет регулярно

Вышеупомянутое заключается в отправке сообщения от клиента, а сервер возвращает его. Мы также можем пройтиsetIntervalПусть сервер отправляет сообщение клиенту в фиксированное время:

server.js изменяется следующим образом:

//当WebSocket从外部连接时执行
wss.on('connection', (ws) => {
  //连接时执行此 console 提示
  console.log('Client connected');

+  //固定发送最新消息给客户端
+  const sendNowTime = setInterval(() => {
+    ws.send(String(new Date()));
+  }, 1000);

-  //对message设置监听，接收从客户端发送的消息
-  ws.on('message', (data) => {
-    //data为客户端发送的消息，将消息原封不动返回回去
-    ws.send(data);
-  });

  //当 WebSocket的连接关闭时执行
  ws.on('close', () => {
    console.log('Close connected');
  });
});

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

многопользовательский чат

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

Что, если мы хотим обмениваться сообщениями между клиентами и одновременно получать сообщения, возвращаемые сервером?

мы можем использоватьclientsНайдите всех подключенных в данный момент клиентов и отправьте их каждому клиенту через сообщение обратной передачи:

Измените server.js следующим образом:

...

//当WebSocket从外部连接时执行
wss.on('connection', (ws) => {
  //连接时执行此 console 提示
  console.log('Client connected');

-  //固定发送最新消息给客户端
-  const sendNowTime = setInterval(() => {
-    ws.send(String(new Date()));
- }, 1000);

+  //对message设置监听，接收从客户端发送的消息
+   ws.on('message', (data) => {
+    //取得所有连接中的 客户端
+    let clients = wss.clients;
+    //循环，发送消息至每个客户端
+    clients.forEach((client) => {
+      client.send(data);
+    });
+   });

  //当WebSocket的连接关闭时执行
  ws.on('close', () => {
    console.log('Close connected');
  });
});

Таким образом, независимо от того, какой клиент отправляет сообщение, сервер может отправить сообщение обратно каждому клиенту:Вы можете наблюдать информацию о подключении ниже:

Резюме 🥇

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

Справочная статья 📜

❤️Руан Ифэн - Учебник по WebSocket

❤️Using WebSockets on Heroku with Node.js

❤️Каков принцип WebSocket? Почему возможно постоянное соединение?

расширение 🏆

Если эта статья окажется для вас полезной, вы можете ознакомиться с другими моими статьями ❤️:

👍5 шаблонов дизайна, которые вы должны знать о веб-разработке 🍊

👍10 простых приемов, которые сделают ваш код vue.js более элегантным 🍊

👍Структуры данных, которые должны знать веб-разработчики 🍊

👍Классические вопросы на собеседовании! Разве вы не научились быстро вводить URL-адрес для отображения страницы? 🍊

👍Говоря о процессе рукопожатия протокола SSL🍊

Категории