Communication WebSocket en HTML5

1. Connaissance de base de la communication WebSocket

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.

2. API HTML5 WebSockets

Objet WebSocket

WebSocket est un sous-objet de l'objet window dans le DOM. >

• Constructeur WebSocket(url).

• readyState. Attribut en lecture seule, sa valeur peut être CONNECTING (0), OUVERT (1), FERMÉ (3).

• envoi booléen (dans les données DOMString)

• void close() deux méthodes, utilisées respectivement pour envoyer des messages et fermer les connexions WebSocket

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 navigateur

Détection du support du navigateur

function loadDemo() {  
    if (window.WebSocket) {  
        //supported  
    } else {  
        // not supported  
    }  
}

2. Création d'objets WebSocket et connexion au serveur

À. connectez-vous au point de terminaison de communication, créez simplement une nouvelle instance WebSocket et fournissez l'URL homologue à laquelle vous souhaitez vous connecter. Les préfixes ws:// et wss:// représentent respectivement les connexions WebSocket et les connexions WebSocket sécurisées.

url = "ws://localhost:8080/echo";  w = new WebSocket(url);

Lors de l'établissement d'une connexion WebSocket, vous pouvez lister les protocoles que l'application Web peut utiliser. Le deuxième paramètre du constructeur WebSocket peut être soit une chaîne, soit un groupe de chaînes.

w = new WebSocket(url, ["proto1", "proto2"]);

Supposons que proto1 et proto2 sont des noms de protocole bien définis, éventuellement enregistrés et standardisés, compris à la fois par le client et le serveur. Le serveur sélectionne le protocole préféré dans la liste.

onopen = function(e) {  
    //确定服务器选择的协议  
    log(e.target.protocol);  
}

3. Ajouter un écouteur d'événement

La programmation WebSocket suit le modèle de programmation asynchrone ; après avoir ouvert le socket, il vous suffit d'attendre que l'événement se produise sans interroger activement le serveur, donc vous devez ajouter une fonction de rappel à l'objet WebSocket pour écouter les événements.

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");  
}

4. Envoyer un message

Lorsque le socket est ouvert (c'est-à-dire après l'ouverture et avant la fermeture), vous pouvez utiliser la méthode d'envoi pour envoyer un message. Une fois le message envoyé, vous pouvez appeler la méthode close pour mettre fin à la connexion, ou vous ne pouvez pas le faire et la garder ouverte.

w.send();

Vous souhaiterez peut-être mesurer la quantité de données sauvegardées dans le tampon d'envoi avant d'appeler la fonction Send(). La propriété bufferAmount représente le nombre d'octets qui ont été envoyés sur le WebSocket mais pas encore écrits sur le réseau. C’est utile pour ajuster le taux d’envoi.

document.getElementById("sendButton").onclick = function() {  
    if (w.bufferedAmount < bufferThreshold) {  
        w.send(document.getElementById("inputMessage").value);  
    }  
}

L'API WebSocket prend en charge l'envoi d'instances Blob et ArrayBuffer sous forme de données binaires

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(&#39;message&#39;);        function connect(){

            try{                var url = &#39;ws:localhost/test&#39;;
                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]+&#39;<br>&#39;+ "接收数据" + 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(&#39;text&#39;).value;            try{
                socket.send(text);
                message.innerHTML += "<p>发送数据：" + text +"</p>";
            }catch(exception){
                message.innerHTML += "<p>发送数据出错</p>";
            }
        }        function disconnect(){
            socket.close();
        }    </script></body></html>

1.WebSocket通信基础知识

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为指定目标创建，用于双向推送消息。

2、HTML5 WebSockets API

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(&#39;message&#39;);        function connect(){

            try{                var url = &#39;ws:localhost/test&#39;;
                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]+&#39;<br>&#39;+ "接收数据" + 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(&#39;text&#39;).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）！