应用场景：

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

实现：

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

业务逻辑图：

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

第一步：客户端管理员发布消息

js代码

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


后端业务代码(使用fanout交换器——发布/订阅模式)：

首先需要配置RabbitMQ和SpringBoot的整合，这里不多加介绍，​

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​​

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

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

安装完成之后重启MQ，在控制台可以看到如下信息

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

好了，接下来开始js获取MQ消息：

创建3个HTML文件，来表示三个客户端

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

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的信息

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

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

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

2、打开MQ控制台，可以看到 testMsg 交换器创建了三个随机队列

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