Différence : Socket est l'API du réseau TCP/IP. C'est une couche abstraite pour faciliter l'utilisation de TCP ou UDP. C'est un ensemble d'interfaces entre la couche application et la couche de contrôle de transmission ; WebSocket est un protocole de couche application typique.
L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.
Recommandations associées : "Vidéo de programmation"
Introduction et principe de WebSocket
Le protocole WebSocket est un nouveau protocole pour HTML5. Il implémente une communication full-duplex entre le navigateur et le serveur. La poignée de main initiale doit être complétée à l’aide d’une requête HTTP.
——Encyclopédie Baidu
La messagerie immédiate sur les sites Web est très courante, comme QQ et les systèmes de chat sur les pages Web attendez. Selon les capacités techniques antérieures, les technologies de sondage et Comet sont généralement utilisées pour résoudre ce problème.
Le protocole HTTP est un protocole réseau non persistant et unidirectionnel. Une fois la connexion établie, le navigateur est uniquement autorisé à faire une requête au serveur avant que celui-ci puisse renvoyer les données correspondantes. Lorsque la messagerie instantanée est requise, le navigateur envoie une demande de requête au serveur via une interrogation à un intervalle de temps spécifique (par exemple 1 seconde), puis renvoie les dernières données au navigateur. L'inconvénient le plus évident de cette méthode est qu'elle doit envoyer des requêtes en continu et que l'en-tête de la requête HTTP est généralement très long. Afin de transmettre une petite quantité de données, il faut payer un prix énorme, ce qui est très peu rentable. et prend beaucoup de bande passante.
Inconvénients : cela entraînera un trop grand nombre de requêtes inutiles, gaspillant du trafic et des ressources du serveur. Chaque requête et réponse gaspille une certaine quantité de trafic sur les mêmes informations d'en-tête
Cependant, l'apparence de WebSocket peut compenser. pour cette lacune. Dans WebSocket, le serveur et le navigateur doivent uniquement effectuer une action de négociation via le protocole HTTP, puis établir un canal de communication TCP distinct pour la transmission des données.
WebSocket est un protocole de couche application comme HTTP, mais il s'agit d'un protocole de communication bidirectionnel construit sur TCP.
Processus de connexion - processus de prise de contact
Lorsque WebSocket établit une poignée de main, les données sont transmises via HTTP. Mais une fois établi, le protocole HTTP n’est plus requis lors de la transmission proprement dite.
Socket n'est pas réellement un protocole, mais une couche abstraite pour la commodité d'utilisation de TCP ou d'UDP. Elle se trouve au niveau de l'application. couche et Un ensemble d’interfaces entre les couches de contrôle de transport.
Socket est une couche d'abstraction logicielle intermédiaire pour la communication entre la couche application et la suite de protocoles TCP/IP. En mode conception, Socket est en fait un mode façade, qui cache la famille complexe de protocoles TCP/IP derrière l'interface Socket. Pour les utilisateurs, un ensemble d'interfaces simples constitue tout, permettant à Socket d'organiser les données pour se conformer au protocole spécifié.
Lorsque deux hôtes communiquent, ils doivent se connecter via Socket, et Socket utilise le protocole TCP/IP pour établir une connexion TCP. Les connexions TCP s'appuient davantage sur le protocole IP sous-jacent, tandis que les connexions au protocole IP s'appuient sur des couches inférieures telles que la couche liaison.
WebSocket est un protocole de couche application typique. 
Socket est un protocole de couche de contrôle de transmission et WebSocket est un protocole de couche application.
L'API WebSocket fait partie de la norme HTML5, mais cela ne signifie pas que WebSocket doit être utilisé en HTML, ou ne peut être utilisé dans les applications serveur basées sur un navigateur.
En fait, de nombreux langages, frameworks et serveurs fournissent le support WebSocket, tels que :
Mécanisme WebSocket
Ce qui suit est une brève introduction au principe et au mécanisme de fonctionnement de WebSocket.
WebSocket est un nouveau protocole en HTML5. Il réalise une communication en duplex intégral entre le navigateur et le serveur, ce qui permet de mieux économiser les ressources et la bande passante du serveur et d'obtenir une communication en temps réel. Il est construit sur TCP et transmet les données via TCP comme HTTP. Cependant, sa plus grande différence avec HTTP est :
Figure 1. Diagramme d'interaction client-serveur de réponse à une requête HTTP traditionnelle
L'interaction entre le client et le serveur en utilisant le mode WebSocket est la suivante :
Figure 2. Diagramme d'interaction client-serveur de réponse à la demande WebSocket
Comme le montre la comparaison de la figure ci-dessus, par rapport au mode HTTP traditionnel où chaque requête-réponse nécessite que le client établisse une connexion avec le serveur, WebSocket est une communication TCP à connexion longue mode similaire à Socket. Une fois la connexion WebSocket établie, les données suivantes sont toutes transmises sous forme de séquence de trames. Avant que le client ne déconnecte la connexion WebSocket ou que le serveur ne déconnecte la connexion, le client et le serveur n'ont pas besoin de relancer la demande de connexion. Dans le cas d'une concurrence massive et d'une charge d'interaction élevée entre le client et le serveur, cela permet d'économiser considérablement la consommation des ressources de bande passante du réseau et présente des avantages évidents en termes de performances. De plus, le client envoie et reçoit des messages sur la même connexion persistante, en temps réel. L'avantage sexuel est évident.
Regardons la différence entre la communication WebSocket et le HTTP traditionnel à travers les messages interactifs entre le client et le serveur :
Côté client, le nouveau WebSocket instancie un nouvel objet client WebSocket. Connectez-vous à l'URL WebSocket du serveur similaire à ws://votredomaine:port/chemin. L'objet client WebSocket sera automatiquement analysé et reconnu comme une requête WebSocket, se connectant ainsi au port du serveur et effectuant le processus de prise de contact entre les deux parties. le format des données envoyées par le client est similaire :
Listing 1. Message de connexion client WebSocket
GET /webfin/websocket/ HTTP/1.1 Host: localhost Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg== Origin: http://localhost :8080 Sec-WebSocket-Version: 13 http://localhost :8080 Sec-WebSocket-Version: 13
Comme vous pouvez le constater, le message de connexion WebSocket initié par le client est similaire au HTTP traditionnel La valeur du paramètre "Upgrade: websocket" indique qu'il s'agit d'une requête de type WebSocket, "Sec-WebSocket-Key" est un texte chiffré encodé en base64 envoyé par le client WebSocket et le serveur doit renvoyer un "Sec-" chiffré correspondant. WebSocket-Accept", sinon le client générera l'erreur "Erreur lors de la prise de contact WebSocket" et fermera la connexion.
Le format de données renvoyé par le serveur après réception du message est similaire :
Listing 2. Message de réponse du serveur WebSocket
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8=
La valeur de "Sec-WebSocket-Accept" Il est calculé par le serveur en utilisant la même clé que le client et renvoyé au client. « HTTP/1.1 101 Switching Protocols » signifie que le serveur accepte la connexion client du protocole WebSocket après ce traitement requête-réponse, le serveur client. La négociation de connexion WebSocket réussit et la communication TCP ultérieure peut être effectuée.
En termes de développement, l'API WebSocket est également très simple. Il suffit d'instancier WebSocket et de créer une connexion. Ensuite, le serveur et le client peuvent s'envoyer et se répondre dans l'implémentation et le cas de WebSocket. section d'analyse ci-dessous, vous pouvez voir l'API WebSocket détaillée et la mise en œuvre du code.
Implémentation WebSocket
Ce qui suit est une brève description de l'API du serveur WebSocket et de l'API client.
API du serveur WebSocket
Tableau 1. Prise en charge du serveur WebSocket
| 厂商 | 应用服务器 | 备注 |
|---|---|---|
| IBM | WebSphere | WebSphere 8.0 以上版本支持，7.X 之前版本结合 MQTT 支持类似的 HTTP 长连接 |
| 甲骨文 | WebLogic | WebLogic 12c 支持，11g 及 10g 版本通过 HTTP Publish 支持类似的 HTTP 长连接 |
| 微软 | IIS | IIS 7.0+支持 |
| Apache | Tomcat | Tomcat 7.0.5＋支持，7.0.2X 及 7.0.3X 通过自定义 API 支持 |
| Jetty | Jetty 7.0＋支持 |
以下我们使用 Tomcat7.0.5 版本的服务端示例代码说明 WebSocket 服务端的实现：
JSR356 的 WebSocket 规范使用 javax.websocket.*的 API，可以将一个普通 Java 对象（POJO）使用 @ServerEndpoint 注释作为 WebSocket 服务器的端点，代码示例如下：
清单 3.WebSocket 服务端 API 示例
@ServerEndpoint("/echo")
public class EchoEndpoint {
@OnOpen
public void onOpen(Session session) throws IOException {
//以下代码省略...
}
@OnMessage
public String onMessage(String message) {
//以下代码省略...
}
@Message(maxMessageSize=6)
public void receiveMessage(String s) {
//以下代码省略...
}
@OnError
public void onError(Throwable t) {
//以下代码省略...
}
@OnClose
public void onClose(Session session, CloseReason reason) {
//以下代码省略...
}
}代码解释：
上文的简洁代码即建立了一个 WebSocket 的服务端，@ServerEndpoint("/echo") 的 annotation 注释端点表示将 WebSocket 服务端运行在 ws://[Server 端 IP 或域名]:[Server 端口]/websockets/echo 的访问端点，客户端浏览器已经可以对 WebSocket 客户端 API 发起 HTTP 长连接了。
使用 ServerEndpoint 注释的类必须有一个公共的无参数构造函数，@onMessage 注解的 Java 方法用于接收传入的 WebSocket 信息，这个信息可以是文本格式，也可以是二进制格式。
OnOpen 在这个端点一个新的连接建立时被调用。参数提供了连接的另一端的更多细节。Session 表明两个 WebSocket 端点对话连接的另一端，可以理解为类似 HTTPSession 的概念。
OnClose 在连接被终止时调用。参数 closeReason 可封装更多细节，如为什么一个 WebSocket 连接关闭。
更高级的定制如 @Message 注释，MaxMessageSize 属性可以被用来定义消息字节最大限制，在示例程序中，如果超过 6 个字节的信息被接收，就报告错误和连接关闭。
注意：早期不同应用服务器支持的 WebSocket 方式不尽相同，即使同一厂商，不同版本也有细微差别，如 Tomcat 服务器 7.0.5 以上的版本都是标准 JSR356 规范实现，而 7.0.2x/7.0.3X 的版本使用自定义 API （WebSocketServlet 和 StreamInbound， 前者是一个容器，用来初始化 WebSocket 环境；后者是用来具体处理 WebSocket 请求和响应，详见案例分析部分），且 Tomcat7.0.3x 与 7.0.2x 的 createWebSocketInbound 方法的定义不同，增加了一个 HttpServletRequest 参数，使得可以从 request 参数中获取更多 WebSocket 客户端的信息，如下代码所示：
清单 4.Tomcat7.0.3X 版本 WebSocket API
public class EchoServlet extends WebSocketServlet {
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
//以下代码省略....
return new MessageInbound() {
//以下代码省略....
}
protected void onBinaryMessage(ByteBuffer buffer)
throws IOException {
//以下代码省略...
}
protected void onTextMessage(CharBuffer buffer) throws IOException {
getWsOutbound().writeTextMessage(buffer);
//以下代码省略...
}
};
}
}因此选择 WebSocket 的 Server 端重点需要选择其版本，通常情况下，更新的版本对 WebSocket 的支持是标准 JSR 规范 API，但也要考虑开发易用性及老版本程序移植性等方面的问题，如下文所述的客户案例，就是因为客户要求统一应用服务器版本所以使用的 Tomcat 7.0.3X 版本的 WebSocketServlet 实现，而不是 JSR356 的 @ServerEndpoint 注释端点。
对于 WebSocket 客户端，主流的浏览器（包括 PC 和移动终端）现已都支持标准的 HTML5 的 WebSocket API，这意味着客户端的 WebSocket JavaScirpt 脚本具备良好的一致性和跨平台特性，以下列举了常见的浏览器厂商对 WebSocket 的支持情况：
表 2.WebSocket 客户端支持
| 浏览器 | 支持情况 |
|---|---|
| Chrome | Chrome version 4+支持 |
| Firefox | Firefox version 5+支持 |
| IE | IE version 10+支持 |
| Safari | IOS 5+支持 |
| Android Brower | Android 4.5+支持 |
客户端 WebSocket API 基本上已经在各个主流浏览器厂商中实现了统一，因此使用标准 HTML5 定义的 WebSocket 客户端的 JavaScript API 即可，当然也可以使用业界满足 WebSocket 标准规范的开源框架，如 Socket.io。
以下以一段代码示例说明 WebSocket 的客户端实现：
清单 5.WebSocket 客户端 API 示例
var ws = new WebSocket(“ws://echo.websocket.org”);
ws.onopen = function(){ws.send(“Test!”); };
ws.onmessage = function(evt){console.log(evt.data);ws.close();};
ws.onclose = function(evt){console.log(“WebSocketClosed!”);};
ws.onerror = function(evt){console.log(“WebSocketError!”);};第一行代码是在申请一个 WebSocket 对象，参数是需要连接的服务器端的地址，同 HTTP 协议开头一样，WebSocket 协议的 URL 使用 ws://开头，另外安全的 WebSocket 协议使用 wss://开头。
第二行到第五行为 WebSocket 对象注册消息的处理函数，WebSocket 对象一共支持四个消息 onopen, onmessage, onclose 和 onerror，有了这 4 个事件，我们就可以很容易很轻松的驾驭 WebSocket。
当 Browser 和 WebSocketServer 连接成功后，会触发 onopen 消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息；当 Browser 接收到 WebSocketServer 发送过来的数据时，就会触发 onmessage 消息，参数 evt 中包含 Server 传输过来的数据；当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时，就会触发 onclose 消息。我们可以看出所有的操作都是采用异步回调的方式触发，这样不会阻塞 UI，可以获得更快的响应时间，更好的用户体验。
想要查阅更多相关文章，请访问PHP中文网！！
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
