springcloud + vue + websocket
1.前端
前端监听地址:ip:webSocket服务的端口号/webSocket/参数
mounted() {// 初始化WebSocket this.initWebSocket(); },
methods: {
//======================= WebSocket相关 =======================
initWebSocket: function() {
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
// 监听地址
this.notifyUrl = this.notifyUrl + "webSocket/" + this.sysUser.userId;
// 实例化socket
this.socket = new WebSocket(this.notifyUrl);
// 监听socket连接
this.socket.onopen = this.openWebSocket;
// 监听socket错误信息
this.socket.onerror = this.errorWebSocket;
// 监听socket消息
this.socket.onmessage = this.getSocketMsg;
// 路由跳转时结束websocket链接
let testSocket = this.socket;
this.$router.afterEach(function() {
testSocket.close();
});
}
},
openWebSocket: function() {
console.log("WebSocket连接成功");
},
errorWebSocket: function() {
console.log("WebSocket连接发生错误");
},
// 监听后端获取数据
getSocketMsg: function(msg) {
this.payResult = msg.data;
},
closeWebSocket: function() {
console.log("socket已经关闭");
}
}
2.WebSocket所在服务Pom文件
<!--websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
3.WebSocket配置文件
package com.ax.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Configuration public class WebSocketAutoConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
4.WebSocket服务类

package com.ax.service; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.util.HashMap; import java.util.Map; import java.util.concurrent.CopyOnWriteArraySet; @Component @ServerEndpoint(value = "/webSocket/{userId}") public class WebSocketServer { //静态变量,用来记录当前在线连接数。 private static int onlineCount = 0; private Session session; //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。 private static CopyOnWriteArraySet<WebSocketServer> webSockets = new CopyOnWriteArraySet<>(); //与某个客户端的连接会话,需要通过它来给客户端发送数据 private static Map<String, Session> sessionPool = new HashMap<String, Session>(); /** * @方法描述: 开启socket * @return: void * @Author: carry */ @OnOpen public void onOpen(Session session, @PathParam(value = "userId") String userId) { int maxSize = 200 * 1024; // 可以缓冲的传入二进制消息的最大长度 session.setMaxBinaryMessageBufferSize(maxSize); // 可以缓冲的传入文本消息的最大长度 session.setMaxTextMessageBufferSize(maxSize); this.session = session; // 加入set中 webSockets.add(this); // 连接数加1 addOnlineCount(); // 把对应用户id的session放到sessionPool中,用于单点信息发送 sessionPool.put(userId, session); System.out.println("【websocket消息】 有新连接加入!用户id" + userId + ",当前连接数为" + getOnlineCount()); } /** * @方法描述: 关闭socket * @return: void * @Author: carry */ @OnClose public void onClose() { webSockets.remove(this); subOnlineCount(); //在线数减1 System.out.println("【websocket消息】 连接断开!当前连接数为" + getOnlineCount()); } /** * @方法描述: 收到客户端消息 * @return: void * @Author: carry */ @OnMessage public void onMessage(String message) { System.out.println("【websocket消息】收到客户端消息:" + message); } /** * @方法描述: 广播消息全体发送 * @return: void * @Author: carry */ public void sendAllMessage(String message) { for (WebSocketServer webSocket : webSockets) { System.out.println("【websocket消息】广播消息:" + message); try { webSocket.session.getAsyncRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } } /** * @方法描述: 一对一单点消息 * @return: void * @Author: carry */ public void sendOneMessage(String userId, String message) { try { // 防止推送到客户端的信息太多导致弹窗太快 // Thread.sleep(500); System.out.println("用户" + userId + "【websocket消息】单点消息:" + message); Session session = sessionPool.get(userId); if (session != null) { // getAsyncRemote是异步发送 // 加锁防止上一个消息还未发完下一个消息又进入了此方法,防止多线程中同一个session多次被调用报错 synchronized (session) { session.getAsyncRemote().sendText(message); } } } catch (Exception e) { e.printStackTrace(); } } /** * @方法描述: 发生错误时调用 * @return: void * @Author: carry */ @OnError public void onError(Session session, Throwable error) { System.out.println("发生错误"); error.printStackTrace(); } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· DeepSeek “源神”启动!「GitHub 热点速览」
· 上周热点回顾(2.17-2.23)