Spring Boot 3 + Vue 3 整合 WebSocket (STOMP协议) 实现广播和点对点实时消息

// 在Spring Boot配置类中添加WebSocket的配置
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 客户端订阅地址的前缀信息
        config.setApplicationDestinationPrefixes("/app"); // 客户端发送信息的前缀
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // 注册STOMP协议的节点，并映射指定的URL，并指定使用SockJS协议
    }
}
 
// Vue 3中使用WebSocket发送和接收消息
<template>
  <div>
    <input v-model="message" placeholder="输入消息" />
    <button @click="sendMessage">发送</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import SockJS from 'sockjs-client';
import Stomp from 'webstomp-client';
 
export default {
  setup() {
    const message = ref('');
    let stompClient = null;
 
    // 建立WebSocket连接
    const connect = () => {
      const socket = new SockJS('http://localhost:8080/ws');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, frame => {
        console.log('Connected: ' + frame);
        // 订阅/topic/greetings，用于接收广播消息
        stompClient.subscribe('/topic/greetings', greeting => {
          // 处理接收到的消息
          console.log(JSON.parse(greeting.body).content);
        });
      });
    };
 
    // 发送消息
    const sendMessage = () => {
      stompClient.send('/app/hello', {}, JSON.stringify({ 'content': message.value }));
    };
 
    // 组件被销毁时断开连接
    onUnmounted(() => {
      if (stompClient !== null) {
        stompClient.disconnect();
      }
      console.log('Disconnected');
    });
 
    connect();
 
    return { message, sendMessage };
  }
};
</script>

这个代码实例展示了如何在Spring Boot后端使用@EnableWebSocketMessageBroker注解来配置WebSocket消息代理，并在Vue 3前端使用SockJS和Stomp.js客户端来连接和发送消息。同时，它演示了如何通过stompClient.subscribe方法来订阅特定的目的地，以接收广播和点对点消息。