Découvrez rapidement websocket en dix minutes ! !

Qu'est-ce que WebSocket

Définition

Websocket est un protocole de communication réseau persistant qui peut être exécuté sur une seule connexion TCP全双工通讯, non. les concepts de Request et Response sont totalement égaux. Une fois la connexion établie, la transmission de données bidirectionnelle peut être effectuée entre le client et le serveur en temps réel

Association et différence

.

• HTTP

1. HTTP est un protocole non persistant Si le client souhaite connaître la progression du traitement du serveur, il ne peut que l'utiliser. Ajax pour interroger ou utiliser long poll, mais le premier met beaucoup de pression sur le serveur, et le second provoquera un blocage en raison de l'attente de la réponse
Bien que http1.1 ait le
2. long activé par défaut, la connexion maintient ce keep-alive de sorte que dans une connexion HTTP, plusieurs requêtes peuvent être envoyées et plusieurs réponses peuvent être reçues, mais une requête ne peut avoir qu'une seule réponse. De plus, cette réponse est également passive et ne peut être initiée activement. TCP通道
Bien que websocket soit un protocole indépendant de HTTP, websocket doit s'appuyer une fois sur le protocole HTTP
3. (de même dans la phase de poignée de main. Une fois la poignée de main réussie, les données sont transmises directement depuis le canal TCP). , et HTTP n'a rien à voir avec cela. Vous pouvez utiliser une image pour comprendre l'intersection entre les deux, mais pas tout. 握手

• socket

socket est également appelé
1. , et HTTP est différent de WebSocket. Socket n'est pas un protocole. Il s'agit d'une encapsulation d'interface du protocole de couche transport (peut être principalement compris comme TCP/IP) au niveau du programme. Il peut être compris comme une interface d'appel (API) qui peut fournir une communication de bout en bout 套接字
Pour les programmeurs, ils doivent créer une instance de socket du côté A et fournir à cette instance l'adresse IP du B. côté auquel il souhaite se connecter, adresse et numéro de port, puis créez une autre instance de socket du côté B et liez le numéro de port local à écouter. Lorsque A et B établissent une connexion, les deux parties établissent une connexion TCP de bout en bout, permettant une communication bidirectionnelle. WebSocket s'appuie sur l'idée des sockets et fournit un mécanisme de communication bidirectionnel similaire entre le client et le serveur

Scénarios d'application

WebSocket peut être utilisé pour les barrages, les abonnements aux messages , jeux multi-joueurs, édition collaborative, cotations en temps réel des fonds boursiers, vidéoconférence, éducation en ligne, salons de discussion et autres applications surveillent les changements du serveur en temps réel

Poignée de main Websocket

Message de demande de prise de contact 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

Voici les différences par rapport aux messages HTTP traditionnels :

Upgrade: websocket
Connection: Upgrade

indique que le protocole WebSocket est lancé

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

Sec-WebSocket-Key est généré de manière aléatoire par le navigateur pour vérifier si la communication Websocket est possible afin d'empêcher les connexions malveillantes ou involontaires.

Sec_WebSocket-Protocol est une chaîne définie par l'utilisateur utilisée pour identifier le protocole requis par le service

Sec-WebSocket-Version indique la prise en charge de WebSocket version.

Réponse du serveur :

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

Code de réponse 101 signifie convertir le protocole.

Connexion : Mise à niveau indique une demande de mise à niveau vers un nouveau protocole.

Mise à niveau : websocket signifie la mise à niveau vers le protocole WebSocket.

Sec-WebSocket-Accept est la Sec-WebSocket-Key qui a été confirmée par le serveur et cryptée. Utilisé pour prouver que la communication peut être effectuée entre le client et le serveur.

Sec-WebSocket-Protocol représente le protocole final utilisé.

À ce stade, le client et le serveur se serrent la main et établissent avec succès une connexion Websocket. HTTP a terminé tout son travail. L'étape suivante consiste à communiquer entièrement conformément au protocole Websocket.

À propos de Websocket

WebSocket Heartbeat

Il peut y avoir des circonstances inconnues qui entraînent la déconnexion de SOCKET, mais le client et le serveur ne le savent pas. Le client doit envoyer. un message régulièrement

Faites savoir au serveur qu'il est en ligne, et le serveur doit également répondre par un 心跳 Ping pour indiquer au client qu'il est disponible, sinon il sera considéré comme déconnecté 心跳 Pong

Statut WebSocket

Attribut readyState dans l'objet WebSocket Il existe quatre états :

0 : indique la connexion
• 1 : indique une connexion réussie et une communication possible
• 2 : Indique que la connexion est en cours de fermeture
• 3 : Indique que la connexion a été fermée ou que la connexion n'a pas pu s'ouvrir

Pratique WebSocket

Le serveur reçoit et envoie des messages

La partie serveur de WebSocket, cet article sera basé sur les builds Node.js

installe

et est responsable de la gestion du protocole WebSocket express : ws

npm install express ws

package.json après une installation réussie :

puis le crée dans le répertoire racine du fichier 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');
  });
});

Exécutez le nœud server.js pour démarrer le service. ouvert, le temps d'écoute sera imprimé, indiquant que le service a démarré avec succès

Après avoir ouvert WebSocket, le serveur affichera le message dans le message Écoutez, recevez les données de paramètres pour capturer le message envoyé par le. client, puis utilisez send pour envoyer le message

Le client reçoit et envoie le message

Créez les fichiers index.html et index.js respectivement dans le répertoire racine

• 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参数包含这次沟通的详细信息，从服务端回传的消息会在event的data属性中。

手动在控制台调用send发送消息，打印event回传信息:

服务端定时发送

上面是从客户端发送消息，服务端回传。我们也可以通过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');
  });
});

这样一来，不论在哪个客户端发送消息，服务端都能将消息回传到每个客户端 ： 可以观察下连接信息:

总结 

纸上得来终觉浅，绝知此事要躬行，希望大家可以把理论配合上面的实例进行消化，搭好服务端也可以直接使用测试工具好好玩耍一波

更多编程相关知识，请访问：编程教学！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!