应用场景:
拥有系统通告或者评价、留言等用户交互功能的系统,常常会要求在通告发布的同时,在用户的系统界面友善的弹出通告消息,这种业务需求称之为消息实时推送
实现:
一般的实现方式有多种,包括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