WebSocket在Java Spring Boot+Vue框架中实现消息推送功能

<dependency>  
    <groupId>org.springframework.boot</groupId>  
    <artifactId>spring-boot-starter-websocket</artifactId>  
</dependency>

@Configuration  
@EnableWebSocket  
public class WebSocketConfig implements WebSocketConfigurer {  
  
    @Override  
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {  
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");  
    }  
}

@Component  
public class MyWebSocketHandler extends TextWebSocketHandler {  
  
    private static final ConcurrentHashMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>();  
  
    @Override  
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {  
        sessions.put(session.getId(), session);  
        System.out.println("WebSocket session established: " + session.getId());  
    }  
  
    @Override  
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {  
        // 处理接收到的消息  
        System.out.println("Received message: " + message.getPayload());  
    }  
  
    @Override  
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {  
        sessions.remove(session.getId());  
        System.out.println("WebSocket session closed: " + session.getId());  
    }  
  
    // 发送消息到指定客户端  
    public void sendMessageToUser(String sessionId, String message) throws IOException {  
        WebSocketSession session = sessions.get(sessionId);  
        if (session != null && session.isOpen()) {  
            session.sendMessage(new TextMessage(message));  
        }  
    }  
}

@RestController  
@RequestMapping("/api/message")  
public class MessageController {  
  
    @Autowired  
    private MyWebSocketHandler webSocketHandler;  
  
    @PostMapping("/push")  
    public ResponseEntity<?> pushMessage(@RequestParam String sessionId, @RequestParam String message) {  
        try {  
            webSocketHandler.sendMessageToUser(sessionId, message);  
            return ResponseEntity.ok("Message sent successfully");  
        } catch (IOException e) {  
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to send message");  
        }  
    }  
}

npm install vue-native-websocket

import VueNativeSock from 'vue-native-websocket'  
  
Vue.use(VueNativeSock, 'ws://localhost:8080/ws', {  
    reconnection: true,  
    format: 'json',  
    connectManually: true  
});  
  
new Vue({  
    // Vue实例配置  
});

<template>  
  <div>  
    <h1>Messages</h1>  
    <ul>  
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      messages: [] // 用于存储接收到的消息  
    };  
  },  
  mounted() {  
    // 如果需要手动连接WebSocket，可以在这里调用  
    // this.$connect();  
  
    // 监听WebSocket的message事件  
    this.$options.sockets.onmessage = (event) => {  
      // 假设服务器发送的是纯文本消息  
      const message = event.data;  
      // 将新消息添加到messages数组中  
      this.messages.push(message);  
  
      // 如果需要滚动到最新的消息，可以添加如下代码  
      // 注意：这取决于你的页面布局和CSS  
      // this.$nextTick(() => {  
      //   const messagesList = this.$el.querySelector('ul');  
      //   if (messagesList) {  
      //     messagesList.scrollTop = messagesList.scrollHeight;  
      //   }  
      // });  
    };  
  
    // 如果WebSocket是自动连接的，上面的$connect()调用可能是不必要的。  
    // 但是，如果你需要在组件挂载时做一些额外的设置或检查，你可以在这里进行。  
  },  
  beforeDestroy() {  
    // 组件销毁前断开WebSocket连接（如果之前手动连接了的话）  
    // 注意：如果WebSocket是自动管理的（如vue-native-websocket插件），  
    // 这可能不是必需的，因为插件通常会在Vue实例销毁时自动处理。  
    // 但为了完整性，这里还是展示一下如何手动断开连接  
    // this.$disconnect();  
  
    // 移除事件监听器（可选，取决于你是否需要在组件销毁时清理）  
    // this.$options.sockets.offmessage = null;  
    // 注意：vue-native-websocket插件并没有直接提供offmessage这样的方法，  
    // 这里只是为了说明如果需要手动清理事件监听器的概念。  
    // 实际上，你可以通过保存对监听器函数的引用并在需要时调用removeEventListener来实现。  
  }  
};  
</script>  
  
<style scoped>  
/* 你的样式 */  
</style>