HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。

WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

在 WebSocket API 中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP請求，然後由伺服器返回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省伺服器資源和頻寬，並且能夠更實時地進行通訊。

瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。

當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

以下 API 用於建立 WebSocket 物件。

var Socket = new WebSocket(url, [protocol] );

以上程式碼中的第一個引數 url, 指定連線的 URL。第二個引數 protocol 是可選的，指定了可接受的子協議。

WebSocket 屬性

以下是 WebSocket 物件的屬性。假定我們使用了以上程式碼建立了 Socket 物件：

屬性 描述
Socket.readyState

只讀屬性 readyState 表示連線狀態，可以是以下值：

  • 0 - 表示連線尚未建立。

  • 1 - 表示連線已建立，可以進行通訊。

  • 2 - 表示連線正在進行關閉。

  • 3 - 表示連線已經關閉或者連線不能開啟。
Socket.bufferedAmount

只讀屬性 bufferedAmount 已被 send() 放入正在佇列中等待傳輸，但是還沒有發出的 UTF-8 文字位元組數。

WebSocket 事件

以下是 WebSocket 物件的相關事件。假定我們使用了以上程式碼建立了 Socket 物件：

事件 事件處理程式 描述
open Socket.onopen 連線建立時觸發
message Socket.onmessage 客戶端接收服務端資料時觸發
error Socket.onerror 通訊發生錯誤時觸發
close Socket.onclose 連線關閉時觸發

WebSocket 方法

以下是 WebSocket 物件的相關方法。假定我們使用了以上程式碼建立了 Socket 物件：

方法 描述
Socket.send()

使用連線傳送資料
Socket.close()

關閉連線

WebSocket 例項

WebSocket 協議本質上是一個基於 TCP 的協議。

為了建立一個 WebSocket 連線，客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭資訊，其中附加頭資訊"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，伺服器端解析這些附加的頭資訊然後產生應答資訊返回給客戶端，客戶端和伺服器端的 WebSocket 連線就建立起來了，雙方就可以通過這個連線通道自由的傳遞資訊，並且這個連線會持續存在直到客戶端或者伺服器端的某一方主動的關閉連線。

客戶端的 HTML 和 JavaScript

目前大部分瀏覽器支援 WebSocket() 介面，你可以在以下瀏覽器中嘗試例項： Chrome, Mozilla, Opera 和 Safari。

itread01_websocket.html 檔案內容

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>入門教學(itread01.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() 方法傳送資料
                  ws.send("傳送資料");
                  alert("資料傳送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("資料已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 關閉 websocket
                  alert("連線已關閉..."); 
               };
            }
            
            else
            {
               // 瀏覽器不支援 WebSocket
               alert("您的瀏覽器不支援 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">執行 WebSocket</a>
      </div>
      
   </body>
</html>

安裝 pywebsocket

在執行以上程式前，我們需要建立一個支援 WebSocket 的服務。從 pywebsocket 下載 mod_pywebsocket ,或者使用 git 命令下載：

git clone https://github.com/googlearchive/pywebsocket
<p>
mod_pywebsocket  需要 python 環境支援</p>
mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴充套件，安裝步驟如下：</p>

<ul>
<li><p>解壓下載的檔案。</p></li>
<li><p>進入 <b>pywebsocket</b> 目錄。</p></li>
<li><p>執行命令：</p>
<pre>$ python setup.py build
$ sudo python setup.py install

  • 檢視文件說明:

    $ pydoc mod_pywebsocket

    • 開啟服務

    在 pywebsocket/mod_pywebsocket 目錄下執行以下命令：

    $ sudo python standalone.py -p 9998 -w ../example/

    以上命令會開啟一個埠號為 9998 的服務，使用 -w 來設定處理程式 echo_wsh.py 所在的目錄。

    現在我們可以在 Chrome 瀏覽器開啟前面建立的 itread01_websocket.html 檔案。如果你的瀏覽器支援 WebSocket(), 點選"執行 WebSocket"，你就可以看到整個流程各個步驟彈出的視窗，流程 Gif 演示：

    在我們停止服務後，會彈出 "連線已關閉..."。