前面為大家講述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各種框架組件；隨著移動互聯網的發展，服務端消息數據推送已經是一個非常重要、非常普遍的基礎功能。今天就和大家聊聊在SpringBoot輕松整合WebSocket，實現Web在線聊天室，希望能對大家有所幫助。
一、WebSocket簡介
1.1 什么是WebSocket？
WebSocket協議是基于TCP的一種網絡協議，它實現了瀏覽器與服務器全雙工（Full-duplex）通信。它允許服務端主動向客戶端推送數據，這使得客戶端和服務器之間的數據交換變得更加簡單高效。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就可以創建持久性的連接，并進行雙向數據傳輸。
WebSocket 在握手之后便直接基于 TCP 進行消息通信，只是 TCP的基礎上的一層非常輕的封裝，它只是將TCP的字節流轉換成消息流（文本或二進制），至于怎么解析這些消息的內容完全依賴于應用本身。
1.2 為什么需要 WebSocket？
我們知道HTTP 協議有一個缺陷：通信只能由客戶端發起，服務器端無法向某個客戶端推送數據。然而，在某些場景下，數據推送是非常必要的功能，為了實現推送技術，所用的技術都是輪詢，即：客戶端在特定的的時間間隔（如每 1 秒），由瀏覽器對服務器發出 HTTP 請求，然后由服務器返回最新的數據給客戶端的瀏覽器。
例如，在外賣場景下，當騎手位置更新時，服務器端向客戶端推送騎手位置數據。如果使用HTTP協議，那么就只能輪詢。輪詢模式具有很明顯的缺點，即瀏覽器需要不斷地向服務器發出請求，然而 HTTP 請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源，同樣，數據時效性較低，存在一定的數據延遲。
在這種情況下，WebSocket 出現了，使用 WebSocket 協議可以實現由服務端主動向客戶端推送消息，同時也可以實現客戶端向服務器端發送消息。這樣能更好得節省服務器資源和帶寬；并且能夠更實時地進行通訊。隨著HTML 5 的流行， WebSocket已經成為國際標準，目前主流的瀏覽器都已經支持。
1.3 WebSocket的優點
- 較少的控制開銷。在連接建立后，服務端和客戶端之間交換數據時，用于協議控制的數據包頭部相對較小。在不包含擴展的情況下，對于服務器到客戶端的內容，此頭部大小只有 2 至 10 字節（和數據包長度有關）；對于客戶端到服務器的內容，此頭部還需要加上額外的 4 字節的掩碼。這相對于 HTTP 協議每次都要攜帶完整的頭部信息，此項開銷顯著減少了。
- 更強的實時性。由于WebSocket協議是全雙工的，所以服務器可以隨時主動向客戶端推送數據。相對于 HTTP 請求必須等待客戶端發起請求服務端才能響應，延遲明顯更少；即使是和Comet 等類似的長輪詢比較，WebSocket也能在短時間內更高效的傳遞數據。
- 保持連接狀態。與 HTTP 不同的是， Websocket 需要先創建連接，這就使得其成為一種有狀態的協議，之后通信時可以省略部分狀態信息，而 HTTP 請求需要在每個請求都攜帶狀態信息（如Token等）。
- 更好的二進制支持。 Websocket 定義了二進制幀，相對 HTTP，可以更輕松地處理二進制數據。Websocket 定義了擴展，用戶可以擴展協議、實現部分自定義的子協議。如部分瀏覽器支持Gzip壓縮等。
- 更好的壓縮效果。相對于 HTTP 壓縮， Websocket 在適當的擴展支持下，可以沿用之前內容的上下文，在傳遞類似的數據時，可以顯著地提高壓縮率。
1.4 WebSocket的應用場景
隨著移動互聯網的發展，WebSocket的使用越來越廣泛。基本上只要是時效性要求高的業務場景都可以使用WebSocket，例如：
- 協同編輯
- 基于位置的應用
- 體育實況更新
- 股票基金報價實時更新
- 多玩家游戲
- 音視頻聊天
- 視頻會議
- 在線教育
- 社交訂閱
除此之外，還有系統消息通知、用戶上下線提醒、客戶端數據同步，實時數據更新，多屏幕同步，用戶在線狀態，消息掃描二維碼登錄/二維碼支付，彈幕、各類信息提醒，在線選座，實時監控大屏等等；
二、WebSocket的事件
我們知道HTTP協議使用http和https的統一資源標志符。WebSocket與HTTP類似，使用的是 ws 或 wss（類似于 HTTPS），其中 wss 表示在 TLS 之上的Websocket。例如：
ws://example.com/wsapi
wss://secure.example.com/
WebSocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數防火墻的限制。默認情況下， WebSocket 協議使用80 端口；運行在 TLS 之上時，默認使用 443 端口。
WebSocket 只是在 Socket 協議的基礎上，非常輕的一層封裝。在WebSocket API中定義了open、close、error、message等幾個基本事件，這就使得WebSocket使用起來非常簡單。 下面是在WebSocket API定義的事件：
事件 | 事件處理程序 | 描述 |
open | Sokcket onopen | 連接建立時觸發 |
message | Sokcket onmessage | 客戶端接收服務端數據時觸發 |
error | Sokcket onerror | 通訊發生錯誤時觸發 |
close | Sokcket onclose | 連接關閉時觸發 |
三、Spring Boot整合WebSocket實現聊天室
Spring Boot 提供了 Websocket 組件
spring-boot-starter-websocket，用來支持在 Spring Boot環境下對Websocket 的使用。
下面我們就以多人在線聊天室為例，演示 Spring Boot 是如何整合Websocket 實現服務端消息推送的。
3.1 創建前端頁面
首先，創建spring boot項目：
spring-boot-starter-websocket。接下來，我們利用前端框架 Bootstrap 構建前臺交互頁面，創建index.html頁面并集成Bootstrap框架，最后在 js 中實現WebSocket通訊，完整頁面代碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Room</title>
<script type="text/javascript">
var urlPrefix ='ws://localhost:8080/chat/';
var ws = null;
// 加入
function join() {
var username = document.getElementById('uid').value;
var url = urlPrefix + username;
ws = new WebSocket(url);
ws.onmessage = function(event){
var ta = document.getElementById('responseText');
ta.value += event.data+"\r\n";
};
ws.onopen = function(event){
var ta = document.getElementById('responseText');
ta.value += "建立 websocket 連接... \r\n";
};
ws.onclose = function(event){
var ta = document.getElementById('responseText');
ta.value += "用戶["+username+"] 已經離開聊天室! \r\n";
ta.value += "關閉 websocket 連接. \r\n";
};
}
// 退出
function exit(){
if(ws) {
ws.close();
}
}
// 發送消息
function send(){
var message = document.getElementById('message').value;
if(!window.WebSocket){return;}
if(ws.readyState == WebSocket.OPEN){
ws.send(message);
}else{
alert("WebSocket 連接沒有建立成功！");
}
}
</script>
</head>
<body>
<form onSubmit="return false;">
<h3>BBS聊天室</h3>
<textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>
<br/>
<br
<label>昵稱 : </label><input type="text" id="uid" />
<input type="button" value="加入聊天室" onClick="join()" />
<input type="button" value="離開聊天室" onClick="exit()" />
<br
<br
<label>消息 : </label><input type="text" id="message" /> <input type="button" value="發送消息" onClick="send()" />
</form>
</body>
</html>
上面的示例中，js中定義了WebSocket通訊相關的代碼，如：ws.onopen、ws.onmessage、ws.onclose等事件。
3.2 創建后端服務
接下來，我們開始創建后臺WebSocket服務，實現WebSocket后臺通訊服務。
step 1：引入相關依賴
首先，修改項目的pom.xml文件，主要添加 Web 和 Websocket 組件。具體代碼如下所示：
<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>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
step2：消息接收
首先創建ChatServerEndpoint類，并使用@ServerEndpoint注解創建WebSocket EndPoint實現客戶端連接、消息的接收、等事件。具體示例代碼如下所示：
@RestController
@ServerEndpoint("/chat/{username}")
public class ChatServerEndpoint {
private static final Logger logger = LoggerFactory.getLogger(ChatRoomServerEndpoint.class);
@OnOpen
public void openSession(@PathParam("username"){
ONLINE_USER_SESSIONS.put(username, session);
String message = "歡迎用戶[" + username + "] 來到聊天室！";
logger.info("用戶登錄："+message);
sendMessageAll(message);
}
@OnMessage
public void onMessage(@PathParam("username"){
logger.info("發送消息："+message);
sendMessageAll("用戶[" + username + "] : " + message);
}
@OnClose
public void onClose(@PathParam("username"){
//當前的Session 移除
ONLINE_USER_SESSIONS.remove(username);
//并且通知其他人當前用戶已經離開聊天室了
sendMessageAll("用戶[" + username + "] 已經離開聊天室了！");
try {
session.close();
} catch (IOException e) {
logger.error("onClose error",e);
}
}
@OnError
public void onError(Session session, Throwable throwable){
try {
session.close();
} catch (IOException e) {
logger.error("onError excepiton",e);
}
logger.info("Throwable msg "+throwable.getMessage());
}
}
上面的示例中，我們使用 @ServerEndpoint("/chat/{username}") 注解監聽此地址的 WebSocket 信息，客戶端也是通過此地址向服務端接收和發送消息。同時使用@OnOpen注解實現客戶端連接事件，@OnMessage注解實現消息發送事件，@OnClose注解實現客戶端連接關閉事件，@OnError注解實現消息錯誤事件。
step3：消息發送
我們先創建一個 WebSocketUtils 工具類，用來存儲聊天室在線的用戶信息，以及向客戶端發送消息的功能。具體代碼如下所示：
public final class WebSocketUtils {
private static final Logger logger = LoggerFactory.getLogger(WebSocketUtils.class);
// 存儲 websocket session
public static final Map<String, Session> ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
/**
* @param session 用戶 session
* @param
public static void sendMessage(Session session, String message){
if (session == null) {
return;
}
final RemoteEndpoint.Basic basic = session.getBasicRemote();
if (basic == null) {
return;
}
try {
basic.sendText(message);
} catch (IOException e) {
logger.error("sendMessage IOException ",e);
}
}
/**
* 推送消息到其他客戶端
* @param
public static void sendMessageAll(String message){
ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));
}
}step4：開啟 WebSocket 功能
修改項目啟動類，需要添加 @EnableWebSocket 開啟 WebSocket 功能。具體示例代碼如下所示：
@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {
public static void main(String[] args){
SpringApplication.run(WebSocketApplication.class, args);
}
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
以上，我們WebSocket服務端內容就實現完畢了。接下來我們驗證整個聊天室功能是否正常？
3.3驗證測試
前面，我們已經把整個WebSocket聊天室的前后臺功能介紹完了。接下來我們驗證整個聊天室功能是否正常？
首先，啟動項目，在瀏覽器中分別輸入地址：http://localhost:8080/ 打開三個聊天室頁面。如下圖所示：
然后，分別在三個聊天室頁面中，輸入三個昵稱并加入聊天室，與服務端成功建立WebSocket連接，即可在聊天室發送消息。
點擊頁面上的離開聊天室，此頁面與服務端建立的WebSocket連接就會斷開。其他連接不受影響。
最后
以上，我們就把Spring Boot整合WebSocket，實現BBS聊天室的功能介紹完了。WebSocket能夠以非常簡單的方式，實現客戶端與服務器端的雙向通訊。在實際項目開發過程中使用越來越廣泛，希望大家能熟悉掌握。
