J.J.'s Blogs

J.J. Huang   2019-04-16   Spring Boot   瀏覽次數：次   {{moment(1555376400000).fromNow()}}

SpringBoot - 第二十八章 | WebSocket簡介及應用

📑 目錄
  1. WebSocket 介紹
    1. WebSocket 建立
    2. WebSocket 屬性
    3. WebSocket 事件
    4. WebSocket 方法
  2. WebSocket 實作
    1. 常用註解說明
    2. 加入pom的依賴
    3. 建立 WebSocketUtil
    4. 建立 WebSocketController
    5. 修改 Application
    6. 測試

在現實生活中，常常有些需求需要做到全雙工的模式下進行溝通，例如：聊天室、多人線上遊戲（多人卡牌），但是基於請求/響應模式的HTTP/HTTPS下，如果是對實時性要求較高的場景，客戶端就需要不停的詢問服務端有無可用的資料，這在各方面都是笨拙而不划算的。

而在WebSocket 的全雙工（允許資料在兩個方向上同時傳輸）方式下，客戶端只要靜靜地聽招呼即可，有可用資料時服務端會自動通知它。

WebSocket 介紹

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

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

當獲取Web Socket連接後，你可以通過send()方法來向伺服器發送資料，並通過onmessage事件來接收伺服器返回的資料。

WebSockets 為 C/S 兩端提供了實時交互通信的能力，允許伺服器主動發送訊息給客戶端，是一種區別於 HTTP 的全新雙向資料流協議。
更詳細的介紹建議參考此篇WebSocket 简介及应用实例​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​​​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌‌​​‌​​​‌‌‌​​​

WebSocket 建立

基於前端建立一個WebSocket。

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

url：指定連接的 URL，protocol：可選的，指定了可接受的子協議。

WebSocket 屬性

屬性 描述
Socket.readyState 只讀屬性 readyState 表示連接狀態，可以是以下值：
0 - 表示連接尚未建立。
1 - 表示連接已建立，可以進行通信。
2 - 表示連接正在進行關閉。
3 - 表示連接已經關閉或者連接不能打開。
Socket.bufferedAmount 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，
但是還沒有發出的 UTF-8 文本字節數。

WebSocket 事件

事件 事件處理程序 描述
open Socket.onopen 連接建立時觸發
message Socket.onmessage 客戶端接收服務端資料時觸發
error Socket.onerror 通信發生錯誤時觸發
close Socket.onclose 連接關閉時觸發

WebSocket 方法

方法 描述
Socket.send() 使用連接發送資料
Socket.close() 關閉連接

WebSocket 實作

關於WebSocket的實現是基於JSR356標準的。該標準的出現，統一了WebSocket的代碼寫法。只要支持web容器支持JSR356標準，那麼實現方式是一致的。而目前實現方式有兩種，一種是註解方式，另一種就是繼承繼承javax.websocket.Endpoint類了。​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​​​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌‌​​‌​​​‌‌‌​​​

常用註解說明

註解 說明
@WebSocketEndpoint 是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端。註解的值將被用於監聽用戶連接的終端訪問URL地址。
@onOpen 打開一個新連接，即有新連接時，會調用被此註解的方法。
@onClose 關閉連接時調用。
@onMessage 當伺服器接收到客戶端發送的消息時所調用的方法。
@PathParam 接收uri參數的，與@PathVariable功能差不多，可通過url獲取對應值

加入pom的依賴

1
2
3
4
5
6
7
8
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

建立 WebSocketUtil

建立 WebSocketController

修改 Application

測試

啟動應用，我這邊使用線上WebSocket工具來做測試。WebSocket 在线测试 v13

個別開啟瀏覽器瀏覽WebSocket在線測試，並在連結的URL上分別填上：
ws://localhost:8080/WebSocketServer/J.J.Huang
ws://localhost:8080/WebSocketServer/K.K.Huang

1.有新成員[J.J.Huang]加入聊天室!
2.有新成員[K.K.Huang]加入聊天室!
3.成員[J.J.Huang]：Hello ~
4.成員[K.K.Huang]：HIHI
5.成員[J.J.Huang]：ByeBye
6.成員[J.J.Huang]退出聊天室!
7.成員[K.K.Huang]退出聊天室!​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​​​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌‌​​‌​​​‌‌‌​​​

SpringBoot - 第二十八章 - 圖 1 (01)

SpringBoot - 第二十八章 - 圖 2 (02)

註：以上參考了
WebSocket 简介及应用实例
iT邦幫忙 的 Day26 Spring Boot WebSocket 製作一個簡單的聊天室(上) 文章。
iT邦幫忙 的 Day27 Spring Boot WebSocket 製作一個簡單的聊天室(下) 文章。
oKong 的 SpringBoot | 第十九章：web应用开发之WebSocket文章。​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​​​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌​​‌‌​‌​​‌​‌‌​‌‌‌​​‌‌​​‌‌‌​‌‌​​​‌​​‌‌​‌‌‌‌​‌‌​‌‌‌‌​‌‌‌​‌​​​​‌‌​​‌​​​‌‌‌​​​

📚 相關文章

📄 公開段落採 CC BY 3.0 TW 授權，可自由轉載引用，需署名出處。
🔒 付費 / 會員段落 © J.J. Huang，保留所有權利，禁止轉載。