在实际的生产环境中,为了保证 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>
在前端代码中,使用 Vue.js 和 Stomp.js 与后台进行通讯。在 mounted() 方法中,使用 SockJS 和 Stomp 实现 WebSocket 连接,并订阅 “/topic/messages” 路径的响应消息。
在 send() 方法中,使用 Stomp 发送消息到 “/app/sendMessage” 路径。
需要注意的是,由于使用了 RabbitMQ 作为消息代理,因此需要提前安装和配置 RabbitMQ,并将其运行在相应的主机上。