Dans la production réelle des entreprises, comment réaliser la communication frontale et back - end via websocket ?

Dans
un environnement de production réel, afin d'assurer la haute disponibilité du service WebSocket et l'évolutivité du système, il est généralement nécessaire d'utiliser une architecture distribuée.

Voici une conception d'architecture distribuée basée sur Spring Boot, WebSocket et RabbitMQ : L'
ensemble du système est divisé en quatre parties : courtier de messages, équilibreur de charge, nœud de service WebSocket et client frontal.

Le courtier de messages utilise RabbitMQ, qui est responsable du transfert des messages envoyés par le client à chaque nœud de service WebSocket et de l'envoi du message de réponse renvoyé par le nœud de service au client.

L'équilibreur de charge utilise Nginx pour transférer les requêtes entre plusieurs nœuds de service WebSocket et utilise également des mécanismes tels que des vérifications de l'état pour garantir le fonctionnement normal de chaque nœud.

Le nœud de service WebSocket est responsable du traitement des messages envoyés par le client. Une fois le traitement terminé, le message de réponse est envoyé à RabbitMQ et transmis au client par l'agent de message. Chaque nœud peut être déployé et exécuté indépendamment, et des fonctions telles que la synchronisation des données entre les nœuds peuvent être réalisées via RabbitMQ.

Le client frontal utilise Vue.js et Stomp.js pour envoyer des requêtes WebSocket à l'équilibreur de charge et recevoir des messages de réponse.

Voici l'implémentation du code :

code back-end

@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 + "!");
    }
}

Dans le code ci-dessus, les annotations et interfaces liées à Spring Boot, WebSocket et Spring Messaging sont utilisées. Parmi elles, la méthode configureMessageBroker() est utilisée pour configurer le courtier de messages RabbitMQ ; la méthode registerStompEndpoints() est utilisée pour enregistrer le chemin de mappage WebSocket.

La classe WebSocketMessageListener utilise l'annotation @MessageMapping pour mapper les messages du chemin « /sendMessage » et envoie le message de réponse au chemin « /topic/messages » via le modèle de messagerie.

code frontal

<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>

Dans le code front-end, Vue.js et Stomp.js sont utilisés pour communiquer avec le backend. Dans la méthode Mounted(), utilisez SockJS et Stomp pour implémenter la connexion WebSocket et abonnez-vous au message de réponse du chemin "/topic/messages".

Dans la méthode send(), utilisez Stomp pour envoyer le message vers le chemin "/app/sendMessage".

Il convient de noter que puisque RabbitMQ est utilisé comme courtier de messages, RabbitMQ doit être installé et configuré à l'avance et exécuté sur l'hôte correspondant.

Guess you like

Origin blog.csdn.net/samsung_samsung/article/details/130949902