springboot3搭建WebSocket服務

---

前言

本文詳細介紹了如何在SpringBoot項目中搭建WebSocket服務，包括創建工程、添加依賴、配置文件、主啟動類和WebSocket相關類的實現，以及編寫測試頁面以驗證功能。

一、創建SpringBoot工程

在Intellij IDEA工具中使用SpringBoot項目初始化向導新建一個工程。

二、pom.xml中引入依賴

1.引入庫

代碼如下（示例）：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.yuhao</groupId><artifactId>websocket</artifactId><version>0.0.1-SNAPSHOT</version><name>websocket</name><description>websocket</description><url/><licenses><license/></licenses><developers><developer/></developers><scm><connection/><developerConnection/><tag/><url/></scm><properties><spring.boot.version>3.3.1</spring.boot.version><fastjson.version>1.2.83</fastjson.version><java.version>17</java.version></properties><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring.boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><dependencies><!--websocket--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>3.2.0</version></dependency><!-- 統一 fastjson 版本 解決alibaba組件序列化漏洞問題 --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>${fastjson.version}</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

2. application.yml配置

代碼如下（示例）：

server:port: 2001max-http-header-size: 8192
spring:thymeleaf:cache: false

該處使用的url網絡請求的數據。

---

三、主啟動類

package com.yuhao.websocket;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.web.socket.config.annotation.EnableWebSocket;@SpringBootApplication
@EnableWebSocket
@ServletComponentScan
public class WebsocketApplication {public static void main(String[] args) {SpringApplication.run(WebsocketApplication.class, args);}}

四、WebSocket配置類

package com.yuhao.websocket.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {/*** 注入ServerEndpointExporter，* 這個bean會自動注冊使用了@ServerEndpoint注解聲明的WebSocket Endpoint*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

五、編寫WebSocket服務類

package com.yuhao.websocket.ws;import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import lombok.EqualsAndHashCode;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;@ServerEndpoint("/ws/automate")
@Component
@Slf4j
@EqualsAndHashCode
public class WebSocketServer {private static int onLineCount = 0;//記錄在線連接數，應該做成線程安全的//線程安全set,用來存儲每個客戶的WebSocketServer對象private static CopyOnWriteArraySet<WebSocketServer> webSocketServers = new CopyOnWriteArraySet<>();//與某個客戶端的連接會話，需要通過它來給客戶發送數據private Session session;/*** <p>* Description: 連接建立成功后調用的方法<br>* <p>* Datetime: 2020/5/28 22:25* </p>** @return* @since 2020/5/28 22:25*/@OnOpenpublic void onOpen(Session session) {System.out.println("連接了哦");this.session = session;webSocketServers.add(this);addOnlineCount();System.out.println();}/*** <p>* Description: 關閉會話連接<br>* <p>* Datetime: 2020/5/28 22:39* </p>** @param* @param* @return* @since 2020/5/28 22:39*/@OnClosepublic void onClose(Session session) {webSocketServers.remove(this);subOnlineCount();}/*** <p>* Description: 發送消息<br>* <p>* Datetime: 2020/5/28 22:39* </p>* @since 2020/5/28 22:39*/@OnMessagepublic void onMessage(String message, Session session) {System.out.println("來自客戶端的消息：" + message);for (WebSocketServer socket : webSocketServers) {try {socket.sendMessage(message);} catch (IOException e) {e.printStackTrace();continue;}}}public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}@OnErrorpublic void onError(Session session, Throwable error) {System.out.println("發送消息失敗");error.printStackTrace();}public static synchronized void addOnlineCount() {WebSocketServer.onLineCount++;}public static synchronized void subOnlineCount() {WebSocketServer.onLineCount--;}public static synchronized int getOnLineCount() {return onLineCount;}}

六、編寫測試頁面

創建index.html頁面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>WebSocket</title>
</head>
<body>
Welcome to WebSocket demo<br>
請輸入消息：<input type="texarea" id="msg">
<button onclick="send()">發送消息</button>
<hr>
<button onclick="closeWebSocket()">關閉WebSocket連接</button>
<hr><div id="message"></div>
</body>
</html>
<script>let webSocket = null;if ('WebSocket' in window) {webSocket = new WebSocket('ws://localhost:2001/ws/automate')} else {alert("當前瀏覽器不支持WebSocket協議");}//連接出錯時的回調webSocket.onerror = () => {setMessageInnerHTML("WebSocket連接失敗");}//連接成功建立的回調webSocket.onopen = () => {setMessageInnerHTML("WebSocket連接成功");}//接收到消息的回調方法webSocket.onmessage = function (event) {setMessageInnerHTML(event.data);}//監聽窗口關閉事件window.onbeforeunload = () => {closeWebSocket();}//關閉WebSocket連接closeWebSocket = () => {webSocket.close();}const send = () => {let message = document.getElementById("msg").value;webSocket.send(message);}function setMessageInnerHTML(innerHTML) {document.getElementById("message").innerHTML += innerHTML + '<br>';}
</script>

啟動SpringBoot應用后,瀏覽器中輸入地址進行測試：http://localhost:2001

總結

WebSocket 是一種在客戶端和服務器之間實現雙向通信的協議。它的應用場景和作用如下：

1. 即時聊天應用：WebSocket 可以實現實時的雙向通信，適用于即時聊天應用，如在線聊天室、社交媒體平臺的聊天功能等。
2. 實時數據更新：WebSocket可以在服務器端有新數據時，自動將更新推送到客戶端，適用于實時數據展示應用，如股票行情展示、實時監控系統等。
3. 多人協作應用：WebSocket 可以方便地在多個用戶之間實現實時協作，適用于多人在線編輯應用，如實時協作文檔編輯、多人游戲等。
4. 通知和提醒功能：WebSocket 可以用于發送通知和提醒給客戶端，適用于實時消息提醒功能，如郵件通知、訂單狀態更新等。
5. 實時地理定位：WebSocket 可以實時地將客戶端的地理位置信息發送到服務器，適用于位置共享應用，如實時地圖導航、出租車服務等。

總的來說，WebSocket 的作用是實現客戶端和服務器之間的雙向通信，可以實時地傳遞數據和消息，適用于需要實時交互和通信的應用場景。它相對于傳統的 HTTP 請求-響應模式，具有更低的延遲和更高的效率。