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) {  
    //確定服務器選擇的協(xié)議  
    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	連接已經(jīng)關閉，或者連接無法建立。

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()">發(fā)送數(shù)據(jù)</button>
    <button type="" id="disconnect" onclick="disconnect()">斷開連接</button>
    <p id="message"></p>
    <script type="text/javascript">
        var socket;        var readyState = ["正在連接","已經(jīng)連接","正在斷開","已經(jīng)斷開"];        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狀態(tài)：" +readyState[socket.readyState]+"</p>";
                socket.onopen = function(){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+"</p>";
                }
                socket.onmessage = function(msg){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+&#39;<br>&#39;+ "接收數(shù)據(jù)" + msg.data +"</p>";
                }
                socket.onclose = function(){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+"</p>";
                }
            }catch(exception){                // socket.onerror  = function(){
                    message.innerHTML += "<p>發(fā)生錯誤！"+"</p>";                // }
            }
        }        function send(){
            var text = document.getElementById(&#39;text&#39;).value;            try{
                socket.send(text);
                message.innerHTML += "<p>發(fā)送數(shù)據(jù)：" + text +"</p>";
            }catch(exception){
                message.innerHTML += "<p>發(fā)送數(shù)據(jù)出錯</p>";
            }
        }        function disconnect(){
            socket.close();
        }    </script></body></html>

1.WebSocket通信基礎知識

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網(wǎng)絡技術。 使用ws或wss協(xié)議，是下一代客戶端-服務器的異步通信方法。

在WebSocket API中，瀏覽器和服務器只需要要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

現(xiàn)在，很多網(wǎng)站為了實現(xiàn)即時通訊(real-time)，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔(time interval)（如每1秒），由瀏覽器對服務器發(fā)出HTTP request，然后由服務器返回最新的數(shù)據(jù)給客服端的瀏覽器。這種傳統(tǒng)的HTTP request d的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務器發(fā)出請求(request)，然而HTTP request 的header是非常長的，里面包含的數(shù)據(jù)可能只是一個很小的值，這樣會占用很多的帶寬。

而最比較新的技術去做輪詢的效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信，但依然需要發(fā)出請求(reuqest)。

在 WebSocket API，瀏覽器和服務器只需要要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。在此WebSocket 協(xié)議中，為我們實現(xiàn)即使服務帶來了兩大好處：

1. Header

互相溝通的Header是很小的-大概只有 2 Bytes

2. Server Push

服務器可以主動傳送數(shù)據(jù)給客戶端，只要客戶端打開的socket與服務器建立連接后，就可以把數(shù)據(jù)推送到這個socket上，從被動轉為主動。

WebSocket并不限于以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發(fā)起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。
Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket為指定目標創(chuàng)建，用于雙向推送消息。

2、HTML5 WebSockets API

WebSocket對象

WebSocket在DOM中是window對象的子對象，它具有：

• WebSocket(url)構造函數(shù)。

• readyState。只讀屬性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。

• boolean send(in DOMString data)

• void close()兩個方法，分別用于發(fā)送消息和關閉WebSocket連接

onopen, onmessage, 和onclosee三個事件屬性，分別對open, message和close三個WebSocket事件。

1、瀏覽器支持情況檢測

檢測瀏覽器支持情況

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

2、WebSocket對象的創(chuàng)建和服務器連接

要連接通信端點，只需要創(chuàng)建一個新的WebSocket實例，并提供希望連接的對端URL。ws://和wss://前綴分別表示W(wǎng)ebSocket連接和安全的WebSocket連接。

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

建立WebSocket連接時，可以列出Web應用能夠使用的協(xié)議。WebSocket構造函數(shù)的第二個參數(shù)既可以是字符串，也可以是字符串組。

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

假設proto1和proto2是定義明確、可能已注冊且標準化的協(xié)議名稱，它們能夠同時為客戶端和服務器端所理解。服務器會從列表中選擇首選協(xié)議。

onopen = function(e) {  
    //確定服務器選擇的協(xié)議  
    log(e.target.protocol);  
}

3、添加事件監(jiān)聽器

WebSocket編程遵循異步編程模型；打開socket后，只需等待事件發(fā)生，而不需要主動向服務器輪詢，所以需要在WebSocket對象中添加回調函數(shù)來監(jiān)聽事件。
WebSocket對象有三個事件：open、close和message對應有三個事件監(jiān)聽器onopen,onmessage,onclose來處理連接的生命周期的每個階段,當然還可以是onerror來監(jiān)聽錯誤，如以下示例所示。

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、發(fā)送消息

當socket處于打開狀態(tài)（即onopen之后，onclose之前），可以用send方法來發(fā)送消息。消息發(fā)送完，可以調用close方法來終止連接，也可以不這么做，讓其保持打開狀態(tài)。

w.send();

你可能想測算在調用Send()函數(shù)之前，有多少數(shù)據(jù)備份在發(fā)送緩沖區(qū)中。bufferAmount屬性表示已在WebSocket上發(fā)送但尚未寫入網(wǎng)絡的字節(jié)數(shù)。它對于調節(jié)發(fā)送速率很有用。

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

WebSocket API支持以二進制數(shù)據(jù)的形式發(fā)送Blob和ArrayBuffer實例

var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);  
w.send(a.buffer);

常量-readyState屬性

這些常量是readyState屬性的取值，可以用來描述WebSocket連接的狀態(tài)。

Constant	Value	Description
CONNECTING	0	連接還沒開啟。
OPEN	1	連接已開啟并準備好進行通信。
CLOSING	2	連接正在關閉的過程中。
CLOSED	3	連接已經(jīng)關閉，或者連接無法建立。

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()">發(fā)送數(shù)據(jù)</button>
    <button type="" id="disconnect" onclick="disconnect()">斷開連接</button>
    <p id="message"></p>
    <script type="text/javascript">
        var socket;        var readyState = ["正在連接","已經(jīng)連接","正在斷開","已經(jīng)斷開"];        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狀態(tài)：" +readyState[socket.readyState]+"</p>";
                socket.onopen = function(){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+"</p>";
                }
                socket.onmessage = function(msg){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+&#39;<br>&#39;+ "接收數(shù)據(jù)" + msg.data +"</p>";
                }
                socket.onclose = function(){
                    message.innerHTML += "<p>socket狀態(tài)：" +readyState[socket.readyState]+"</p>";
                }
            }catch(exception){                // socket.onerror  = function(){
                    message.innerHTML += "<p>發(fā)生錯誤！"+"</p>";                // }
            }
        }        function send(){
            var text = document.getElementById(&#39;text&#39;).value;            try{
                socket.send(text);
                message.innerHTML += "<p>發(fā)送數(shù)據(jù)：" + text +"</p>";
            }catch(exception){
                message.innerHTML += "<p>發(fā)送數(shù)據(jù)出錯</p>";
            }
        }        function disconnect(){
            socket.close();
        }    </script></body></html>

?以上就是Html5 中的 WebSocket通信的內容，更多相關內容請關注PHP中文網(wǎng)（m.miracleart.cn）！