<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5_WebSocket</title>
</head>
<body>
</body>
</html>
1、HTML5 WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），
由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，
即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進行通訊。
瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。
當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)。
以下 API 用于創(chuàng)建 WebSocket 對象。
var Socket = new WebSocket(url, [protocol] );
以上代碼中的第一個參數(shù) url, 指定連接的 URL。第二個參數(shù) protocol 是可選的，指定了可接受的子協(xié)議。
2、WebSocket 屬性
以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創(chuàng)建了 Socket 對象：
屬性 描述
Socket.readyState
只讀屬性 readyState 表示連接狀態(tài)，可以是以下值：
0 - 表示連接尚未建立。
1 - 表示連接已建立，可以進行通信。
2 - 表示連接正在進行關(guān)閉。
3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開。
Socket.bufferedAmount
只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。
3、WebSocket 事件
以下是 WebSocket 對象的相關(guān)事件。假定我們使用了以上代碼創(chuàng)建了 Socket 對象：
事件 事件處理程序 描述
open Socket.onopen 連接建立時觸發(fā)
message Socket.onmessage 客戶端接收服務(wù)端數(shù)據(jù)時觸發(fā)
error Socket.onerror 通信發(fā)生錯誤時觸發(fā)
close Socket.onclose 連接關(guān)閉時觸發(fā)
4、WebSocket 方法
以下是 WebSocket 對象的相關(guān)方法。假定我們使用了以上代碼創(chuàng)建了 Socket 對象：
方法 描述
Socket.send()
使用連接發(fā)送數(shù)據(jù)
Socket.close()
關(guān)閉連接
5、WebSocket 實例
WebSocket 協(xié)議本質(zhì)上是一個基于 TCP 的協(xié)議。
為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個 HTTP 請求，
這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協(xié)議升級的 HTTP 請求，
服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來了，
雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動的關(guān)閉連接。
6、客戶端的 HTML 和 JavaScript
目前大部分瀏覽器支持 WebSocket() 接口，你可以在以下瀏覽器中嘗試實例： Chrome, Mozilla, Opera 和 Safari。
runoob_websocket.html 文件內(nèi)容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的瀏覽器支持 WebSocket!");
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)");
alert("數(shù)據(jù)發(fā)送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("數(shù)據(jù)已接收...");
};
ws.onclose = function()
{
// 關(guān)閉 websocket
alert("連接已關(guān)閉...");
};
}
else
{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">運行 WebSocket</a>
</div>
</body>
</html>
7、安裝 pywebsocket
在執(zhí)行以上程序前，我們需要創(chuàng)建一個支持 WebSocket 的服務(wù)。
從 pywebsocket 下載 mod_pywebsocket ,或者使用 git 命令下載：
git clone https://github.com/google/pywebsocket.git
mod_pywebsocket 需要 python 環(huán)境支持
mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴展，安裝步驟如下：
解壓下載的文件。
進入 pywebsocket 目錄。
執(zhí)行命令：
$ python setup.py build
$ sudo python setup.py install
查看文檔說明:
$ pydoc mod_pywebsocket
開啟服務(wù)
在 pywebsocket/mod_pywebsocket 目錄下執(zhí)行以下命令：
$ sudo python standalone.py -p 9998 -w ../example/
以上命令會開啟一個端口號為 9998 的服務(wù)，使用 -w 來設(shè)置處理程序 echo_wsh.py 所在的目錄。
