前后端通信—webSocket（支持跨域）

WebSocket 的介紹

WebSocket 是什么

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標准。

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

為什么需要 WebSocket 

了解計算機網絡協議的人，應該都知道：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。

這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。

這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。大多數 Web 應用程序將通過頻繁的異步JavaScript和XML（AJAX）請求實現長輪詢。輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。

因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。WebSocket 連接允許客戶端和服務器之間進行全雙工通信，以便任一方都可以通過建立的連接將數據推送到另一端。WebSocket 只需要建立一次連接，就可以一直保持連接狀態。這相比於輪詢方式的不停建立連接顯然效率要大大提高。

WebSocket 如何工作

Web瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接。由於 WebSockets 連接長期存在，與典型的HTTP連接不同，對服務器有重要的影響。

基於多線程或多進程的服務器無法適用於 WebSockets，因為它旨在打開連接，盡可能快地處理請求，然后關閉連接。任何實際的 WebSockets 服務器端實現都需要一個異步服務器。

 

 

 

WebSocket 客戶端

在客戶端，沒有必要為 WebSockets 使用 JavaScript 庫。實現 WebSockets 的 Web 瀏覽器將通過 WebSockets 對象公開所有必需的客戶端功能（主要指支持 Html5 的瀏覽器）。

客戶端 API

以下 API 用於創建 WebSocket 對象。

第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

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

WebSocket 屬性

以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象：

WebSocket 事件

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

WebSocket 方法

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

// 初始化一個 WebSocket 對象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 連接成功觸發事件
ws.onopen = function () {
  // 使用 send() 方法發送數據
  ws.send("發送數據");
  alert("數據發送中...");
};

// 接收服務端數據時觸發事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("數據已接收...");
};

// 斷開 web socket 連接成功觸發事件
ws.onclose = function () {
  alert("連接已關閉...");
};

 

 

 

WebSocket 服務端

WebSocket 在服務端的實現非常豐富。Node.js、Java、C++、Python 等多種語言都有自己的解決方案。

以下，介紹我在學習 WebSocket 過程中接觸過的 WebSocket 服務端解決方案。

WebSocket 服務端

WebSocket 在服務端的實現非常豐富。Node.js、Java、C++、Python 等多種語言都有自己的解決方案。

以下，介紹我在學習 WebSocket 過程中接觸過的 WebSocket 服務端解決方案。

Node.js

常用的 Node 實現有以下三種。

µWebSockets

Socket.IO

WebSocket-Node