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 對象。

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 對象
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 實現有以下三種。

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 處理器添加到註冊中心。

實現 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();
    }

}

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 9.3 版本似乎存在兼容性問題，Tomcat則木有問題。

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

資料

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

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

WebSocket 教程 by ruanyf

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

轉自：https://www.cnblogs.com/jingmoxukong/p/7755643.html

蝸牛-d124939312

發佈了20 篇原創文章 · 獲贊 16 · 訪問量 10萬+

私信關注

WebSocket 詳解教程

概述

WebSocket 是什麼？

爲什麼需要 WebSocket ？

WebSocket 如何工作？

WebSocket 客戶端

客戶端 API

WebSocket 屬性

WebSocket 事件

WebSocket 方法

WebSocket 服務端

Node.js

Java

Spring

javax.websocket

WebSocket 代理

FAQ

HTTP 和 WebSocket 有什麼關係？

Html 和 HTTP 有什麼關係？

完整示例

資料

Nginx R31 doc 官方文檔-01-nginx 如何安裝

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

golang開發環境搭建(win10)

Dubbo 服務啓動方式和註解

dubbo 例

You do not have permission to pull from the repository via HTTPS

oracle創建表空間、創建用戶

Java中的字符串 == 比較，內存分配

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結