当前位置：首页 > news >正文

企业级Websocket即时通讯系统

news 2026/6/1 20:45:33

企业级即时通讯系统实现总结

项目概述

基于Vue 3 (JavaScript)+Spring Boot构建的实时聊天系统，采用 WebSocket (STOMP) 协议实现消息推送。

功能特性：

公共频道：所有在线用户可见的广播消息
私人聊天：一对一加密消息通信
在线状态：实时显示用户在线/离线状态
消息提醒：页面后台时标题闪烁提示

核心依赖

前端依赖（package.json）

依赖	版本	用途
vue	^3.5.24	前端框架
element-plus	^2.11.7	UI组件库
pinia	^3.0.4	状态管理
sockjs-client	^1.6.1	WebSocket封装
stompjs	2.3.3	STOMP协议客户端

后端依赖（pom.xml）

依赖	版本	用途
spring-boot-starter-parent	2.3.10.RELEASE	Spring Boot父工程
spring-boot-starter-websocket	-	WebSocket支持
hutool-all	5.8.41	工具库
mybatis-plus-boot-starter	3.5.6	ORM框架
sa-token-spring-boot-starter	1.37.0	权限认证

核心技术实现

1. 前端实现

消息存储结构：

constpublicMessages=ref([]);// 公共消息列表constprivateMessages=ref({});// 私人消息（按用户ID存储）

STOMP 连接：

constsocket=newSockJS('/stomp');conststompClient=Stomp.over(socket);stompClient.connect({'token':token},(frame)=>{console.log('STOMP 连接成功');});

频道订阅：

公共频道：/topic/public（广播模式）
私人频道：/user/{userId}/queue/private（点对点）

2. 后端实现

WebSocket 配置：

@Configuration@EnableWebSocketMessageBrokerpublicclassWebSocketConfigimplementsWebSocketMessageBrokerConfigurer{@OverridepublicvoidconfigureMessageBroker(MessageBrokerRegistryconfig){config.enableSimpleBroker("/topic","/queue","/user");config.setApplicationDestinationPrefixes("/app");}@OverridepublicvoidregisterStompEndpoints(StompEndpointRegistryregistry){registry.addEndpoint("/stomp")// 添加 STOMP 端点.setHandshakeHandler(newWebSocketHandshakeHandler())// 设置握手处理程序.setAllowedOrigins("*")// 允许所有来源.withSockJS();// 开启 SockJS 支持}}

自定义WebSocket握手处理类：

用于处理WebSocket连接的握手请求，将用户ID绑定到WebSocket会话中

@Component@Slf4jpublicclassWebSocketHandshakeHandlerextendsDefaultHandshakeHandler{@OverrideprotectedPrincipaldetermineUser(ServerHttpRequestrequest,WebSocketHandlerwsHandler,Map<String,Object>attributes){StringuserId=StpUtil.getLoginIdAsString();returnnewStompPrincipal(userId);}}

ws用户信息封装

/** * ws用户信息封装 * * @author Chen * @since 2026-5-9 11:05 */publicclassStompPrincipalimplementsPrincipal{// 用户IDprivatefinalStringname;publicStompPrincipal(Stringname){this.name=name;}@OverridepublicStringgetName(){returnname;}}

消息处理：

@MessageMapping(“/chat/public”)类型GetMapping，websocket的请求映射

//前端调用constdestination=currentChannel.value==='public'?'/app/chat/public':`/app/chat/private/${selectedUser.value.id}`;client.send(destination,{},JSON.stringify({content:newMessage.CONTENT,fromUserId:userInfoStore.userId,toUserId:selectedUser.value?.id,msgType:'text',channelType:currentChannel.value}));

@SendTo(“/topic/public”)注解是将返回结果自动广播到主题：/topic/public；也可以手动广播

//手动发送消息到指定用户队列messagingTemplate.convertAndSendToUser(toUserId,"/queue/private",response);

@MessageMapping("/chat/public")@SendTo("/topic/public")publicChatResDTOsendPublicMessage(ChatMessageDTOmessage){returnchatService.processPublicMessage(message);}@MessageMapping("/chat/private/{toUserId}")publicvoidsendPrivateMessage(ChatMessageDTOmessage){chatService.processPrivateMessage(message,message.getToUserId());}

消息持久化：

公共消息：GROUP_ID = 'public'
私人消息：GROUP_ID = 'private'，记录双方用户ID

技术架构

┌─────────────────────────────────────────────────┐ │ 前端 (Vue 3) │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ 侧边栏 │ │ 聊天面板 │ │ 输入框 │ │ │ └────┬────┘ └────┬────┘ └────┬────┘ │ └───────┼────────────┼────────────┼─────────────┘ │ WebSocket │ │ ▼ ▼ ▼ ┌─────────────────────────────────────────────────┐ │ 后端 (Spring Boot) │ │ ChatController → ChatService → STOMP Broker │ └───────────────────────────────┬───────────────┘ │ JDBC ▼ ┌─────────────────────────────────────────────────┐ │ 数据库 (MySQL) │ │ CHAT_MESSAGE 表 │ └─────────────────────────────────────────────────┘