前幾天粉絲群裡有個小夥伴問過：<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>