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

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

現在，很多網站為了實現推送技術，所用的技術都是 html' target='_blank'>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 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象：

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

以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象：

以下是 WebSocket 對象的相關方法。假定我們使用了以上代碼創建了 Socket 對象：

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

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

目前大部分瀏覽器支持 WebSocket() 接口，你可以在以下瀏覽器中嘗試實例： Chrome, Mozilla, Opera 和 Safari。

runoob_websocket.html 文件內容

 !DOCTYPE HTML  html  head  meta charset="utf-8"  title  (www.survivalescaperooms.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 

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

git clone https://github.com/google/pywebsocket.git

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

現在我們可以在 Chrome 瀏覽器打開前面創建的 runoob_websocket.html 文件。如果你的瀏覽器支持 WebSocket(), 點擊"運行 WebSocket"，你就可以看到整個流程各個步驟彈出的窗口，流程 Gif 演示：

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

0o3

234***242934@qq.com

參考地址

Websocket 使用 ws 或 wss 的統一資源標志符，類似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapiwss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數防火墻的限制。默認情況下，Websocket 協議使用 80 端口；運行在 TLS 之上時，默認使用 443 端口。

一個典型的Websocket握手請求如下：

客戶端請求

GET / HTTP/1.1Upgrade: websocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==Sec-WebSocket-Version: 13

服務器回應

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=Sec-WebSocket-Location: ws://example.com/

在服務器方面，網上都有不同對websocket支持的服務器：

0o3

234***242934@qq.com

參考地址

討人厭的團子蜀

mrf***uan@hotmail.com

說到 websocket 我覺得有必要說下跟 socket 的區別。

軟件通信有七層結構，下三層結構偏向與數據通信，上三層更偏向于數據處理，中間的傳輸層則是連接上三層與下三層之間的橋梁，每一層都做不同的工作，上層協議依賴與下層協議。基于這個通信結構的概念。

Socket 其實并不是一個協議，是應用層與 TCP/IP 協議族通信的中間軟件抽象層，它是一組接口。當兩臺主機通信時，讓 Socket 去組織數據，以符合指定的協議。TCP 連接則更依靠于底層的 IP 協議，IP 協議的連接則依賴于鏈路層等更低層次。

WebSocket 則是一個典型的應用層協議。

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

討人厭的團子蜀

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。