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

MQTT over WebSocket

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

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

 

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

連接到 Broker

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

然后連接到 Broker：

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

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

在這里我們沒有指定 Client Identifier，而 Client 庫或 Broker 會為我們自動生成一個 Client Identifier。這樣打開多個 Web 訂閱端時，就不會發(fā)生沖突。但是這樣是無法使用持久化會話的，所以在實際項目中，你應(yīng)該為每一個 Web 訂閱端分配一個唯一 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`)
                }
            })

處理消息

上一課中講到，在接受消息的時候，我們需要對消息進行去重：

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é)果顯示在頁面上面
        }
    })

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

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

var date = new Date(jsonMessage.timestamp * 1000)
$('#results tr:last').after(`${date.toLocaleString()}${jsonMessage.objects}`);

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