前幾天粉絲群里有個小伙伴問過：web 頁面的未讀消息（小紅點）怎么實現比較簡單，剛好本周手頭有類似的開發任務，索性就整理出來供小伙伴們參考，沒准哪天就能用得上呢。
之前在 《springboot + rabbitmq 做智能家居》 中說過可以用 rabbitmq 的 MQTT 協議做智能家居的指令推送，里邊還提到過能用 MQTT 協議做 web 的消息推送，而未讀消息（小紅點）功能剛好應用到實時消息推送了。
MQTT 協議就不再贅述了，沒接觸過的同學翻翻前邊的文章溫習一下吧，今天還是主要以實踐為主！
web 端實時消息推送，常用的實現方式比較多，但萬變不離其宗，底層基本上還是依賴於 websocket，MQTT 協議也不例外。
RabbitMQ 搭建
RabbitMQ 的基礎搭建就不詳細說了，自行百度一步一步搞問題不大，這里主要說一下兩個比較重要的配置。
1、開啟 mqtt 協議
默認情況下RabbitMQ 是不開啟MQTT 協議的，所以需要我們手動的開啟相關的插件，而RabbitMQ 的MQTT 協議分為兩種。
第一種 rabbitmq_mqtt 提供與后端服務交互使用，對應端口1883。
rabbitmq-plugins enable rabbitmq_mqtt
第二種 rabbitmq_web_mqtt 提供與前端交互使用，對應端口15675。
rabbitmq-plugins enable rabbitmq_web_mqtt
在 RabbitMQ 管理后台看到如下的顯示，就表示MQTT 協議開啟成功，到這中間件環境就搭建完畢了。
使用MQTT 協議默認的交換機 Exchange 為 amp.topic，而我們訂閱的主題會在 Queues 注冊一個客戶端隊列，路由 Routing key 就是我們設置的主題。
服務端消息發送
web 端實時消息推送一般都是單向的推送，前端接收服務端推送的消息顯示即可，所以就只實現消息發送即可。
1、mqtt 客戶端依賴包
引入 spring-integration-mqtt、org.eclipse.paho.client.mqttv3 兩個工具包實現
<!--mqtt依賴包-->
<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，關閉異步模式發送消息時可能會阻塞。
@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 消息質量。
@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的全局唯一性，我這里就簡單用隨機數解決了
<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));
var options = {
timeout: 3, //超時時間
keepAliveInterval: 30,//心跳時間
onSuccess: function () {
console.log(("連接成功~"));
client.subscribe(topic, {qos: 1});
},
onFailure: function (message) {
console.log(("連接失敗~" + message.errorMessage));
}
};
// 考慮到https的情況
if (location.protocol == "https:") {
options.useSSL = true;
}
client.connect(options);
console.log(("已經連接到" + brokerIp + ":" + port));
// 連接斷開事件
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 模擬后端發送消息
http://127.0.0.1:8080/fun/sendMessage?message=我是程序員內點事&topic=push_message_topic
再看一下前端訂閱消息的效果，看到消息被實時推送到了前端，這里只做了未讀消息數量統計，一般還會做未讀消息詳情列表。
總結
未讀消息是一個十分常見的功能，不管是 web端還是移動端系統都是必備的模塊，MQTT 協議只是其中的一種實現方式，還是有必要掌握一種方法。具體用什么工具實現還是要看具體的業務場景和學習成本，像我用RabbitMQ 做還考慮到一些運維成本在里邊。
本文完整代碼地址：https://github.com/chengxy-nds/Springboot-Notebook/tree/master/springboot-mqtt-messagepush
原創不易，燃燒秀發輸出內容，如果有一丟丟收獲，點個贊鼓勵一下吧！
整理了幾百本各類技術電子書，送給小伙伴們。關注公號回復【666】自行領取。和一些小伙伴們建了一個技術交流群，一起探討技術、分享技術資料，旨在共同學習進步，如果感興趣就加入我們吧！
