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

Spring Boot 3.0.5 + Vue 3 实战：手把手教你搞定WebSocket消息推送（含完整前后端代码）

news 2026/7/1 1:44:24

Spring Boot 3.0.5与Vue 3深度整合：WebSocket全栈开发实战指南

在当今实时交互应用日益普及的背景下，WebSocket技术已成为现代Web开发不可或缺的一环。本文将带领你深入探索如何利用Spring Boot 3.0.5和Vue 3构建一个完整的实时消息推送系统，从基础配置到高级功能实现，涵盖前后端所有关键环节。

1. 环境准备与项目初始化

1.1 Spring Boot 3.0.5项目配置

首先创建一个新的Spring Boot项目，确保使用3.0.5版本。与旧版本相比，Spring Boot 3.x系列在WebSocket支持上有显著变化，特别是jakarta包的引入：

<!-- pom.xml关键依赖 --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.0.5</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <!-- 其他必要依赖 --> </dependencies>

注意：Spring Boot 3.x使用jakarta.websocket而非javax.websocket，这是与2.x版本的重要区别。

1.2 Vue 3项目搭建

在Vue 3项目中，我们有两种主要方式处理WebSocket连接：

  1. 使用原生WebSocket API
  2. 通过vue-native-websocket库
# 创建Vue项目 npm init vue@latest websocket-demo cd websocket-demo npm install

2. Spring Boot后端实现

2.1 WebSocket基础配置

创建WebSocket配置类启用WebSocket支持：

@Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }

2.2 核心服务实现

实现WebSocket端点服务，处理连接生命周期：

@ServerEndpoint(value = "/ws/{userId}", encoders = {MessageEncoder.class}) @Component public class WebSocketEndpoint { private static final Logger log = LoggerFactory.getLogger(WebSocketEndpoint.class); private static final ConcurrentMap<String, Session> sessions = new ConcurrentHashMap<>(); @OnOpen public void onOpen(Session session, @PathParam("userId") String userId) { sessions.put(userId, session); log.info("用户{}连接建立，当前在线用户数：{}", userId, sessions.size()); } @OnClose public void onClose(@PathParam("userId") String userId) { sessions.remove(userId); log.info("用户{}断开连接，剩余在线用户数：{}", userId, sessions.size()); } @OnError public void onError(Session session, Throwable error) { log.error("WebSocket错误：", error); } public static void sendMessage(String userId, Object message) { Session session = sessions.get(userId); if (session != null && session.isOpen()) { try { session.getBasicRemote().sendObject(message); } catch (Exception e) { log.error("消息发送失败", e); } } } }

2.3 消息编码与业务集成

实现消息编码器处理复杂对象传输：

public class MessageEncoder implements Encoder.Text<Message> { private static final ObjectMapper mapper = new ObjectMapper(); @Override public String encode(Message message) throws EncodeException { try { return mapper.writeValueAsString(message); } catch (JsonProcessingException e) { throw new EncodeException(message, "消息编码失败", e); } } // 其他必要方法实现... }

3. Vue 3前端实现

3.1 原生WebSocket实现

在Vue组件中使用原生WebSocket API：

// 在setup函数中 const socket = ref(null); const messages = ref([]); const connectWebSocket = (userId) => { socket.value = new WebSocket(`ws://localhost:8080/ws/${userId}`); socket.value.onopen = (event) => { console.log('连接已建立', event); }; socket.value.onmessage = (event) => { const message = JSON.parse(event.data); messages.value.push(message); }; socket.value.onclose = (event) => { if (event.wasClean) { console.log(`连接正常关闭，code=${event.code}`); } else { console.log('连接异常断开'); // 实现自动重连逻辑 setTimeout(() => connectWebSocket(userId), 5000); } }; socket.value.onerror = (error) => { console.error('WebSocket错误:', error); }; }; // 组件卸载时关闭连接 onBeforeUnmount(() => { if (socket.value) { socket.value.close(); } });

3.2 使用vue-native-websocket库

对于更复杂的需求，可以使用专用库：

npm install vue-native-websocket

然后在Vue应用中配置：

// main.js import VueNativeSock from 'vue-native-websocket'; const app = createApp(App); app.use(VueNativeSock, 'ws://localhost:8080/ws', { reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000, format: 'json' });

在组件中使用：

export default { methods: { sendMessage() { this.$socket.sendObj({ type: 'chat', content: this.message }); } }, sockets: { connect() { console.log('Socket connected'); }, message(data) { console.log('收到消息:', data); } } }

4. 高级功能实现

4.1 心跳检测与断线重连

实现健壮的WebSocket连接需要心跳机制：

// 前端心跳实现 let heartbeatInterval; const startHeartbeat = () => { heartbeatInterval = setInterval(() => { if (socket.value.readyState === WebSocket.OPEN) { socket.value.send(JSON.stringify({ type: 'heartbeat' })); } }, 30000); }; // 修改connectWebSocket函数 const connectWebSocket = (userId) => { // ...原有代码... socket.value.onopen = (event) => { console.log('连接已建立', event); startHeartbeat(); }; socket.value.onclose = (event) => { clearInterval(heartbeatInterval); // ...原有代码... }; };

后端相应处理：

@OnMessage public void onMessage(Session session, String message) { Message msg = parseMessage(message); if ("heartbeat".equals(msg.getType())) { // 更新最后活跃时间 return; } // 处理其他类型消息 }

4.2 消息确认与重发机制

实现可靠的消息传输：

const pendingMessages = new Map(); let messageId = 0; const sendMessageWithAck = (content) => { const msgId = messageId++; const message = { id: msgId, content: content, timestamp: Date.now() }; pendingMessages.set(msgId, { message: message, retries: 0, timer: setTimeout(() => { if (pendingMessages.has(msgId)) { const entry = pendingMessages.get(msgId); if (entry.retries < 3) { entry.retries++; socket.value.send(JSON.stringify(message)); entry.timer = setTimeout(...); // 重置定时器 } else { pendingMessages.delete(msgId); console.error('消息发送失败:', message); } } }, 5000) }); socket.value.send(JSON.stringify(message)); }; // 在消息处理中 socket.value.onmessage = (event) => { const response = JSON.parse(event.data); if (response.ackId) { const entry = pendingMessages.get(response.ackId); if (entry) { clearTimeout(entry.timer); pendingMessages.delete(response.ackId); } } // 处理其他消息... };

4.3 性能优化与安全考虑

WebSocket实现中的关键注意事项：

  • 连接数限制：单个服务器能处理的WebSocket连接数有限，需要考虑水平扩展
  • 消息大小限制：WebSocket帧有大小限制，大消息需要分片
  • 安全措施：
    • 使用wss协议
    • 验证连接来源
    • 实现鉴权机制
// 连接鉴权示例 @OnOpen public void onOpen(Session session, @PathParam("token") String token) { if (!validateToken(token)) { try { session.close(new CloseReason(CloseReason.CloseCodes.VIOLATED_POLICY, "无效凭证")); } catch (IOException e) { log.error("关闭连接失败", e); } return; } // 正常处理连接... }

5. 实战案例：实时通知系统

5.1 后端事件驱动架构

结合Spring事件机制实现解耦：

// 定义事件 public class NotificationEvent extends ApplicationEvent { private final String userId; private final String content; public NotificationEvent(Object source, String userId, String content) { super(source); this.userId = userId; this.content = content; } // getters... } // 事件发布 @Service public class NotificationService { private final ApplicationEventPublisher eventPublisher; public void sendNotification(String userId, String content) { eventPublisher.publishEvent(new NotificationEvent(this, userId, content)); } } // 事件监听 @Component public class NotificationEventListener { @EventListener public void handleNotification(NotificationEvent event) { WebSocketEndpoint.sendMessage(event.getUserId(), new Message("notification", event.getContent())); } }

5.2 前端状态管理

使用Pinia管理WebSocket状态：

// stores/websocket.js export const useWebSocketStore = defineStore('websocket', { state: () => ({ connected: false, notifications: [], unreadCount: 0 }), actions: { handleMessage(message) { if (message.type === 'notification') { this.notifications.push(message); this.unreadCount++; } }, markAsRead() { this.unreadCount = 0; } } }); // 在组件中使用 const wsStore = useWebSocketStore(); socket.value.onmessage = (event) => { const message = JSON.parse(event.data); wsStore.handleMessage(message); };

5.3 完整消息流示例

从用户操作到消息显示的完整流程：

  1. 用户在前端触发某个动作（如提交表单）
  2. 前端通过WebSocket发送请求
  3. 后端处理请求并发布事件
  4. 事件监听器通过WebSocket推送结果
  5. 前端接收消息并更新UI
// 前端发送请求示例 const submitForm = async (formData) => { const requestId = generateRequestId(); socket.value.send(JSON.stringify({ type: 'formSubmit', requestId: requestId, data: formData })); // 等待响应 return new Promise((resolve) => { const handler = (event) => { const response = JSON.parse(event.data); if (response.requestId === requestId) { socket.value.removeEventListener('message', handler); resolve(response); } }; socket.value.addEventListener('message', handler); }); };

在实际项目中，WebSocket的实现细节会根据具体需求有所不同，但核心原理和架构模式是相通的。通过本文介绍的技术方案，你可以构建出高效、可靠的实时Web应用，满足现代用户对即时交互的期望。

http://www.gsyq.cn/news/1611424.html

相关文章：

  • Java中实现html转pdf
  • 2026年值得关注的AI外呼厂商盘点：从云厂商到垂直方案，怎么选更合适？
  • 3-IPV6域名解析
  • 实战掌握Adobe软件激活：全面解析GenP 3.0破解工具高效配置
  • 后端性能瓶颈排查实战：从慢接口到系统优化的完整落地思路
  • 大部分人都在管别人的闲事
  • 而 C++ 就是这种能自举的编程语言
  • 【Claude】Claude Code 代码审查实战指南：一次对话审出 26 个 Bug 的方法论
  • Go模块管理教程
  • 【最新测评】有没有降AI率的靠谱网站推荐？2026年实测15款降AI神器，省钱又高效！
  • CSDN自动化测试_草稿
  • 临沂GEO技术应用与合规解析
  • Docker部署项目实践
  • Docker Compose详解
  • Go协程Goroutine原理
  • C++智能指针开发实践
  • Java锁机制深入分析
  • 文件的权限属性
  • Python列表与元组深度解析
  • M4Markets：合规意识的路径评估
  • 如何通过5个核心技术模块让《环世界》性能提升400%？Performance-Fish深度架构解析
  • React状态管理指南
  • open harmony 项目实战：学习打卡功能如何设计更有激励感
  • Python异常处理完整教程
  • Java垃圾回收机制详解
  • Nginx反向代理教程
  • C++类与对象开发实践
  • React性能优化技巧
  • 别再只盯着内核了！手把手教你用BusyBox为嵌入式Linux打造最小根文件系统
  • MoE稀疏激活原理与工程实践：解密大模型2%参数激活真相