Heim > Artikel > Web-Frontend > WebSocket-Kommunikation in Html5

WebSocket-Kommunikation in Html5

黄舟Original: 2017-02-16 14:29:403290Durchsuche

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.

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.

WebSocket-Kommunikation in Html5

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) {  
    //确定服务器选择的协议  
    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.

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-Kommunikation in Html5

在 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）！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Server-Push-Server-gesendetes EreignisNächster Artikel：HTML5-Server-Push-Server-gesendetes Ereignis

In Verbindung stehende Artikel

Mehr sehen