Html5 中的 WebSocket通信-H5教程-PHP中文網

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)。

Html5 中的 WebSocket通信

在 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對象

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屬性的取值，可以用屬性🎜🎜🎜這些常數是readyState屬性的取值，可以用WebSocket連接來描述WebSocket的狀態。 🎜連接還沒開啟。 OPEN1連線已開啟並準備好進行通訊。 CLOSING2連接正在關閉的過程中。 CLOSED3連線已經關閉，或連線無法建立。

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)。

Html5 中的 WebSocket通信

在 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

連接還沒開啟。 OPEN1連線已開啟並準備好進行通訊。 CLOSING2連接正在關閉的過程中。 CLOSED3連線已經關閉，或連線無法建立。

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

相關標籤：

Html5 ，WebSocket通信

來源：php.cn

上一篇：Html5 服務端推送 Server-Sent Event 下一篇：html5跨域通信之postMessage

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章