企业实际生产中，怎样实现的前后端通过websocket通讯

本文链接：https://blog.youkuaiyun.com/samsung_samsung/article/details/130949902

在实际的生产环境中，为了保证 WebSocket 服务的高可用性以及系统的伸缩性，通常需要使用分布式架构。

以下是一个基于 Spring Boot、WebSocket 和 RabbitMQ 的分布式架构设计：
整个系统分为四个部分：消息代理、负载均衡器、WebSocket 服务节点和前端客户端。

消息代理使用 RabbitMQ，负责将客户端发送的消息转发到各个 WebSocket 服务节点，并将服务节点返回的响应消息发送给客户端。

负载均衡器使用 Nginx，在多个 WebSocket 服务节点之间进行请求转发，同时采用健康检查等机制确保每个节点的正常运行。

WebSocket 服务节点负责处理客户端发送的消息，处理完成后将响应消息发送到 RabbitMQ 上，由消息代理转发给客户端。每个节点都可以独立部署和运行，通过 RabbitMQ 实现节点之间数据同步等功能。

前端客户端使用 Vue.js 和 Stomp.js，向负载均衡器发送 WebSocket 请求并接收响应消息。

下面是代码实现：

后端代码

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 配置 RabbitMQ 消息代理
        config.enableStompBrokerRelay("/topic")
            .setRelayHost("rabbit-host")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 设置 WebSocket 映射路径，并启用 SockJS 支持
        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }
}

@Component
public class WebSocketMessageListener {
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/sendMessage")
    public void sendMessage(String message) {
        // 处理客户端发送的消息
        System.out.println("Received message: " + message);

        // 返回响应消息
        messagingTemplate.convertAndSend("/topic/messages", "Hello, " + message + "!");
    }
}

在上述代码中，使用了 Spring Boot、WebSocket 和 Spring Messaging 相关的注解和接口。其中，configureMessageBroker() 方法用于配置 RabbitMQ 消息代理；registerStompEndpoints() 方法用于注册 WebSocket 映射路径。

WebSocketMessageListener 类使用 @MessageMapping 注解映射 “/sendMessage” 路径的消息，并通过 messagingTemplate 将响应消息发送到 “/topic/messages” 路径。

前端代码

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="send">发送</button>
    <p v-for="(response, index) in responses" :key="index">{{ response }}</p>
  </div>
</template>

<script>
import SockJS from "sockjs-client";
import Stomp from "stompjs";

export default {
  data() {
    return {
      message: "",
      responses: []
    };
  },
  mounted() {
    // 设置 WebSocket 连接
    this.stompClient = Stomp.over(
      new SockJS("//localhost/ws")
    );

    this.stompClient.connect({}, frame => {
      console.log("Connected to WebSocket");
      // 订阅响应消息
      this.stompClient.subscribe("/topic/messages", response =>
        this.responses.push(response.body)
      );
    });
  },
  methods: {
    send() {
      // 向服务端发送消息
      this.stompClient.send("/app/sendMessage", {}, this.message);
    }
  }
};
</script>