WebSocket est une technologie réseau pour la communication en duplex intégral entre les navigateurs et les serveurs que HTML5 a commencé à fournir. Utilisant le protocole ws ou wss, il s’agit de la méthode de communication asynchrone client-serveur de nouvelle génération.
Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de prise de contact, puis un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transmises directement entre les deux.
De nos jours, afin de réaliser une messagerie instantanée (en temps réel), de nombreux sites Internet utilisent la technologie du polling(polling). L'interrogation se produit lorsque le navigateur envoie une requête HTTP au serveur à un intervalle de temps spécifique (par exemple toutes les secondes), puis le serveur renvoie les dernières données au navigateur du client. Ce modèle de requête HTTP traditionnel présente des inconvénients évidents : le navigateur doit envoyer en permanence des requêtes au serveur. Cependant, l'en-tête de la requête HTTP est très long et les données qu'elle contient peuvent n'avoir qu'une petite valeur. beaucoup de bande passante.
La dernière technologie pour obtenir un effet d'interrogation est Comet – utilisant AJAX. Cependant, bien que cette technologie puisse réaliser une communication en duplex intégral, elle doit néanmoins émettre une requête (reuqest).
Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de prise de contact, puis un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transmises directement entre les deux. Dans ce protocole WebSocket, deux avantages majeurs nous sont apportés pour mettre en œuvre des services instantanés :
1 En-tête
Les en-têtes qui communiquent entre eux sont très petits - environ. seulement 2 octets
2. Server Push
Le serveur peut transmettre activement des données au client tant que le socket ouvert par le client établit une connexion avec le serveur. , les données peuvent être poussées sur ce socket et passer de passif à actif.
WebSocket ne se limite pas à la communication Ajax (ou XHR), car la technologie Ajax nécessite que le client lance une requête, et le serveur WebSocket et le client peuvent transmettre des informations entre eux ;
Ce qui est intelligent avec la technologie Ajax, c'est qu'il n'existe aucun moyen conçu pour l'utiliser. WebSocket est créé pour la cible spécifiée et utilisé pour envoyer des messages dans les deux sens.
Objet WebSocket
WebSocket est un sous-objet de l'objet window dans le DOM. >
Les trois attributs d'événement onopen, onmessage et onclosee concernent respectivement les trois événements WebSocket open, message et close.
1. Détection du support du navigateurDétection du support du navigateur
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}url = "ws://localhost:8080/echo"; w = new WebSocket(url);
w = new WebSocket(url, ["proto1", "proto2"]);
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}L'objet WebSocket a trois événements :
open, close et messageIl existe trois écouteurs d'événements correspondants onopen, onmessage et onclose pour gérer chaque étape du cycle de vie de la connexion. Bien entendu, onerror peut également être utilisé. pour écouter les erreurs, comme le montre l’exemple suivant.
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}w.send();
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
Propriété Constant-readyState
Ces constantes sont la valeur de l'attribut readyState peut être utilisé pour décrire l'état de la connexion WebSocket.| Constant | Value | Description |
|---|---|---|
| CONNECTING | 0 | 连接还没开启。 |
| OPEN | 1 | 连接已开启并准备好进行通信。 |
| CLOSING | 2 | 连接正在关闭的过程中。 |
| CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html>WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 使用ws或wss协议，是下一代客户端-服务器的异步通信方法。
在WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端，只要客户端打开的socket与服务器建立连接后，就可以把数据推送到这个socket上，从被动转为主动。
WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
WebSocket对象
WebSocket在DOM中是window对象的子对象，它具有：
WebSocket(url)构造函数。
readyState。只读属性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。
boolean send(in DOMString data)
void close()两个方法，分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性，分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}2、WebSocket对象的创建和服务器连接
要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}3、添加事件监听器
WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件：open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误，如以下示例所示。
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}4、发送消息
当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。
| Constant | Value | Description |
|---|---|---|
| CONNECTING | 0 | 连接还没开启。 |
| OPEN | 1 | 连接已开启并准备好进行通信。 |
| CLOSING | 2 | 连接正在关闭的过程中。 |
| CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html> 以上就是Html5 中的 WebSocket通信的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Quels sont les outils de classement des mots clés SEO ?
Comment ouvrir le fichier DB
Que signifie le réseau maillé ?
Comment retirer des frais sur WeChat
Comment vérifier l'adresse Mac
Somme de cellule
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
