前端與RabbitMQ實時消息推送未讀消息小紅點實現示例
引言
前幾天粉絲群裡有個小夥伴問過: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
以上就是前端與RabbitMQ實時消息推送未讀消息小紅點實現示例的詳細內容,更多關於前端 RabbitMQ實時消息推送的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- springboot+rabbitmq實現智能傢居實例詳解
- 在Django中使用MQTT的方法
- Python中使用matplotlib繪制mqtt數據實時圖像功能
- 使用 Node-RED對 MQTT 數據流處理
- springboot整合RabbitMQ發送短信的實現