SpringBoot + WebSocket实战：从零搭建一个能实时聊天、加好友的Web应用（附完整源码）

SpringBoot + WebSocket 全栈实战：构建高可用实时社交应用

1. 现代实时通信技术架构解析

在数字化转型浪潮中，实时交互能力已成为Web应用的核心竞争力。传统HTTP协议的请求-响应模式难以满足即时消息、在线协作等场景需求，而WebSocket协议凭借其全双工通信特性，正在重塑现代Web应用的交互体验。

关键技术对比：

技术指标	HTTP轮询	Server-Sent Events	WebSocket
通信方向	单向	服务器→客户端	全双工
延迟表现	高（1-5秒）	中（0.5-2秒）	低（<100ms）
连接开销	高（多次TCP握手）	中	低（单次连接）
数据格式	文本/二进制	文本	文本/二进制
浏览器兼容性	全支持	IE不支持	IE10+

SpringBoot与WebSocket的珠联璧合，为开发者提供了企业级实时通信解决方案。其技术栈优势体现在：

• 无缝集成：@EnableWebSocket注解实现零配置接入
• 自动管理：内置连接生命周期处理
• 协议升级：自动完成HTTP到WebSocket的协议切换
• 集群支持：通过STOMP协议轻松扩展分布式部署

典型应用场景包括：

• 即时通讯系统（单聊/群聊）
• 实时数据监控大屏
• 协同编辑文档
• 在线游戏对战
• 金融行情推送

2. 项目架构设计与技术选型

2.1 系统分层架构

采用经典的三层架构设计，各层职责分明：

├── 表现层 │ ├── WebSocket消息处理 │ └── RESTful API ├── 业务逻辑层 │ ├── 用户服务 │ ├── 好友关系服务 │ └── 消息服务 └── 数据持久层 ├── MySQL关系存储 └── Redis缓存加速

核心组件交互流程：

1. 前端通过STOMP协议建立WebSocket连接
2. 消息经WebSocketHandler路由至业务服务
3. 服务层处理业务逻辑并持久化数据
4. 通过OnlineUserManager推送至目标会话

2.2 数据库设计优化

采用关系型数据库MySQL存储核心业务数据，关键表结构设计：

用户表(user)

CREATE TABLE `user` ( `user_id` INT AUTO_INCREMENT PRIMARY KEY, `user_name` VARCHAR(20) UNIQUE, `password` VARCHAR(64) COMMENT 'SHA256加密', `avatar` VARCHAR(255) DEFAULT 'default.jpg', `status` TINYINT DEFAULT 0 COMMENT '0-离线 1-在线' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

好友关系表(friend)

CREATE TABLE `friend` ( `id` INT AUTO_INCREMENT PRIMARY KEY, `user_id` INT NOT NULL, `friend_id` INT NOT NULL, `relation` TINYINT DEFAULT 1 COMMENT '1-好友 2-黑名单', `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY `uk_user_friend` (`user_id`,`friend_id`) ) ENGINE=InnoDB;

消息表(message)

CREATE TABLE `message` ( `message_id` BIGINT AUTO_INCREMENT PRIMARY KEY, `session_id` VARCHAR(32) NOT NULL, `sender_id` INT NOT NULL, `content_type` TINYINT DEFAULT 1 COMMENT '1-文本 2-图片', `content` TEXT, `status` TINYINT DEFAULT 0 COMMENT '0-未读 1-已读', `send_time` DATETIME(3) DEFAULT CURRENT_TIMESTAMP(3), KEY `idx_session` (`session_id`,`send_time`) ) ENGINE=InnoDB;

提示：datetime(3)可存储毫秒级时间戳，确保消息时序精确

3. 核心功能实现详解

3.1 WebSocket服务端配置

配置类实现：

@Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private AuthHandshakeInterceptor authInterceptor; @Autowired private MessageWebSocketHandler messageHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(messageHandler, "/ws/message") .addInterceptors(authInterceptor) .setAllowedOrigins("*"); } }

认证拦截器：

public class AuthHandshakeInterceptor implements HandshakeInterceptor { @Override public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) { // JWT令牌验证逻辑 String token = extractToken(request); Claims claims = JwtUtil.parseToken(token); if(claims == null) { return false; } attributes.put("userId", claims.getSubject()); return true; } }

3.2 实时消息处理核心

消息处理器实现：

@Slf4j @Component public class MessageWebSocketHandler extends TextWebSocketHandler { @Autowired private MessageService messageService; @Autowired private OnlineUserManager onlineUserManager; @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { MessageDTO msg = JSON.parseObject( message.getPayload(), MessageDTO.class ); // 消息持久化 messageService.saveMessage(msg); // 实时转发 onlineUserManager.sendMessage( msg.getReceiverId(), new TextMessage(JSON.toJSONString(msg)) ); } }

在线用户管理：

@Component public class OnlineUserManager { private final ConcurrentMap<Integer, WebSocketSession> liveSessions = new ConcurrentHashMap<>(); public void addSession(Integer userId, WebSocketSession session) { liveSessions.put(userId, session); updateUserStatus(userId, true); } public void removeSession(Integer userId) { liveSessions.remove(userId); updateUserStatus(userId, false); } public void sendMessage(Integer userId, TextMessage message) { WebSocketSession session = liveSessions.get(userId); if(session != null && session.isOpen()) { session.sendMessage(message); } } }

3.3 好友关系业务实现

好友申请流程：

1. 申请方提交请求

@PostMapping("/friend/request") public Result sendRequest(@RequestBody FriendRequestDTO dto) { // 验证是否已是好友 if(friendService.isFriend(dto.getFromId(), dto.getToId())) { return Result.fail("已是好友关系"); } // 保存申请记录 friendService.saveRequest(dto); // 实时通知 wsTemplate.convertAndSendToUser( String.valueOf(dto.getToId()), "/queue/friend/request", dto ); return Result.success(); }

2. 接收方处理申请

@PostMapping("/friend/handle") public Result handleRequest(@RequestBody HandleDTO dto) { if(dto.getAction() == 1) { // 同意 friendService.createRelation( dto.getRequestId(), dto.getFromId(), dto.getToId() ); } // 更新申请状态 friendService.updateRequestStatus( dto.getRequestId(), dto.getAction() ); // 双向通知 notifyBothParties(dto); return Result.success(); }

4. 高级特性与性能优化

4.1 消息可靠性保障

消息确认机制：

participant Client participant Server Client->Server: 发送消息(msgId=123) Server->DB: 持久化消息 Server->Client: ACK确认 Client->Server: 收到ACK后更新UI Server->Target: 转发消息 Target->Server: 发送已读回执 Server->DB: 更新消息状态

离线消息处理：

public List<Message> getOfflineMessages(Integer userId) { // 查询未读消息 List<Message> messages = messageMapper.selectUnread(userId); // 批量更新状态 if(!messages.isEmpty()) { messageMapper.batchUpdateStatus( messages.stream() .map(Message::getId) .collect(Collectors.toList()), MessageStatus.READ ); } return messages; }

4.2 性能优化策略

连接优化：

• 启用WebSocket压缩扩展

server.compression.enabled=true server.compression.mime-types=text/*

消息批处理：

@Scheduled(fixedRate = 5000) public void batchProcessMessages() { List<Message> batch = messageQueue.drain(100); if(!batch.isEmpty()) { messageMapper.batchInsert(batch); } }

缓存加速：

@Cacheable(value = "friendList", key = "#userId") public List<FriendVO> getFriendList(Integer userId) { return friendMapper.selectByUserId(userId); }

5. 安全防护方案

5.1 认证与鉴权

JWT令牌验证：

public boolean verifyToken(String token) { try { Jwts.parserBuilder() .setSigningKey(key) .build() .parseClaimsJws(token); return true; } catch (JwtException e) { log.warn("无效令牌: {}", token); return false; } }

权限控制：

@PreAuthorize("#userId == authentication.principal.id") @DeleteMapping("/friend/{id}") public Result deleteFriend( @PathVariable Integer id, @RequestParam Integer userId) { // 业务逻辑 }

5.2 消息安全

内容过滤：

public String filterContent(String content) { // 敏感词过滤 SensitiveFilter filter = SensitiveFilter.DEFAULT; content = filter.filter(content); // XSS防护 return HtmlUtils.htmlEscape(content); }

频率限制：

@RateLimiter(value = 10, key = "#userId") public void sendMessage(Message message) { // 消息处理 }

6. 部署与监控

6.1 Linux生产环境部署

systemd服务配置：

[Unit] Description=Chat Application After=syslog.target network.target [Service] User=appuser ExecStart=/usr/bin/java -jar /opt/app/chat-app.jar SuccessExitStatus=143 [Install] WantedBy=multi-user.target

Nginx反向代理：

map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { location /ws/ { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } }

6.2 监控指标

关键监控项：

• 活跃连接数
• 消息吞吐量
• 平均响应延迟
• 异常连接率

Prometheus配置：

metrics: enable: true export: prometheus prometheus: step: 1m descriptions: true

7. 前端集成方案

7.1 STOMP客户端实现

const client = new StompJs.Client({ brokerURL: 'ws://yourdomain.com/ws', reconnectDelay: 5000, heartbeatIncoming: 4000, heartbeatOutgoing: 4000 }); client.onConnect = (frame) => { client.subscribe('/user/queue/messages', (message) => { showMessage(JSON.parse(message.body)); }); }; function sendMessage(content) { client.publish({ destination: '/app/chat', body: JSON.stringify({ content: content, timestamp: new Date().getTime() }) }); }

7.2 消息状态管理

Vuex状态设计：

const store = new Vuex.Store({ state: { messages: {}, unreadCount: 0 }, mutations: { addMessage(state, {sessionId, message}) { if(!state.messages[sessionId]) { Vue.set(state.messages, sessionId, []); } state.messages[sessionId].push(message); if(!message.read) { state.unreadCount++; } } } });

8. 测试策略

8.1 单元测试用例

WebSocket测试：

@SpringBootTest @AutoConfigureMockMvc class WebSocketTests { @Autowired private MockMvc mockMvc; @Test void testMessageDelivery() throws Exception { // 模拟用户登录 String token = obtainToken(); // 建立WebSocket连接 WebSocketSession session = mockMvc .perform(get("/ws/message") .header("Authorization", token)) .andExpect(request().asyncStarted()) .andReturn() .getAsyncResult(); // 发送测试消息 session.sendMessage(new TextMessage("test")); // 验证响应 TextMessage response = (TextMessage)session.receive(); assertNotNull(response.getPayload()); } }

8.2 压力测试

JMeter测试计划：

• 模拟1000并发用户
• 消息发送频率：5条/秒
• 测试时长：10分钟
• 关键指标：
  • 平均响应时间 < 200ms
  • 错误率 < 0.1%
  • 内存占用 < 2GB

9. 扩展方向

9.1 集群化部署方案

Redis发布订阅：

@Configuration public class RedisConfig { @Bean public RedisMessageListenerContainer container( RedisConnectionFactory factory, MessageListenerAdapter adapter) { RedisMessageListenerContainer container = new RedisMessageListenerContainer(); container.setConnectionFactory(factory); container.addMessageListener(adapter, new ChannelTopic("chat")); return container; } }

9.2 移动端适配

Flutter集成：

final stompClient = StompClient( config: StompConfig( url: 'ws://yourdomain.com/ws', onConnect: (frame) { stompClient.subscribe( destination: '/user/queue/messages', callback: (message) { print('Received: ${message.body}'); } ); } ) );

10. 故障排查指南

常见问题处理：

1. 连接频繁断开

   • 检查心跳配置
   • 验证网络防火墙设置
   • 调整Nginx超时参数

2. 消息延迟高

   • 检查消息队列积压情况
   • 优化数据库索引
   • 增加应用节点

3. 内存泄漏

   • 分析堆转储文件
   • 检查Session未正常关闭
   • 验证消息缓存清理机制

诊断命令：

# 查看网络连接 netstat -anp | grep java # 分析线程堆栈 jstack <pid> > thread_dump.log # 内存分析 jmap -histo:live <pid>