WebSocket多服务实例下的消息推送

最近在做一个项目,涉及到前后端的消息同步、推送,进而我们选择使用webSocket的方案进行实现,但是当websocket服务端部署在多个实例下,会出现前端socket意外断开导致无法收到消息的情况。手下我们先说我们的实现方案:

1.客户端(通过websocket,与后端的wensocket服务端建立链接,)请注意因为后端为多实例使用nginx进行负载均衡,需要注意的是ngx按照如下配置,负责无法进行正常的链接

 server {
        listen 86;
        server_name  127.0.0.1;
        location /websocket/222 {
        
            proxy_connect_timeout 20s;
            proxy_send_timeout 60s;
            proxy_read_timeout 60s;
            
            proxy_redirect off;
            proxy_http_version 1.1;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://websocket_backend;
        }

 proxy_set_header Host $host:$server_port;这个配置很重要,如果不配置会出现websocket无法链接。

2.注意服务端接收到客户端的心跳消息,不能使用异步推送的方式,这样会导致链接断开

@OnMessage
public void onMessage(String message, Session session) {
    System.out.println("接收到消息:" + message);
    // 处理收到的消息
    // 可以通过session发送消息给客户端
    try {
        Map map = new HashMap();
        map.put("Received: ","8092");
        //session.getBasicRemote().sendText("Received: " + message);
        JSONObject jsonObject = new JSONObject(map);
        //session.getBasicRemote().sendText("Received: " + message);
        session.getBasicRemote().sendObject(jsonObject);
        //session.getBasicRemote().sendObject(map);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

3。因为使用的mq进行广播消息,使用exchange的机制,可以保证所有消费者只要是绑定到了对应的exchange上的队列都能消费,来解决多实例下的消息推送问题

@RabbitHandler
@RabbitListener(bindings = @QueueBinding(value = @Queue(),
        exchange = @Exchange(value = "com.jihaixiang.test",
                type = ExchangeTypes.FANOUT)), concurrency = "10")
public void receiveMessage(String message) {
    System.out.println("Received message3: " + message);
}

4.在往mq中发送消息的时候需要保持routekeying为空,这样所有消费者都能收到消息

rabbitTemplate.convertAndSend("com.jihaixiang.test", "", "测试消息");

5.创建exchange

package com.jihaixiang.bootmybatis.configure;

import org.springframework.amqp.core.FanoutExchange;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @author jihaixiang
 * @date 2024-03-12 22:29
 */
@Configuration
public class RabbitConfig {


    /**
     * 定义交换机
     * @return
     */
    @Bean
    public FanoutExchange orderWebsocketSendMessageExchange() {
        return new FanoutExchange("com.jihaixiang.test");
    }

}
  • 9
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一种流行的JavaScript框架,用于构建用户界面。它提供了一种简洁、灵活的方式来实现前端开发。WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议,可以实现实时消息推送。 在Vue.js中实现WebSocket消息推送可以通过以下步骤: 1. 首先,安装WebSocket库。可以使用npm或yarn来安装,例如:`npm install vue-native-websocket`。 2. 在Vue.js的入口文件(通常是main.js)中导入WebSocket库,并配置WebSocket连接。示例代码如下: ```javascript import VueNativeSock from 'vue-native-websocket'; Vue.use(VueNativeSock, 'ws://localhost:8080', { format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000, }); ``` 上述代码中,我们使用了`vue-native-websocket`库,并配置了WebSocket连接的URL、数据格式以及重连选项。 3. 在Vue组件中使用WebSocket。可以通过在组件中添加`this.$socket`来访问WebSocket实例,并监听相应的事件。例如: ```javascript export default { mounted() { this.$socket.addEventListener('message', this.handleMessage); }, methods: { handleMessage(event) { // 处理接收到的消息 }, sendMessage(message) { this.$socket.send(message); }, }, }; ``` 上述代码中,我们在组件的`mounted`钩子函数中监听了`message`事件,并定义了处理接收到消息的方法`handleMessage`。同时,我们还定义了一个`sendMessage`方法来发送消息。 这样,当WebSocket连接建立后,就可以通过`this.$socket.send()`方法发送消息,并通过`this.$socket.addEventListener()`方法监听接收到的消息

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值