前端與RabbitMQ實時訊息推播未讀訊息小紅點實現範例

2022-07-23 14:02:29

引言

前幾天粉絲群裡有個小夥伴問過：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實時訊息推播的資料請關注it145.com其它相關文章！