前端與RabbitMQ實(shí)時(shí)消息推送未讀消息小紅點(diǎn)實(shí)現(xiàn)示例
引言
前幾天粉絲群里有個(gè)小伙伴問(wèn)過(guò)：web 頁(yè)面的未讀消息（小紅點(diǎn)）怎么實(shí)現(xiàn)比較簡(jiǎn)單，剛好本周手頭有類似的開發(fā)任務(wù)，索性就整理出來(lái)供小伙伴們參考，沒(méi)準(zhǔn)哪天就能用得上呢。
之前在 《springboot + rabbitmq 做智能家居》 中說(shuō)過(guò)可以用 rabbitmq 的 MQTT 協(xié)議做智能家居的指令推送，里邊還提到過(guò)能用 MQTT 協(xié)議做 web 的消息推送，而未讀消息（小紅點(diǎn)）功能剛好應(yīng)用到實(shí)時(shí)消息推送了。
MQTT 協(xié)議就不再贅述了，沒(méi)接觸過(guò)的同學(xué)翻翻前邊的文章溫習(xí)一下吧，今天還是主要以實(shí)踐為主！
web 端實(shí)時(shí)消息推送，常用的實(shí)現(xiàn)方式比較多，但萬(wàn)變不離其宗，底層基本上還是依賴于 websocket，MQTT 協(xié)議也不例外。
RabbitMQ 搭建
RabbitMQ的基礎(chǔ)搭建就不詳細(xì)說(shuō)了，自行百度一步一步搞問(wèn)題不大，這里主要說(shuō)一下兩個(gè)比較重要的配置。
1、開啟 mqtt 協(xié)議
默認(rèn)情況下RabbitMQ是不開啟MQTT 協(xié)議的，所以需要我們手動(dòng)的開啟相關(guān)的插件，而RabbitMQ的MQTT 協(xié)議分為兩種。
第一種 rabbitmq_mqtt 提供與后端服務(wù)交互使用，對(duì)應(yīng)端口1883。
rabbitmq-plugins?enable?rabbitmq_mqtt
第二種 rabbitmq_web_mqtt 提供與前端交互使用，對(duì)應(yīng)端口15675。
rabbitmq-plugins?enable?rabbitmq_web_mqtt?
在 RabbitMQ 管理后臺(tái)看到如下的顯示，就表示MQTT 協(xié)議開啟成功，到這中間件環(huán)境就搭建完畢了。
協(xié)議對(duì)應(yīng)端口號(hào)
使用MQTT 協(xié)議默認(rèn)的交換機(jī) Exchange 為 amp.topic，而我們訂閱的主題會(huì)在 Queues 注冊(cè)一個(gè)客戶端隊(duì)列，路由 Routing key 就是我們?cè)O(shè)置的主題。
交換機(jī)信息
服務(wù)端消息發(fā)送
web 端實(shí)時(shí)消息推送一般都是單向的推送，前端接收服務(wù)端推送的消息顯示即可，所以就只實(shí)現(xiàn)消息發(fā)送即可。
1、mqtt 客戶端依賴包
引入 spring-integration-mqtt、org.eclipse.paho.client.mqttv3 兩個(gè)工具包實(shí)現(xiàn)
<!--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、消息發(fā)送者
消息的發(fā)送比較簡(jiǎn)單，主要是應(yīng)用到 @ServiceActivator 注解，需要注意messageHandler.setAsync屬性，如果設(shè)置成 false，關(guān)閉異步模式發(fā)送消息時(shí)可能會(huì)阻塞。
@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 對(duì)外提供發(fā)送消息的 API 時(shí)，需要使用 @MessagingGateway 注解，去提供一個(gè)消息網(wǎng)關(guān)代理，參數(shù) defaultRequestChannel 指定發(fā)送消息綁定的channel。
可以實(shí)現(xiàn)三種API接口，payload 為發(fā)送的消息，topic 發(fā)送消息的主題，qos 消息質(zhì)量。
@MessagingGateway(defaultRequestChannel?=?"iotMqttInputChannel")
public?interface?IotMqttGateway?{
????//?向默認(rèn)的?topic?發(fā)送消息
????void?sendMessage2Mqtt(String?payload);
????//?向指定的?topic?發(fā)送消息
????void?sendMessage2Mqtt(String?payload,@Header(MqttHeaders.TOPIC)?String?topic);
????//?向指定的?topic?發(fā)送消息，并指定服務(wù)質(zhì)量參數(shù)
????void?sendMessage2Mqtt(@Header(MqttHeaders.TOPIC)?String?topic,?@Header(MqttHeaders.QOS)?int?qos,?String?payload);
}
前端消息訂閱
前端使用與服務(wù)端對(duì)應(yīng)的工具 paho-mqtt mqttws31.js實(shí)現(xiàn)，實(shí)現(xiàn)方式與傳統(tǒng)的 websocket 方式差不多，核心方法 client = new Paho.MQTT.Client 和 各種監(jiān)聽事件，代碼比較簡(jiǎn)潔。
注意：要保證前后端 clientId的全局唯一性，我這里就簡(jiǎn)單用隨機(jī)數(shù)解決了
<script?type="text/javascript">
????????//?mqtt協(xié)議rabbitmq服務(wù)
????????var?brokerIp?=?location.hostname;
????????//?mqtt協(xié)議端口號(hào)
????????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,?//超時(shí)時(shí)間
????????????keepAliveInterval:?30,//心跳時(shí)間
????????????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(("已經(jīng)連接到"?+?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>
測(cè)試
前后端的代碼并不多，接下來(lái)我們測(cè)試一下，弄了個(gè)頁(yè)面看看效果。
首先用 postman 模擬后端發(fā)送消息
http://127.0.0.1:8080/fun/sendMessage?message=我是程序員內(nèi)點(diǎn)事&topic=push_message_topic
模擬發(fā)送消息
再看一下前端訂閱消息的效果，看到消息被實(shí)時(shí)推送到了前端，這里只做了未讀消息數(shù)量統(tǒng)計(jì)，一般還會(huì)做未讀消息詳情列表。
實(shí)時(shí)消息推送動(dòng)圖
總結(jié)
未讀消息是一個(gè)十分常見的功能，不管是 web端還是移動(dòng)端系統(tǒng)都是必備的模塊，MQTT 協(xié)議只是其中的一種實(shí)現(xiàn)方式，還是有必要掌握一種方法。具體用什么工具實(shí)現(xiàn)還是要看具體的業(yè)務(wù)場(chǎng)景和學(xué)習(xí)成本，像我用RabbitMQ 做還考慮到一些運(yùn)維成本在里邊。
本文完整代碼地址：https://github.com/chengxy-nds/Springboot-Notebook/tree/master/springboot-mqtt-messagepush
以上就是前端與RabbitMQ實(shí)時(shí)消息推送未讀消息小紅點(diǎn)實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于前端 RabbitMQ實(shí)時(shí)消息推送的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
springboot的控制反轉(zhuǎn)和自動(dòng)裝配示例代碼
這篇文章主要介紹了springboot的控制反轉(zhuǎn)和自動(dòng)裝配的相關(guān)知識(shí)，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
關(guān)于Sentinel中冷啟動(dòng)限流原理WarmUpController
這篇文章主要介紹了關(guān)于Sentinel中冷啟動(dòng)限流原理WarmUpController，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
Java反射 PropertyDescriptor類案例詳解
這篇文章主要介紹了Java反射 PropertyDescriptor類案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Java接口和繼承操作,結(jié)合具體實(shí)例形式分析了Java接口和繼承與使用的相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下2021-08-08
spring cloud 使用Zuul 實(shí)現(xiàn)API網(wǎng)關(guān)服務(wù)問(wèn)題
這篇文章主要介紹了spring cloud 使用Zuul 實(shí)現(xiàn)API網(wǎng)關(guān)服務(wù)問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
SpringBoot使用Caffeine實(shí)現(xiàn)緩存的示例代碼
本文主要介紹了SpringBoot使用Caffeine實(shí)現(xiàn)緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
controller函數(shù)中參數(shù)列表使用多個(gè)@RequestBody問(wèn)題
這篇文章主要介紹了controller函數(shù)中參數(shù)列表使用多個(gè)@RequestBody問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在 Java 中，字符串是一種常見的數(shù)據(jù)類型，經(jīng)常用于存儲(chǔ)一些文本信息，而String類則是Java提供的專門用于字符串操作的類，本文就來(lái)和大家聊聊String類的常用方法與實(shí)現(xiàn)原理吧2023-05-05
Java中使用內(nèi)存映射實(shí)現(xiàn)大文件上傳實(shí)例
這篇文章主要介紹了Java中使用內(nèi)存映射實(shí)現(xiàn)大文件上傳實(shí)例,本文對(duì)比測(cè)試了FileInputStream 或者FileOutputStream 抑或RandomAccessFile的頻繁讀寫操作,最后總結(jié)出映射到內(nèi)存后進(jìn)行讀寫以提高速度,需要的朋友可以參考下2015-01-01
集合嵌套之ArrayList嵌套ArrayList實(shí)例
下面小編就為大家?guī)?lái)一篇集合嵌套之ArrayList嵌套ArrayList實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08