（超详细）SpringBoot+RabbitMQ+Stomp+JS实现前端消息推送

最新推荐文章于 2024-04-12 03:28:40 发布

在路上的Coder

最新推荐文章于 2024-04-12 03:28:40 发布

阅读量6.5k

点赞数 4

分类专栏： MQ 文章标签： RabbitMQ Stomp SpringBoot 消息推送

本文链接：https://blog.csdn.net/hellogbaby/article/details/102913144

版权

MQ 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

应用场景：

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

实现：

一般的实现方式有多种，包括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 交换器创建了三个随机队列

小结：

技术有限、欢迎点评

在路上的Coder

关注

4
点赞
踩
35

收藏

觉得还不错? 一键收藏
7
评论
（超详细）SpringBoot+RabbitMQ+Stomp+JS实现前端消息推送

应用场景：拥有系统通告或者评价、留言等用户交互功能的系统，常常会要求在通告发布的同时，在用户的系统界面友善的弹出通告消息，这种业务需求称之为消息实时推送实现：一般的实现方式有多种，包括AJAX的短轮询、长轮询，这些方式都可以实现功能，但是都会对服务器端造成压力，这篇文章主要介绍使用RabbitMQ来实现消息实时推送业务逻辑图：第一步：客户端管理员发布消息js代码$.ajax({ ...
复制链接

扫一扫