zoukankan      html  css  js  c++  java
  • (超详细)SpringBoot+RabbitMQ+Stomp+JS实现前端消息推送

    应用场景:

    拥有系统通告或者评价、留言等用户交互功能的系统,常常会要求在通告发布的同时,在用户的系统界面友善的弹出通告消息,这种业务需求称之为消息实时推送

    实现:

    一般的实现方式有多种,包括AJAX的短轮询、长轮询,这些方式都可以实现功能,但是都会对服务器端造成压力,这篇文章主要介绍使用RabbitMQ来实现消息实时推送

    业务逻辑图:

    在这里插入图片描述
    第一步:客户端管理员发布消息
    js代码

    $.ajax({ 
    	 url: "xxx/xxx/msgController/publish",  //后端业务接口
    	 context: document.body,
    	 success: function(){
            console.log('消息发布成功');
          }}); 

    后端业务代码(使用fanout交换器——发布/订阅模式):
    首先需要配置RabbitMQ和SpringBoot的整合,这里不多加介绍,详情可看另一篇文章–>[整合SpringBoot+RabbitMQ]

    final String ExchangeName = "testMsg"; // 交换器名称
    Connection conn = connectionFactoryUtil.GetRabbitConnection();
    Channel channel = conn.createChannel();
    channel.exchangeDeclare(ExchangeName, "fanout"); // 声明fanout交换器
    String message = "今天下午五点开会,都不要迟到";
    channel.basicPublish(ExchangeName, "", null, message.getBytes("UTF-8"));
    
    //把消息再存入数据库
    xxxMapper.insert(xxxxx); //sql不多加说明 

    这一步走完,信息已经写入到MQ的交换器中

    注意这里并没有创建队列,因为按照业务需求,管理员发布了一条消息,全部的在线用户都会消费这个消息,也就是一个生产者,多个消费者的模式,如果在这里创建队列,则会产生一个用户获取到消息之后,队列消息清空,别的用户就无法获取这个消息了。

    第二步:客户端从MQ获取消息
    首先配置环境,需要用到Stomp
    RabbitMQ安装Stomp插件
    执行命令
    rabbitmq-plugins enable rabbitmq_web_stomp
    rabbitmq-plugins enable rabbitmq_web_stomp_examples
    在这里插入图片描述
    在这里插入图片描述
    安装完成之后重启MQ,在控制台可以看到如下信息
    在这里插入图片描述
    好了,接下来开始js获取MQ消息:
    创建3个HTML文件,来表示三个客户端
    在这里插入图片描述
    html内容:

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>My WebSocket</title>
    </head>
     
    <body style="text-align:center">
    我是用户11111111111111<br/>
    我从MQ读取到的消息是:
    <span id="msg"></span>
    <div id="message">
    </div>
    </body>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    // 初始化 ws 对象
    var ws = new WebSocket('ws://localhost:15674/ws');
     
    // 获得Stomp client对象
    var client = Stomp.over(ws);
     
    // 定义连接成功回调函数
    var on_connect = function(x) {
        //data.body是接收到的数据
        client.subscribe("/exchange/testMsg", function(data) {
            var msg = data.body;
            $("#msg").text(msg);
        });
    };
     
    // 定义错误时回调函数
    var on_error =  function() {
        console.log('error');
    };
    // 连接RabbitMQ
    client.connect('guest', 'guest', on_connect, on_error, '/');
    </script>
    </html>

    注意:js请求的是后端新增的交换器

    client.subscribe("/exchange/testMsg", function(data) {
            var msg = data.body;
            $("#msg").text(msg);
        });

    原理:QabbitMQ中的fanout交换器——发布/订阅模式,默认是没有队列的,当有n个消费者连接交换器的时候,交换器会自动创建n个队列供一个消费者使用,队列名是一串随机字符串
    client除了subscribe方法之外,还有一些方法可供选择
    client.subscribe(destination,callback,headers) :订阅消息
    client.send(destination,headers,body):发布消息
    client.unsubscribe(id):取消订阅,id为订阅时返回的编号
    client.onreceive:默认接收回调从临时队列获取消息

    打开三个html页面,可以看到如下结果:

    1、已经拿到MQ的信息
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    2、打开MQ控制台,可以看到 testMsg 交换器创建了三个随机队列
    在这里插入图片描述

     转自 :https://blog.csdn.net/hellogbaby/article/details/102913144?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

  • 相关阅读:
    杨辉三角
    手动实现md5加密
    戳气球
    重构字符串
    四数相加 II
    背包问题 II
    组合总和 IV
    背包问题 V
    背包问题
    Win 10安装Python及环境变量配置
  • 原文地址:https://www.cnblogs.com/javalinux/p/14313007.html
Copyright © 2011-2022 走看看