SpringBoot+Vue 中 WebSocket 的使用

????????WebSocket 是一種在單個 TCP 連接上進行全雙工通信的協議，它使得客戶端和服務器之間可以進行實時數據傳輸，打破了傳統 HTTP 協議請求 - 響應模式的限制。

? ? ? ? 下面我會展示在 SpringBoot + Vue 中，使用WebSocket進行前后端通信。

后端

1、引入 jar 包

<dependency><!-- 引入 websocket 庫，該庫提供了對 WebSocket 協議的支持--><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.14</version>
</dependency>
<dependency><!-- 引入 org.json 庫，該庫為 Java 提供了處理 JSON 數據的功能--><groupId>org.json</groupId><artifactId>json</artifactId><version>20090211</version>
</dependency>

2、WebSocket 配置類

package com.zecApi.config;import com.zecApi.config.zecInstantMessaging.ZecInstantMessagingWebSocketHandler;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;/*** WebSocketConfig 類是一個配置類，用于配置 Spring 框架的 WebSocket 功能。* 該類實現了 WebSocketConfigurer 接口，并重寫了 registerWebSocketHandlers 方法，* 用于注冊 WebSocket 處理器和配置相關的連接信息。*/
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {static {System.out.println("----------------------------------");System.out.println("------   WebSocket服務啟動   -------");System.out.println("----------------------------------");}/*** 配置 WebSocket 容器的參數* @return ServletServerContainerFactoryBean 實例*/@Beanpublic ServletServerContainerFactoryBean createWebSocketContainer() {ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();// 設置最大文本消息緩沖區大小為 8192 字節container.setMaxTextMessageBufferSize(8192);// 設置最大二進制消息緩沖區大小為 8192 字節container.setMaxBinaryMessageBufferSize(8192);return container;}/*** 重寫 WebSocketConfigurer 接口的 registerWebSocketHandlers 方法，* 該方法用于注冊 WebSocket 處理器并配置連接的相關信息。** @param registry 用于注冊 WebSocket 處理器的注冊表對象*/@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 注冊WebSocket處理器，并設置允許的來源registry.addHandler(zecInstantMessagingWebSocketHandler(), "/ZecInstantMessaging/ZecInstantMessagingWebSocketHandler/{account}").setAllowedOrigins("*"); // 允許所有來源，生產環境建議指定具體的域}/*** 定義一個名為 ZecInstantMessagingWebSocketHandler 的 Bean，該 Bean 是一個自定義的 WebSocket 處理器。* Spring 會將該 Bean 注入到應用程序中，以便在 WebSocket 連接時使用。** @return 返回一個 ZecInstantMessagingWebSocketHandler 實例*/@Beanpublic ZecInstantMessagingWebSocketHandler zecInstantMessagingWebSocketHandler() {return new ZecInstantMessagingWebSocketHandler();}}

3、WebSocket 處理器類?

package com.zecApi.config.zecInstantMessaging;import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArrayList;/*** 自定義的 WebSocket 處理器類，繼承自 TextWebSocketHandler，用于處理 WebSocket 連接、消息收發和連接關閉等操作。*/
//@Component
@ServerEndpoint("/ZecInstantMessaging/ZecInstantMessagingWebSocketHandler/{account}")
public class ZecInstantMessagingWebSocketHandler extends TextWebSocketHandler {/*** 用于存儲賬號和 WebSocketSession 映射關系的并發哈希表。* 鍵為賬號，值為對應的 WebSocketSession 對象，方便根據賬號查找對應的會話。* 采用 ConcurrentHashMap 保證在多線程環境下的線程安全。*/private static final ConcurrentHashMap<String, WebSocketSession> sessionPool = new ConcurrentHashMap<>();/*** 用于存儲所有 WebSocketSession 的并發列表。* 該列表用于存儲所有當前活躍的 WebSocket 會話，方便進行廣播等操作。* 采用 CopyOnWriteArrayList 保證在多線程環境下的線程安全。*/private static final CopyOnWriteArrayList<WebSocketSession> sessions = new CopyOnWriteArrayList<>();/*** 當與客戶端的 WebSocket 連接建立成功后，此方法會被調用。** @param session 代表與客戶端建立的 WebSocket 會話對象。*/@Overridepublic void afterConnectionEstablished(WebSocketSession session) {try {// 從 URI 中獲取 account 參數String account = extractAccountFromSession(session);// 檢查是否成功獲取到賬號信息if (account == null) {// 若未獲取到賬號信息，打印錯誤信息并關閉連接System.out.println("客戶端連接失敗，未獲取到賬號信息");session.close();return;}// 打印客戶端連接成功信息，包含賬號信息System.out.println("賬號 " + account + " 已上線");// 將賬號和對應的 WebSocketSession 存入 sessionPool 中sessionPool.put(account, session);// 將該 WebSocketSession 存入 sessions 列表中sessions.add(session);// 遍歷 sessionPool 中的所有賬號，打印在線賬號信息for (String key : sessionPool.keySet()) {System.out.println("在線賬號: " + key);}// 打印當前在線人數System.out.println("在線人數：" + sessionPool.size());} catch (IOException e) {// 處理關閉連接時可能出現的異常System.out.println("處理連接建立時出現 I/O 異常: " + e.getMessage());}}/*** 當接收到客戶端發送的文本消息時，此方法會被調用。** @param session 代表與客戶端建立的 WebSocket 會話對象。* @param message 客戶端發送的文本消息對象。*/@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) {try {// 從接收到的 TextMessage 對象中提取消息的具體內容String payload = message.getPayload();// 打印接收到的消息內容，方便調試和監控System.out.println("收到客戶端發來的消息: " + payload);// 解析 JSON 數據JSONObject jsonObject = new JSONObject(payload);// 提取消息 IDlong messageId = jsonObject.optLong("id", -1);if (messageId == -1) {System.out.println("未找到有效的消息 ID");}// 提取真正的消息內容StringBuilder content = new StringBuilder();for (int i = 0; ; i++) {String charStr = jsonObject.optString(String.valueOf(i));if (charStr.isEmpty()) {break;}content.append(charStr);}// 真正的信息String msg = content.toString();//把發來的信息按照 / 分成數組String[] splitMsg = msg.split("/");switch (splitMsg[0]){case  "chat":System.out.println("聊天來了");break;default:System.out.println("默認");}// 打印提取的消息內容System.out.println("提取的消息內容: " + msg);// 向發送消息的客戶端回送一條確認消息，告知服務器已成功收到消息// 創建一個 JSONObject 對象JSONObject response = new JSONObject();// 向 JSONObject 中添加鍵值對，鍵為 "friendAccount"，值為 "friendAccount"(這里的值用的是前端傳回來的)response.put("friendAccount", splitMsg[2]);// 將 messageId 添加到響應中（因為前端在發送信息后會校驗返回數據的id，從而結束監聽計時器，如果沒有 id，連接計時器不會停止，導致超時報錯）response.put("id", messageId);// 將 JSONObject 轉換為 JSON 格式的字符串String jsonString = response.toString();// 把信息發送給前端session.sendMessage(new TextMessage(jsonString));} catch (IOException e) {// 若在處理消息或發送確認消息過程中出現 I/O 異常，捕獲該異常// 并打印錯誤信息，包含異常的具體描述，便于后續排查問題System.out.println("處理消息時出現異常: " + e.getMessage());} catch (JSONException e) {throw new RuntimeException(e);}}/*** 當與客戶端的 WebSocket 連接關閉時，此方法會被調用。** @param session 代表與客戶端建立的 WebSocket 會話對象。* @param status 表示連接關閉的狀態信息。*/@Overridepublic void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) {// 從 WebSocketSession 的 URI 中提取賬號信息String account = extractAccountFromSession(session);// 檢查是否成功獲取到賬號信息if (account != null) {// 從 sessionPool 中移除該賬號對應的 WebSocketSessionsessionPool.remove(account);// 從 sessions 列表中移除該 WebSocketSessionsessions.remove(session);// 打印客戶端斷開連接信息，包含賬號信息和當前在線人數System.out.println("賬號 " + account + " 已下線" );// 打印當前在線人數System.out.println("在線人數：" + sessionPool.size());}}/*** 從 WebSocketSession 的 URI 中提取賬號信息。** @param session 代表與客戶端建立的 WebSocket 會話對象。* @return 提取到的賬號信息，如果未找到則返回 null。*/private String extractAccountFromSession(WebSocketSession session) {if (session.getUri() == null) {return null;}// 獲取 WebSocketSession 的 URI 并轉換為字符串String uri = session.getUri().toString();// 查找 URI 中最后一個斜杠的位置int index = uri.lastIndexOf("/");// 檢查是否找到斜杠且斜杠后面還有字符if (index != -1 && index < uri.length() - 1) {// 提取斜杠后面的部分作為賬號信息return uri.substring(index + 1);}// 若未找到合適的賬號信息，返回 nullreturn null;}
}

前端

1、WebSocket 工具JS

? ? ? ? 這個是用來連接 webSocket 的。

// 定義 WebSocket 實例變量，用于存儲當前的 WebSocket 連接
let webSocket;
// 我這里本來是用 sessionStorage 來獲取登錄賬號的，這邊演示的話我就直接寫死了。
// const account = getAccountBySessionStorage();
const account = "987654321";/*** WebSocket還有一個readyState屬性，可以用來獲取當前連接的狀態。* readyState有四個可能的值：0（連接尚未建立）、1（連接已建立，可以通信）、2（連接正在關閉）、3（連接已關閉）*//*** 登錄時連接webSocket* @param account* 這個是我這邊登錄后進行 websocket 連接，這里演示沒用到，下面刷新也可以進行連接*/
// export function loginConnectWebSocket(account) {
//     if (account === null){
//         return;
//     }else {
//         if (!webSocket || webSocket.readyState === WebSocket.CLOSED){
//             return connectWebSocket(account);
//         }
//     }
// }/*** 監聽頁面刷新，重新進行 WebSocket 連接*/
window.onload = function() {console.log("刷新了");if (account === null){return;}else {if (!webSocket || webSocket.readyState === WebSocket.CLOSED){connectWebSocket(account);}}
};/*** 監聽頁面關閉事件，頁面刷新前也會觸發（頁面刷新會自動斷開websocket連接，這個暫時不需要）*/
// window.onbeforeunload = function (){
//     disconnectWebSocket();
// };/*** 獲取當前的 WebSocket 實例* @returns {WebSocket|null} 當前的 WebSocket 實例或 null*/
export function getWebSocket() {return webSocket;
}/*** 主動斷開 WebSocket 連接*/
export function disconnectWebSocket() {if (webSocket && webSocket.readyState !== WebSocket.CLOSED) {webSocket.close();webSocket = null;}
}/*** 封裝一個連接 webSocket 的操作*/
export function connectWebSocket(account){return new Promise((resolve, reject) => {// 檢查是否已經存在有效的 WebSocket 連接if (webSocket && webSocket.readyState === WebSocket.OPEN) {return resolve(webSocket);}// 如果存在連接但已經關閉，先斷開if (webSocket && webSocket.readyState !== WebSocket.CLOSED) {// console.log("斷開了");webSocket.close();}webSocket = new WebSocket(`ws://localhost:8088/ZecInstantMessaging/ZecInstantMessagingWebSocketHandler/${account}`);// 連接成功時的處理webSocket.onopen = function () {// console.log('WebSocket 連接已建立');resolve(webSocket);};// 連接錯誤時的處理webSocket.onerror = function (error) {// console.error('WebSocket 連接錯誤:', error);reject(error);};// 連接關閉時的處理webSocket.onclose = function () {// console.log('WebSocket 連接已關閉');};});
}

2、VUE 頁面

<template><div style="width: 100%;height: 120px;"><div><textarea v-model="message" style="height: 50px;resize: none; width: 97%;font-family: 'Arial'; font-size: 14px;padding: 5px"></textarea></div><div><el-button style="margin-top: 5px;position: fixed; right: 12px;" @click="sendMessage">發送</el-button></div></div>
</template><script>
import {ref} from "vue";
import {sendMessageJS} from "@/module/zec-instant-messaging/api/MessagePage";export default {name: "DataScreen",setup(){let message = ref("");// 聊天頁面記錄的好友的賬號（我這里單獨寫一個頁面就直接寫死賬號了，主要用來演示 websocket，你們用的話可以替換成自己的）let friendAccount = ref("123456789");// 我的賬號let myAccount = ref("987654321");// 發送消息const sendMessage = async () => {const msg = "chat" + "/" + myAccount.value + "/" + friendAccount.value + "/" + message.value + "/注釋：標識、我的賬號、好友的賬號、信息";// 開始發送try {// 這里進行發送const response = await sendMessageJS(msg);// 如果發送成功，才會執行下面的語句console.log('信息發送成功，并接收到后端返回的信息:', response);console.log("id："+response.id);console.log("friendAccount：："+response.friendAccount);// 執行后續代碼} catch (error) {// 如果信息發送失敗，就執行下面的語句console.error('信息發送失敗:', error);}};return{sendMessage,message}}
}
</script><style scoped></style>

3、頁面 JS

import {getWebSocket} from "@/common/webSocketUtil";// 發送信息的函數
export async function sendMessageJS(msg) {const webSocket = getWebSocket();return new Promise((resolve, reject) => {// 檢查WebSocket連接狀態if (webSocket.readyState !== WebSocket.OPEN) {reject(new Error('WebSocket 連接未打開！'));return;}// 生成唯一的消息IDconst messageId = Date.now();const message = { ...msg, id: messageId };// 設置超時時間const timeoutId = setTimeout(() => {reject(new Error('信息發送超時'));webSocket.removeEventListener('message', handleMessage);webSocket.removeEventListener('error', handleError);}, 5000); // 5秒超時// 定義處理消息響應的函數const handleMessage = (event) => {const response = JSON.parse(event.data);if (response.id === messageId) {clearTimeout(timeoutId);resolve(response);// 移除事件監聽器webSocket.removeEventListener('message', handleMessage);webSocket.removeEventListener('error', handleError);}};// 定義處理錯誤的函數const handleError = (error) => {clearTimeout(timeoutId);reject(error);// 移除事件監聽器webSocket.removeEventListener('message', handleMessage);webSocket.removeEventListener('error', handleError);};// 添加事件監聽器webSocket.addEventListener('message', handleMessage);webSocket.addEventListener('error', handleError);// 發送消息webSocket.send(JSON.stringify(message));});
}