Like Share Discussion Bookmark Smile

J.J. Huang   2019-04-16   Spring Boot   瀏覽次數:

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

在現實生活中,常常有些需求需要做到全雙工的模式下進行溝通,例如:聊天室、多人線上遊戲(多人卡牌),但是基於請求/響應模式的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]退出聊天室!

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