Web Sockets 是用于 Web 應(yīng)用程序的新一代雙向通信技術(shù),運行在單一套接字之上,它通過 JavaScript 接口暴漏在 HTML5 兼容的瀏覽器中。
一旦取得 Web 服務(wù)器上的 Web Socket 連接之后,就可以通過調(diào)用 send() 方法從瀏覽器發(fā)送數(shù)據(jù)到服務(wù)器上,通過 onmessage 事件處理程序從服務(wù)器接收數(shù)據(jù)到瀏覽器中。
下面是創(chuàng)建一個新的 WebSocket 對象的 API。
var Socket = new WebSocket(url, [protocal] );
第一個參數(shù) url 用于指定要連接的 URL。第二個屬性 - 端口是可選的,如果提供,就會指定一個服務(wù)器必須支持連接成功的子協(xié)議。
下面是 WebSocket 對象的屬性。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象:
| 屬性 | 描述 |
|---|---|
| Socket.readyState |
只讀屬性readyState表示連接的狀態(tài)。有以下取值:
|
| Socket.bufferedAmount |
只讀屬性bufferedAmount表示已經(jīng)使用 send() 方法排隊的 URF-8 文本字節(jié)數(shù)。 |
下面是 WebSocket 對象相關(guān)的事件。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象:
| 事件 | 事件處理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 建立 socket 連接時觸發(fā)這個事件。 |
| message | Socket.onmessage | 客戶端從服務(wù)器接收數(shù)據(jù)時觸發(fā)。 |
| error | Socket.onerror | 連接發(fā)生錯誤時觸發(fā)。 |
| close | Socket.onclose | 連接被關(guān)閉時觸發(fā)。 |
下面是 WebSocket 對象相關(guān)的方法。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象:
| 方法 | 描述 |
|---|---|
| Socket.send() |
send(data) 方法使用連接傳輸數(shù)據(jù)。 |
| Socket.close() |
close() 方法用于終止任何現(xiàn)有連接。 |
一個 WebSocket 就是客戶端和服務(wù)端之間的標(biāo)準(zhǔn)雙向 TCP 套接字。套接字以 HTTP 連接開始,在 HTTP 握手之后“升級”為 TCP 套接字。握手之后,任意一端都可以發(fā)送數(shù)據(jù)。
編寫這篇教程時,只有少數(shù)幾個瀏覽器支持 WebSocket() 接口。你可以使用最新版的 Chrome,Mozilla,Opera 和 Safari 嘗試下面這個例子。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function()
{
// websocket is closed.
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>
在測試上面的客戶端程序之前,需要一個支持 WebSocket 的服務(wù)器??梢詮?pywebsocket 下載 mod_pywebsocket-x.x.x.tar.gz,它只在為 Apache HTTP 服務(wù)器提供 WebSocket 擴(kuò)展,然后按照如下步驟安裝。
這將會把他安裝到我們的 python 環(huán)境中。
進(jìn)入 __pywebsocket-x.x.x/src/mod_pywebsocket__ 文件夾并運行如下命令:
$sudo python standalone.py -p 9998 -w ../example/
這會啟動監(jiān)聽 9998 端口的服務(wù)器,然后使用通過 -w 選項指定的處理程序目錄,也就是 echo_wsh.py 所在目錄。
現(xiàn)在使用 Chrome 瀏覽器打開起初創(chuàng)建的 html 文件。如果瀏覽器支持 WebSocket(),那么會得到一個指示瀏覽器支持 WebSocket 的消息框,當(dāng)我們點擊 “Run WebSocket” 時會得到服務(wù)器腳本發(fā)出的 Goodbye 信息。