簡介

WebSocket是基於TCP的一種新的網路協議，並在2011年被IETF定為標準的全雙工通訊協議，它實現了客戶端與伺服器全雙工通訊。

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

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

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

當獲取 WebSocket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。使用 WebSocket API 建立的WebSocket 物件的示例如下：

var Socket = new WebSocket(url, [protocol] );
複製程式碼

其中，第一個參數列示連線的URL，第二個引數表示可接受的子協議。 Websocket 使用 ws 或 wss 的統一資源標誌符，類似於 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/
複製程式碼

Websocket 使用和 HTTP 相同的 TCP 埠，可以繞過大多數防火牆的限制。預設情況下，Websocket 協議使用 80 埠；執行在 TLS 之上時，預設使用 443 埠。

下面是一個典型的Websocket握手請求例項：

客戶端請求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
複製程式碼

伺服器迴應

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
複製程式碼

下面是具體的解釋：

Connection 必須設定 Upgrade，表示客戶端希望連線升級。
Upgrade 欄位必須設定 Websocket，表示希望升級到 Websocket 協議。
Sec-WebSocket-Key 是隨機的字串，伺服器端會用這些資料來構造出一個 SHA-1 的資訊摘要。把 “Sec-WebSocket-Key” 加上一個特殊字串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然後計算 SHA-1 摘要，之後進行 BASE-64編碼，將結果做為 “Sec-WebSocket-Accept” 頭的值，返回給客戶端。如此操作，可以儘量避免普通 HTTP 請求被誤認為Websocket 協議。
Sec-WebSocket-Version 表示支援的 Websocket 版本。RFC6455 要求使用的版本是13，之前草案的版本均應當棄用。
Origin 欄位是可選的，通常用來表示在瀏覽器中發起此 Websocket 連線所在的頁面，類似於 Referer。但是，與Referer 不同的是，Origin 只包含了協議和主機名稱。
其他一些定義在 HTTP 協議中的欄位，如 Cookie 等，也可以在 Websocket 中使用。

websocket 與 socket

總的來說：Socket 是傳輸控制層協議，WebSocket 是應用層協議。

軟體通訊有七層結構，下三層結構偏向與資料通訊，上三層更偏向於資料處理，中間的傳輸層則是連線上三層與下三層之間的橋樑，每一層都做不同的工作，上層協議依賴與下層協議。基於這個通訊結構的概念。

Socket 其實並不是一個協議，是應用層與 TCP/IP 協議族通訊的中間軟體抽象層，它是一組介面。當兩臺主機通訊時，讓 Socket 去組織資料，以符合指定的協議。TCP 連線則更依靠於底層的 IP 協議，IP 協議的連線則依賴於鏈路層等更低層次。

屬性

WebSocket具有如下屬性：Socket.readyState和Socket.bufferedAmount。 readyState 其中，readyState表示連線狀態，可能的值如下：

0 - 表示連線尚未建立。
1 - 表示連線已建立，可以進行通訊。
2 - 表示連線正在進行關閉。
3 - 表示連線已經關閉或者連線不能開啟。

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

事件

以下是 WebSocket 物件的相關事件。

open：連線建立時觸發，使用方式Socket.onopen。
message：客戶端接收服務端資料時觸發，使用方式 Socket.onmessage。
error：通訊發生錯誤時觸發，使用方式Socket.onerror。
close：連線關閉時觸發，使用方式Socket.onclose。

方法

WebSocket主要的方法有send()和close()。

Socket.send()：使用連線傳送資料。
Socket.close()：關閉連線。

例項

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

編寫客戶端的 HTML 和 JavaScript

首先，編寫一段客戶端程式碼：

<!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() 方法傳送資料
                  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/google/pywebsocket.git
複製程式碼

mod_pywebsocket 需要 python 環境支援，mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴充套件，安裝步驟如下：進入 pywebsocket 目錄，執行如下命令：

$ python setup.py build
$ sudo python setup.py install
複製程式碼

然後，在pywebsocket/mod_pywebsocket 目錄下執行以下命令開啟服務。

sudo python standalone.py -p 9998 -w ../example/
複製程式碼

以上命令會開啟一個埠號為 9998 的服務，使用 -w 來設定處理程式 echo_wsh.py 所在的目錄。現在我們可以在 Chrome 瀏覽器開啟前面建立的 runoob_websocket.html 檔案。如果你的瀏覽器支援 WebSocket(), 點選"執行 WebSocket"，你就可以看到整個流程各個步驟彈出的視窗，流程 Gif 演示：