前几天粉丝群里有个小伙伴问过：<code>web</code> 页面的未读消息（小红点）怎么实现比较简单，刚好本周手头有类似的开发任务，索性就整理出来供小伙伴们参考，没准哪天就能用得上呢。
之前在 《springboot + rabbitmq 做智能家居》 中说过可以用 <code>rabbitmq</code> 的 <code>MQTT</code> 协议做智能家居的指令推送，里边还提到过能用 <code>MQTT</code> 协议做 <code>web</code> 的消息推送，而未读消息（<code>小红点</code>）功能刚好应用到实时消息推送了。
<code>MQTT</code> 协议就不再赘述了，没接触过的同学翻翻前边的文章温习一下吧，今天还是主要以实践为主！
<code>web</code> 端实时消息推送，常用的实现方式比较多，但万变不离其宗，底层基本上还是依赖于 <code>websocket</code>，<code>MQTT</code> 协议也不例外。
<code>RabbitMQ</code>的基础搭建就不详细说了，自行百度一步一步搞问题不大，这里主要说一下两个比较重要的配置。
默认情况下<code>RabbitMQ</code>是不开启<code>MQTT</code> 协议的，所以需要我们手动的开启相关的插件，而<code>RabbitMQ</code>的<code>MQTT</code> 协议分为两种。
第一种 <code>rabbitmq_mqtt</code> 提供与后端服务交互使用，对应端口<code>1883</code>。
第二种 <code>rabbitmq_web_mqtt</code> 提供与前端交互使用，对应端口<code>15675</code>。
在 <code>RabbitMQ</code> 管理后台看到如下的显示，就表示<code>MQTT</code> 协议开启成功，到这中间件环境就搭建完毕了。
协议对应端口号
使用<code>MQTT</code> 协议默认的交换机 <code>Exchange</code> 为 <code>amp.topic</code>，而我们订阅的主题会在 <code>Queues</code> 注册一个客户端队列，路由 <code>Routing key</code> 就是我们设置的主题。
交换机信息
<code>web</code> 端实时消息推送一般都是单向的推送，前端接收服务端推送的消息显示即可，所以就只实现消息发送即可。
引入 <code>spring-integration-mqtt</code>、<code>org.eclipse.paho.client.mqttv3</code> 两个工具包实现
消息的发送比较简单，主要是应用到 <code>@ServiceActivator</code> 注解，需要注意<code>messageHandler.setAsync</code>属性，如果设置成 <code>false</code>，关闭异步模式发送消息时可能会阻塞。
<code>MQTT</code> 对外提供发送消息的 <code>API</code> 时，需要使用 <code>@MessagingGateway</code> 注解，去提供一个消息网关代理，参数 <code>defaultRequestChannel</code> 指定发送消息绑定的<code>channel</code>。
可以实现三种<code>API</code>接口，<code>payload</code> 为发送的消息，<code>topic</code> 发送消息的主题，<code>qos</code> 消息质量。
前端使用与服务端对应的工具 <code>paho-mqtt</code> <code>mqttws31.js</code>实现，实现方式与传统的 <code>websocket</code> 方式差不多，核心方法 <code>client = new Paho.MQTT.Client</code> 和 各种监听事件，代码比较简洁。
注意：要保证前后端 <code>clientId</code>的全局唯一性，我这里就简单用随机数解决了
前后端的代码并不多，接下来我们测试一下，弄了个页面看看效果。
首先用 <code>postman</code> 模拟后端发送消息
模拟发送消息
再看一下前端订阅消息的效果，看到消息被实时推送到了前端，这里只做了未读消息数量统计，一般还会做未读消息详情列表。
实时消息推送动图
未读消息是一个十分常见的功能，不管是 <code>web</code>端还是移动端系统都是必备的模块，<code>MQTT</code> 协议只是其中的一种实现方式，还是有必要掌握一种方法。具体用什么工具实现还是要看具体的业务场景和学习成本，像我用<code>RabbitMQ</code> 做还考虑到一些运维成本在里边。
本文完整代码地址：<code>https://github.com/chengxy-nds/Springboot-Notebook/tree/master/springboot-mqtt-messagepush</code>