✅作者简介：大家好，我是 Meteors., 向往着更加简洁高效的代码写法与编程方式，持续分享Java技术内容。
🍎个人主页：Meteors.的博客
🥭本文内容：spring-websocket在SpringBoot(包含SpringSecurity)项目中的导入

-----------------------------------------------------       目录       ----------------------------------------------------------

目录

一、背景

二、导入实现

1. 后端：pom文件中导入依赖

2.后端：编写后端配置类

3. 后端：编写消息容器与消息处理类

4. 前端：VUE3测试代码

(1) 下载依赖

(2）将测试代码粘贴到空的.vue文件中

4. 测试连接网站：在线网址测试

三、 结果展示

---

---------------------------------------------------------------------------------------------------------------------------------

一、背景

        最近在项目中想实现实时性比较强的功能，在网上搜索之后发现，推荐websocket实现的比较多，然后也发现spring有对websocket进行包装的类，所以想使用websocket。

二、导入实现

1. 后端：pom文件中导入依赖

        <!--        WebSocket代码依赖          --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

2.后端：编写后端配置类

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 注册WebSocket处理器和端点registry.addHandler(new WebSocketHandler(), "/websocket")   // 注册WebSocket处理器，指定处理路径.setAllowedOrigins("*");    // 设置允许的跨域origin（可选）}}

3. 后端：编写消息容器与消息处理类

package com.ruoyi.schooltimetable.websocket;import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.util.ArrayList;
import java.util.List;@Component
public class WebSocketHandler extends TextWebSocketHandler {private List<WebSocketSession> sessions = new ArrayList<>();public void add(WebSocketSession session) {sessions.add(session);}public void remove(WebSocketSession session) {sessions.remove(session);}@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 当 WebSocket 连接建立成功后执行该方法System.err.println("------------   连接完成   ------------");// 保存 WebSocketSession 到某个容器中，方便后续处理sessions.add(session);// 发送欢迎消息给客户端String welcomeMessage = "欢迎连接WebSocket服务器！";TextMessage textMessage = new TextMessage(welcomeMessage);session.sendMessage(textMessage);}@Overridepublic void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {// 当接收到客户端发送的WebSocket消息时执行该方法// 获取消息内容String receivedMessage = message.getPayload().toString();// 处理消息，如解析消息内容、发送响应等//// 发送响应给客户端String response = "收到您的消息：" + receivedMessage;TextMessage textMessage = new TextMessage(response);session.sendMessage(textMessage);}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {// 当WebSocket传输发生错误时执行该方法// 处理错误，如记录日志、关闭连接等//// 关闭WebSocket连接session.close();}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {// 当WebSocket连接关闭后执行该方法System.err.println("---------------   断开成功   ---------------");// 清理操作，如释放资源、通知其他用户等// 从容器中移除WebSocketSessionsessions.remove(session);}
}

如果是在springsecurity中进行配置，需要在SpringSecurity配置类中对websocket的接口进行放行，不然会连接失败。位置：

4. 前端：VUE3测试代码

(1) 下载依赖

执行:

npm install websocket

(2）将测试代码粘贴到空的.vue文件中

<template><div>WebSocket Example<button @click="connect">Connect</button><button @click="disconnect">Disconnect</button><button @click="sendMessage">Send Message</button></div>
</template><script>
// import { ref } from 'vue';export default {name: 'WebSocketExample',data() {return {socket: null,message: '',receivedMessage: ''};},methods: {connect() {if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {alert('111')this.socket = new WebSocket('ws://localhost:8095/websocket');this.socket.onopen = () => {alert('WebSocket connected')console.log('WebSocket connected');};this.socket.onmessage = (event) => {this.receivedMessage = event.data;};this.socket.onclose = () => {console.log('WebSocket disconnected');};}},disconnect() {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.close();}},sendMessage() {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(this.message);}}}
};
</script>

4. 测试连接网站：在线网址测试

测试网址：

Websocket在线测试-Websocket接口测试-Websocket模拟请求工具Websocket模拟请求工具:在线Websocket测试工具,Websocket接口测试,外网内网通用Websocket请求测试,内网测试环境填入内网服务端IP和端口即可,在线模拟Websocket请求在线工具http://www.yunjson.com/websocket/

三、 结果展示

• 在VUE中测试连接：·
• 在测试网址中测试连接：

• 后端控制台的显示：

最后，

有问题可以打在评论区，希望文章对你有所帮助...!