前几天粉丝群里有个小伙伴问过：`web` 页面的未读消息（小红点）怎么实现比较简单，刚好本周手头有类似的开发任务，索性就整理出来供小伙伴们参考，没准哪天就能用得上呢。

之前在 [《springboot + rabbitmq 做智能家居》](https://mp.weixin.qq.com/s?__biz=MzAxNTM4NzAyNg==&mid=2247486353&idx=1&sn=02371acc8048cb15f29285f0505c4958&chksm=9b859b6cacf2127a2799d28830dc6ef0560764d4d29b5d3c742dd7489d66365691c662e70ce6&token=632378703&lang=zh_CN#rd) 中说过可以用 `rabbitmq` 的 `MQTT` 协议做智能家居的指令推送，里边还提到过能用 `MQTT` 协议做 `web` 的消息推送，而未读消息（`小红点`）功能刚好应用到实时消息推送了。

`MQTT` 协议就不再赘述了，没接触过的同学翻翻前边的文章温习一下吧，今天还是主要以实践为主！

![](https://img-blog.csdnimg.cn/20200907183941327.png)

`web` 端实时消息推送，常用的实现方式比较多，但万变不离其宗，底层基本上还是依赖于 `websocket`，`MQTT` 协议也不例外。

## RabbitMQ 搭建
`RabbitMQ `的基础搭建就不详细说了，自行百度一步一步搞问题不大，这里主要说一下两个比较重要的配置。

### 1、开启 mqtt 协议
默认情况下`RabbitMQ `是不开启`MQTT` 协议的，所以需要我们手动的开启相关的插件，而`RabbitMQ `的`MQTT` 协议分为两种。

第一种 `rabbitmq_mqtt` 提供与后端服务交互使用，对应端口`1883`。

```javascript
rabbitmq-plugins enable rabbitmq_mqtt
```
第二种 `rabbitmq_web_mqtt` 提供与前端交互使用，对应端口`15675`。

```javascript
rabbitmq-plugins enable rabbitmq_web_mqtt 
```
在 `RabbitMQ` 管理后台看到如下的显示，就表示`MQTT` 协议开启成功，到这中间件环境就搭建完毕了。

![协议对应端口号](https://img-blog.csdnimg.cn/20200908110952935.png)

使用`MQTT` 协议默认的交换机 `Exchange` 为 `amp.topic`，而我们订阅的主题会在 `Queues` 注册一个客户端队列，路由 `Routing key` 就是我们设置的主题。

![交换机信息](https://img-blog.csdnimg.cn/20200908133812233.png)

## 服务端消息发送
`web` 端实时消息推送一般都是单向的推送，前端接收服务端推送的消息显示即可，所以就只实现消息发送即可。

### 1、mqtt 客户端依赖包

引入 `spring-integration-mqtt`、`org.eclipse.paho.client.mqttv3` 两个工具包实现

```javascript

<dependency>
    <groupId>org.springframework.integration</groupId>
    <artifactId>spring-integration-mqtt</artifactId>
</dependency>
<dependency>
    <groupId>org.eclipse.paho</groupId>
       <artifactId>org.eclipse.paho.client.mqttv3</artifactId>
    <version>1.2.0</version>
</dependency>
```

### 2、消息发送者
消息的发送比较简单，主要是应用到 `@ServiceActivator` 注解，需要注意`messageHandler.setAsync`属性，如果设置成 `false`，关闭异步模式发送消息时可能会阻塞。

```javascript
@Configuration
public class IotMqttProducerConfig {

@Autowired
    private MqttConfig mqttConfig;

@Bean
    public MqttPahoClientFactory mqttClientFactory() {
        DefaultMqttPahoClientFactory factory = new DefaultMqttPahoClientFactory();
        factory.setServerURIs(mqttConfig.getServers());
        return factory;
    }

@Bean
    public MessageChannel mqttOutboundChannel() {
        return new DirectChannel();
    }

@Bean
    @ServiceActivator(inputChannel = "iotMqttInputChannel")
    public MessageHandler mqttOutbound() {
        MqttPahoMessageHandler messageHandler = new MqttPahoMessageHandler(mqttConfig.getServerClientId(), mqttClientFactory());
        messageHandler.setAsync(false);
        messageHandler.setDefaultTopic(mqttConfig.getDefaultTopic());
        return messageHandler;
    }
}
```
`MQTT` 对外提供发送消息的 `API` 时，需要使用 `@MessagingGateway` 注解，去提供一个消息网关代理，参数 `defaultRequestChannel` 指定发送消息绑定的`channel`。

可以实现三种`API`接口，`payload` 为发送的消息，`topic` 发送消息的主题，`qos` 消息质量。

```javascript
@MessagingGateway(defaultRequestChannel = "iotMqttInputChannel")
public interface IotMqttGateway {

// 向默认的 topic 发送消息
    void sendMessage2Mqtt(String payload);
    // 向指定的 topic 发送消息
    void sendMessage2Mqtt(String payload,@Header(MqttHeaders.TOPIC) String topic);
    // 向指定的 topic 发送消息，并指定服务质量参数
    void sendMessage2Mqtt(@Header(MqttHeaders.TOPIC) String topic, @Header(MqttHeaders.QOS) int qos, String payload);
}

```
## 前端消息订阅
前端使用与服务端对应的工具 `paho-mqtt` `mqttws31.js`实现，实现方式与传统的 `websocket` 方式差不多，核心方法 `client  = new Paho.MQTT.Client` 和 各种监听事件，代码比较简洁。

**注意**：要保证前后端 `clientId`的全局唯一性，我这里就简单用随机数解决了

```javascript
<script type="text/javascript">
        // mqtt协议rabbitmq服务
        var brokerIp = location.hostname;
        // mqtt协议端口号
        var port = 15675;
        // 接受推送消息的主题
        var topic = "push_message_topic";

// mqtt连接
        client = new Paho.MQTT.Client(brokerIp, port, "/ws", "clientId_" + parseInt(Math.random() * 100, 10));

// 连接断开事件
        client.onConnectionLost = function (responseObject) {
            console.log("失去连接 - " + responseObject.errorMessage);
        };

// 接收消息事件
        client.onMessageArrived = function (message) {
            console.log("接受主题： " + message.destinationName + "的消息： " + message.payloadString);
            $("#arrivedDiv").append("<br/>"+message.payloadString);
            var count = $("#count").text();
            count = Number(count) + 1;
            $("#count").text(count);
        };

// 推送给指定主题
        function sendMessage() {
            var a = $("#message").val();
            if (client.isConnected()) {
                var message = new Paho.MQTT.Message(a);
                message.destinationName = topic;
                client.send(message);
            }
        }
    </script>
```

## 测试
前后端的代码并不多，接下来我们测试一下，弄了个页面看看效果。

首先用 `postman` 模拟后端发送消息

```javascript
http://127.0.0.1:8080/fun/sendMessage?message=我是程序员内点事&topic=push_message_topic
```
![模拟发送消息](https://img-blog.csdnimg.cn/20200908132348293.png)

再看一下前端订阅消息的效果，看到消息被实时推送到了前端，这里只做了未读消息数量统计，一般还会做未读消息详情列表。

![实时消息推送动图](https://img-blog.csdnimg.cn/20200908132757419.gif#pic_center)

## 总结
未读消息是一个十分常见的功能，不管是 `web`端还是移动端系统都是必备的模块，`MQTT` 协议只是其中的一种实现方式，还是有必要掌握一种方法。具体用什么工具实现还是要看具体的业务场景和学习成本，像我用`RabbitMQ` 做还考虑到一些运维成本在里边。

**本文完整代码地址**：`https://github.com/chengxy-nds/Springboot-Notebook/tree/master/springboot-mqtt-messagepush`

---

**原创不易，燃烧秀发输出内容，如果有一丢丢收获，点个赞鼓励一下吧！**

整理了几百本各类技术电子书，送给小伙伴们。关注公号回复【**666**】自行领取。和一些小伙伴们建了一个技术交流群，一起探讨技术、分享技术资料，旨在共同学习进步，如果感兴趣就加入我们吧！

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828110008952.png)

ITPub博客

未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~

最新文章