多个VUE页面推送消息给JAVA服务(websocket)

如果多个Vue应用需要向Java后端推送数据到不同的主题，并且每个主题有独立的处理逻辑，可以在Vue前端和Java后端分别进行一些调整以支持多主题的消息处理。

在Vue前端，可以为不同的操作或组件创建独立的WebSocket逻辑，以向不同的主题发送消息。这里展示如何为不同场景定义不同的消息发送方法。

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
    };
  },
  mounted() {
    this.connectToSocketServer();
  },
  beforeDestroy() {
    this.socket.disconnect();
  },
  methods: {
    connectToSocketServer() {
      this.socket = io('http://your-java-backend-url:port'); // 替换为你的Java后端地址和端口
      this.socket.on('connect', () => {
        console.log('WebSocket已连接');
      });
      // 可以在这里添加针对不同主题的监听处理
    },
    sendMessageToTopic(topic, message) {
      if (this.socket.connected) {
        this.socket.emit(`toTopic-${topic}`, message); // 发送到特定主题
      } else {
        console.error('WebSocket未连接');
      }
    },
  },
};

在Vue组件中可以根据需要调用`sendMessageToTopic`方法，并传入不同的主题名和消息内容。

在Java后端，需要根据不同的消息主题映射到不同的处理方法。Spring框架可以通过`@MessageMapping`注解来区分不同的主题。

添加依赖

在pom.xml中添加Spring Web和WebSocket相关依赖：

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

WebSocket配置

创建一个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();
    }
}

@Controller
public class WebSocketMessageController {

    @MessageMapping("/toTopic-topic1") // 为topic1定义的处理逻辑
    @SendTo("/topic/topic1Responses") // 将响应发送到这个主题
    public String handleTopic1Message(String message) {
        System.out.println("接收到topic1的消息：" + message);
        return "服务端处理topic1的结果：" + message;
    }

    @MessageMapping("/toTopic-topic2") // 为topic2定义的处理逻辑
    @SendTo("/topic/topic2Responses")
    public String handleTopic2Message(String message) {
        System.out.println("接收到topic2的消息：" + message);
        return "服务端处理topic2的结果：" + message;
    }
    // 根据需要添加更多主题的处理方法
}

确保在Vue前端发送消息时指定的主题与Java后端处理逻辑中定义的`@MessageMapping`路径相匹配。这样，每个主题的消息就会被后端独立处理，并可根据需要将处理结果广播到不同的响应主题上。

通过这种方式可以灵活地处理来自Vue前端的不同WebSocket消息，并为每个主题定制处理逻辑。