1. Grundkenntnisse der WebSocket-Kommunikation

WebSocket ist eine Netzwerktechnologie für die Vollduplex-Kommunikation zwischen Browsern und Servern, die HTML5 bietet. Unter Verwendung des WS- oder WSS-Protokolls handelt es sich um die asynchrone Client-Server-Kommunikationsmethode der n?chsten Generation.

In der WebSocket-API müssen der Browser und der Server nur eine Handshake-Aktion ausführen, und dann wird ein schneller Kanal zwischen dem Browser und dem Server gebildet. Daten k?nnen direkt zwischen beiden übertragen werden.

Um Instant Messaging (Echtzeit) zu realisieren, nutzen viele Websites heutzutage die Technologie des Polling(Polling). Beim Polling sendet der Browser in einem bestimmten Zeitintervall (z. B. alle 1 Sekunde) eine HTTP-Anfrage an den Server und der Server sendet dann die neuesten Daten an den Browser des Clients zurück. Dieses traditionelle HTTP-Anfragemodell bringt offensichtliche M?ngel mit sich – der Browser muss kontinuierlich Anfragen an den Server senden. Der Header der HTTP-Anfrage ist jedoch sehr lang und die darin enthaltenen Daten sind m?glicherweise nur von geringem Wert eine Menge Bandbreite.

Die neueste Technologie zur Erzielung eines Polling-Effekts ist Comet – mit AJAX. Obwohl diese Technologie eine Vollduplex-Kommunikation erreichen kann, muss dennoch eine Anfrage (reuqest) ausgegeben werden.

In der WebSocket-API müssen der Browser und der Server nur eine Handshake-Aktion ausführen, und dann wird ein schneller Kanal zwischen dem Browser und dem Server gebildet. Daten k?nnen direkt zwischen beiden übertragen werden. Dieses WebSocket-Protokoll bietet uns zwei gro?e Vorteile bei der Implementierung von Sofortdiensten:

1 Header

Die Header, die miteinander kommunizieren, sind sehr klein – ca nur 2 Bytes

2. Server Push

Der Server kann aktiv Daten an den Client übertragen, solange der vom Client ge?ffnete Socket eine Verbindung mit dem Server herstellt , k?nnen die Daten zu diesem Socket gepusht werden und von passiv auf aktiv umgestellt werden.

WebSocket ist nicht auf die Ajax- (oder
Das Clevere an der Ajax-Technologie ist, dass es keine spezielle M?glichkeit gibt, sie zu nutzen. WebSocket wird für das angegebene Ziel erstellt und zum Pushen von Nachrichten in beide Richtungen verwendet.

2. HTML5 WebSockets API

WebSocket-Objekt

WebSocket ist ein Unterobjekt des Fensterobjekts im DOM. Es hat:

• WebSocket(URL)-Konstruktor.

• readyState. Schreibgeschütztes Attribut, sein Wert kann CONNECTING (0), OPEN (1), CLOSED (3) sein.

• boolean send(in DOMString data)

• void close() zwei Methoden, die zum Senden von Nachrichten bzw. zum Schlie?en von WebSocket-Verbindungen verwendet werden

Die drei Ereignisattribute onopen, onmessage und onclosee gelten für die drei WebSocket-Ereignisse open, message und close.

1. Erkennung der Browserunterstützung

Erkennung der Browserunterstützung

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

2. Erstellung von WebSocket-Objekten und Serververbindung

Zu Um eine Verbindung zum Kommunikationsendpunkt herzustellen, erstellen Sie einfach eine neue WebSocket-Instanz und geben Sie die Peer-URL an, mit der Sie eine Verbindung herstellen m?chten. Die Pr?fixe ws:// und wss:// repr?sentieren WebSocket-Verbindungen bzw. sichere WebSocket-Verbindungen.

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

Beim Aufbau einer WebSocket-Verbindung k?nnen Sie die Protokolle auflisten, die die Webanwendung verwenden kann. Der zweite Parameter des WebSocket-Konstruktors kann entweder ein String oder eine Gruppe von Strings sein.

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

Angenommen, proto1 und proto2 sind wohldefinierte, m?glicherweise registrierte und standardisierte Protokollnamen, die sowohl vom Client als auch vom Server verstanden werden. Der Server w?hlt das bevorzugte Protokoll aus der Liste aus.

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

3. Ereignis-Listener hinzufügen

Die WebSocket-Programmierung folgt dem asynchronen Programmiermodell. Nach dem ?ffnen des Sockets müssen Sie nur auf das Eintreten des Ereignisses warten, ohne den Server aktiv abzufragen Sie müssen dem WebSocket-Objekt eine Rückruffunktion hinzufügen, um auf Ereignisse zu warten.
Das WebSocket-Objekt verfügt über drei Ereignisse: open, close und messageEs gibt drei entsprechende Ereignis-Listener onopen, onmessage und onclose, um jede Phase des Verbindungslebenszyklus zu verarbeiten um auf Fehler zu warten, wie im folgenden Beispiel gezeigt.

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. Senden Sie eine Nachricht

Wenn der Socket ge?ffnet ist (d. h. nach onopen und vor onclose), k?nnen Sie die Sendemethode verwenden, um eine Nachricht zu senden. Nachdem die Nachricht gesendet wurde, k?nnen Sie die Methode close aufrufen, um die Verbindung zu beenden, oder Sie k?nnen dies nicht tun und die Verbindung offen halten.

w.send();

M?glicherweise m?chten Sie messen, wie viele Daten im Sendepuffer gesichert sind, bevor Sie die Send()-Funktion aufrufen. Die Eigenschaft bufferAmount stellt die Anzahl der Bytes dar, die über den WebSocket gesendet, aber noch nicht in das Netzwerk geschrieben wurden. Dies ist nützlich, um die Senderate anzupassen.

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

WebSocket API unterstützt das Senden von Blob- und ArrayBuffer-Instanzen als Bin?rdaten

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

Constant-readyState-Eigenschaft

Diese Konstanten sind der Wert Das Attribut ?readyState“ kann zur Beschreibung des Status der WebSocket-Verbindung verwendet werden.

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通信基礎(chǔ)知識

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

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

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

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

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

1. Header

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

2. Server Push

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

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

2、HTML5 WebSockets API

WebSocket對象

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

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

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

• boolean send(in DOMString data)

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

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

1、瀏覽器支持情況檢測

檢測瀏覽器支持情況

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

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

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

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

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

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

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

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

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

WebSocket編程遵循異步編程模型；打開socket后，只需等待事件發(fā)生，而不需要主動向服務(wù)器輪詢，所以需要在WebSocket對象中添加回調(diào)函數(shù)來監(jiān)聽事件。
WebSocket對象有三個事件：open、close和message對應(yīng)有三個事件監(jiān)聽器onopen,onmessage,onclose來處理連接的生命周期的每個階段,當(dāng)然還可以是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ā)送消息

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

w.send();

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

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

WebSocket API支持以二進(jìn)制數(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)。

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通信的內(nèi)容，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（m.miracleart.cn）！