如何實(shí)現(xiàn)Web訂閱端

下面我們來實(shí)現(xiàn) Web 訂閱端。

MQTT over WebSocket

我們要實(shí)現(xiàn)的是一個(gè)可以在瀏覽器里運(yùn)行的 MQTT Client。MQTT 基于 TCP 協(xié)議，在目前主流的瀏覽器里面，使用 JavaScript 直接打開一個(gè) TCP 連接是不可能的，所以在瀏覽器里面直接使用 MQTT 目前是沒有辦法的。

Socket API 可以解決這個(gè)問題，但是瀏覽器對 Socket API 的支持還非常有限。而我們可以應(yīng)用 MQTT over WebSocket 來在瀏覽器中使用 MQTT，因?yàn)榇蟛糠种髁鳛g覽器都支持 WebSocket。MQTT over WebSocket 實(shí)現(xiàn)原理是把 MQTT 數(shù)據(jù)包封裝在 WebSocket 幀里進(jìn)行發(fā)送：

 

MQTT over WebSocket 也需要 Broker 支持，不過目前大部分 Broker 都是支持的，包括本課程里面使用的 Public Broker。

連接到 Broker

首先需要在 HTML 里面加上支持 MQTT over WebSocket 的 JS 文件：

<script src="https://unpkg.com/mqtt@2.18.6/dist/mqtt.min.js"></script>

然后連接到 Broker：

var client = mqtt.connect("ws://iot.eclipse.org/ws")

注意這里 Broker 的 URL 中的協(xié)議部分變成了 “ws”。

在這里我們沒有指定 Client Identifier，而 Client 庫或 Broker 會為我們自動生成一個(gè) Client Identifier。這樣打開多個(gè) Web 訂閱端時(shí)，就不會發(fā)生沖突。但是這樣是無法使用持久化會話的，所以在實(shí)際項(xiàng)目中，你應(yīng)該為每一個(gè) Web 訂閱端分配一個(gè)唯一 Client Identifier，比如把用戶 ID 作為 Client Identifier 的一部分。

接下來訂閱相關(guān)主題：

client.subscribe("front_door/detection/objects", {
                qos: 1
            }, function (err) {
                if (err != undefined) {
                    console.log("subscribe failed")
                } else {
                    console.log(`subscribe succeeded`)
                }
            })

處理消息

上一課中講到，在接受消息的時(shí)候，我們需要對消息進(jìn)行去重：

var receivedMessages = new Set();
client.on("message", function (_, payload) {
        var jsonMessage = JSON.parse(payload.toString())
        if(!receivedMessages.has(jsonMessage.id)){
            receivedMessages.add(jsonMessage.id)
            //接下來把結(jié)果顯示在頁面上面
        }
    })

為了演示簡單，這里使用了一個(gè) Set 來保存已收到消息的 ID。實(shí)際項(xiàng)目中，可以用稍微復(fù)雜一點(diǎn)的數(shù)據(jù)結(jié)構(gòu)，比如支持 Expiration 的緩存來存儲已收到消息的 ID。

然后把接收到的結(jié)果在頁面上顯示出來（這里使用 Table 來顯示）：

var date = new Date(jsonMessage.timestamp * 1000)
$('#results tr:last').after(`<tr><td>${date.toLocaleString()}</td><td>${jsonMessage.objects}</td><td><img src="${jsonMessage.image_url}" height="200"></td></tr>`);

Web 訂閱端的最終效果是這樣的：