WebSocket 詳解教程

目錄

  概述
  WebSocket 客戶端
  WebSocket 服務端
  WebSocket 代理
  FAQ
  完整示例
  資料

概述

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 物件。

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

以上程式碼中的第一個引數 url, 指定連線的 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 服務端解決方案。

Node.js

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

• µWebSockets
• Socket.IO
• WebSocket-Node

Java

Java 的 web 一般都依託於 servlet 容器。

我使用過的 servlet 容器有：Tomcat、Jetty、Resin。其中Tomcat7、Jetty7及以上版本均開始支援 WebSocket（推薦較新的版本，因為隨著版本的更迭，對 WebSocket 的支援可能有變更）。

此外，Spring 框架對 WebSocket 也提供了支援。

雖然，以上應用對於 WebSocket 都有各自的實現。但是，它們都遵循RFC6455 的通訊標準，並且 Java API 統一遵循 JSR 356 - JavaTM API for WebSocket 規範。所以，在實際編碼中，API 差異不大。

Spring

Spring 對於 WebSocket 的支援基於下面的 jar 包：

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-websocket</artifactId>
  <version>${spring.version}</version>
</dependency>

在 Spring 實現 WebSocket 伺服器大概分為以下幾步：

建立 WebSocket 處理器

擴充套件 TextWebSocketHandler 或 BinaryWebSocketHandler ，你可以覆寫指定的方法。Spring 在收到 WebSocket 事件時，會自動呼叫事件對應的方法。

import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.TextMessage;

public class MyHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // ...
    }

}

WebSocketHandler 原始碼如下，這意味著你的處理器大概可以處理哪些 WebSocket 事件：

public interface WebSocketHandler {

   /**
    * 建立連線後觸發的回撥
    */
   void afterConnectionEstablished(WebSocketSession session) throws Exception;

   /**
    * 收到訊息時觸發的回撥
    */
   void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception;

   /**
    * 傳輸訊息出錯時觸發的回撥
    */
   void handleTransportError(WebSocketSession session, Throwable exception) throws Exception;

   /**
    * 斷開連線後觸發的回撥
    */
   void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception;

   /**
    * 是否處理分片訊息
    */
   boolean supportsPartialMessages();

}

配置 WebSocket

配置有兩種方式：註解和 xml 。其作用就是將 WebSocket 處理器新增到註冊中心。

1. 實現 WebSocketConfigurer

import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }

}

1. xml 方式

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:websocket="http://www.springframework.org/schema/websocket"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/websocket
        http://www.springframework.org/schema/websocket/spring-websocket.xsd">

    <websocket:handlers>
        <websocket:mapping path="/myHandler" handler="myHandler"/>
    </websocket:handlers>

    <bean id="myHandler" class="org.springframework.samples.MyHandler"/>

</beans>

更多配置細節可以參考：Spring WebSocket 文件

javax.websocket

如果不想使用 Spring 框架的 WebSocket API，你也可以選擇基本的 javax.websocket。

首先，需要引入 API jar 包。

<!-- To write basic javax.websocket against -->
<dependency>
  <groupId>javax.websocket</groupId>
  <artifactId>javax.websocket-api</artifactId>
  <version>1.0</version>
</dependency>

如果使用嵌入式 jetty，你還需要引入它的實現包：

<!-- To run javax.websocket in embedded server -->
<dependency>
  <groupId>org.eclipse.jetty.websocket</groupId>
  <artifactId>javax-websocket-server-impl</artifactId>
  <version>${jetty-version}</version>
</dependency>
<!-- To run javax.websocket client -->
<dependency>
  <groupId>org.eclipse.jetty.websocket</groupId>
  <artifactId>javax-websocket-client-impl</artifactId>
  <version>${jetty-version}</version>
</dependency>

@ServerEndpoint

這個註解用來標記一個類是 WebSocket 的處理器。

然後，你可以在這個類中使用下面的註解來表明所修飾的方法是觸發事件的回撥

// 收到訊息觸發事件
@OnMessage
public void onMessage(String message, Session session) throws IOException, InterruptedException {
    ...
}

// 開啟連線觸發事件
@OnOpen
public void onOpen(Session session, EndpointConfig config, @PathParam("id") String id) {
    ...
}

// 關閉連線觸發事件
@OnClose
public void onClose(Session session, CloseReason closeReason) {
    ...
}

// 傳輸訊息錯誤觸發事件
@OnError
public void onError(Throwable error) {
    ...
}

ServerEndpointConfig.Configurator

編寫完處理器，你需要擴充套件 ServerEndpointConfig.Configurator 類完成配置：

public class WebSocketServerConfigurator extends ServerEndpointConfig.Configurator {
    @Override
    public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
        HttpSession httpSession = (HttpSession) request.getHttpSession();
        sec.getUserProperties().put(HttpSession.class.getName(), httpSession);
    }
}

然後就沒有然後了，就是這麼簡單。

WebSocket 代理

如果把 WebSocket 的通訊看成是電話連線，Nginx 的角色則像是電話接線員，負責將發起電話連線的電話轉接到指定的客服。

Nginx 從 1.3 版開始正式支援 WebSocket 代理。如果你的 web 應用使用了代理伺服器 Nginx，那麼你還需要為 Nginx 做一些配置，使得它開啟 WebSocket 代理功能。

以下為參考配置：

server {
  # this section is specific to the WebSockets proxying
  location /socket.io {
    proxy_pass http://app_server_wsgiapp/socket.io;
    proxy_redirect off;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 600;
  }
}

更多配置細節可以參考：Nginx 官方的 websocket 文件

FAQ

HTTP 和 WebSocket 有什麼關係？

Websocket 其實是一個新協議，跟 HTTP 協議基本沒有關係，只是為了相容現有瀏覽器的握手規範而已，也就是說它是 HTTP 協議上的一種補充。

Html 和 HTTP 有什麼關係？

Html 是超文字標記語言，是一種用於建立網頁的標準標記語言。它是一種技術標準。Html5 是它的最新版本。

Http 是一種網路通訊協議。其本身和 Html 沒有直接關係。

完整示例

如果需要完整示例程式碼，可以參考我的 Github 程式碼：

• Spring 對 WebSocket 支援的示例

• 嵌入式 Jetty 伺服器的 WebSocket 示例

  spring-websocket 和 jetty 9.3 版本似乎存在相容性問題，Tomcat則木有問題。

  我嘗試了好幾次，沒有找到解決方案，只好使用 Jetty 官方的嵌入式示例在 Jetty 中使用 WebSocket 。

資料

• 知乎高票答案——WebSocket是什麼原理 by Ovear

  對 WebSocket 原理的闡述簡單易懂。

• WebSocket 教程 by ruanyf

  阮一峰大神的科普一如既往的淺顯易懂。

• WebSockets by fullstackpython

• Nginx 官方的 websocket 文件

• Spring WebSocket 文件

• Tomcat7 WebSocket 文件

• Jetty WebSocket 文件

作者：靜默虛空
歡迎任何形式的轉載，但請務必註明出處。
限於本人水平，如果文章和程式碼有表述不當之處，還請不吝賜教。