vue 前端接入WebSocket 实现公告推送

### Vue 前端通过 WebSocket 实现公告推送功能 在 Vue 项目中实现基于 WebSocket 的公告推送功能，可以通过以下方式完成： #### 后台消息推送机制概述 WebSocket 提供了一种全双工通信协议，允许服务器向客户端主动推送数据。这种特性非常适合实现实时更新的功能，比如公告推送[^5]。 #### Vue 前端 WebSocket 配置示例 以下是 Vue 前端配置 WebSocket 进行公告推送的具体代码示例： ```javascript <template> <div> <h1>公告推送</h1> <ul id="messages"> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> </template> <script> export default { data() { return { websocket: null, messages: [], }; }, created() { this.initWebSocket(); }, destroyed() { this.websocket.close(); // 销毁 WebSocket 连接 }, methods: { initWebSocket() { const userName = 'guest'; // 用户名可以根据实际需求动态设置 this.websocket = new WebSocket(`ws://localhost:8801/myproject/websocket/${userName}`); // 替换为实际的 WebSocket URL[^3] this.websocket.onopen = () => { console.log('WebSocket 已连接'); }; this.websocket.onerror = (error) => { console.error('WebSocket 发生错误:', error); }; this.websocket.onmessage = (event) => { const message = event.data; this.messages.push(message); // 将新消息推入列表 console.log('收到新的公告:', message); }; this.websocket.onclose = () => { console.log('WebSocket 已断开'); }; }, }, }; </script> <style scoped> #messages li { list-style-type: none; } </style> ``` 上述代码展示了如何在 Vue 组件中初始化 WebSocket，并处理 `onopen`、`onmessage` 和 `onclose` 等事件[^2]。 #### Java Spring Boot 后端 WebSocket 配置示例 如果后端采用的是 Spring Boot，则可以按照以下方式进行 WebSocket 配置： ##### 创建 WebSocket 配置类 ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new AnnouncementHandler(), "/websocket/{username}").setAllowedOrigins("*"); } } ``` ##### 自定义 WebSocket 处理器 ```java import org.springframework.stereotype.Component; import org.springframework.web.socket.TextMessage; import org.springframework.web.socket.WebSocketSession; import org.springframework.web.socket.handler.TextWebSocketHandler; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; @Component public class AnnouncementHandler extends TextWebSocketHandler { private static final CopyOnWriteArraySet<WebSocketSession> sessions = new CopyOnWriteArraySet<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException { String payload = message.getPayload(); broadcast(payload); // 推送消息给所有已连接的客户端 } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } public void broadcast(String announcement) { for (WebSocketSession session : sessions) { try { if (session.isOpen()) { session.sendMessage(new TextMessage(announcement)); } } catch (IOException e) { e.printStackTrace(); } } } } ``` 以上代码实现了 WebSocket 的基本逻辑以及广播消息的功能。 #### 注意事项 - **跨域问题**：确保前后端之间的 CORS 设置正确，避免因跨域限制导致 WebSocket 连接失败。 - **心跳检测**：为了保持 WebSocket 连接稳定，建议加入心跳包机制定期检测连接状态。 - **异常处理**：对于网络中断或其他意外情况，应设计合理的重连策略。 --- ###