摘要：前言作為一個消息代理客戶端與服務端的通信時基于協議的而現在的主流應用時呈現在瀏覽器中這意味著用戶與服務端只能通過或者這類瀏覽器能理解的協議傳輸所以后端還要建立一個代理層將協議傳輸的內容解析一下以協議發送到最后再由發送到硬件端在瀏覽器支持的協

mosquitto 作為一個消息代理, 客戶端與 mosquitto 服務端的通信時基于 MQTT 協議的, 而現在的主流 web 應用時呈現在瀏覽器中, 這意味著用戶與服務端只能通過 HTTP 或者 HTTPS 這類瀏覽器能理解的協議傳輸, 所以后端還要建立一個代理層, 將 HTTP 協議傳輸的內容解析一下以 MQTT 協議發送到 mosquitto, 最后再由 mosquitto 發送到硬件端.

在瀏覽器支持的協議中, 還有一個適用于長連接的 WS 協議, 參考: 瀏覽器中常見網絡協議介紹. 如果客戶端直接通過 websocket 連接到 mosquitto 端, 那么就不需要中間的后端代理層. 后端只需要一個推送服務和控制系統就可以實現對客戶端的監聽, 控制, 推送(當然, 如果業務量巨大, 業務邏輯復雜, 代理層還是有必要的, 因為這樣不但可以為 mosquitto 過濾一些不必要的業務, 而且可以做一些數據統計, 設計事件鉤子).

在編譯 mosquitto 和它的驗證插件 mosquitto-auth-plug 的時候, 我注意到 mosquitto 有一個監聽的 9001 端口, 事后查了一下, 發現 mosquitto 開放的這個端口是支持直接與客戶端進行 websocket 通信的.

其實純粹的 MQTT 服務器是沒有這個功能的, mosquitto 需要在編譯的時候設置 configure.mk中

WITH_WEBSOCKETS := yes

所幸的是, eclipse 官方的 docker 鏡像 已經支持了 websocket 通信方式. 只需要在 mosquitto.conf 中啟用:

port 1883
listener 9001
protocol websockets

eclipse 提供了用于 瀏覽器客戶端利用 javascript 和 mosquitto 進行 websocket 通信的 paho-mqtt.js, 這是這個 js 庫的文檔: Paho.MQTT DOC.

我們假設有客戶端用戶為 client, 服務端用戶為 server. 為他們分配的主題與權限為:

 id | username |      topic         | rw 
----+----------+--------------------+----
  1 | client   | /p/client/upload   |  2
  2 | server   | /p/client/upload   |  2
  3 | client   | /p/client/download |  1
  4 | server   | /p/client/download |  2

那么 server 和 client 均可以在 /p/client/upload 讀寫. 我們約定只有 client 在 /p/client/upload 寫, server 只讀 /p/client/upload, 這個 topic 是用于 client 向 server 發送消息.

對于 topic /p/client/download, server 可讀可寫, client 只讀, 這個 topic 是用于 client 接受 server 向下推送的消息, 具體的邏輯如下:

注意這里的 client 是對 /p/client/upload 具有可讀可寫權限的, 意味者它可以讀取來自 /p/client/upload 的信息, 但是實際上這里沒有人往這個主題發布消息(除非 client 自己往這里發消息), 所以 client 擁有可讀權限也沒有關系.

建議看一下這篇文章: Using MQTT Over WebSockets with Mosquitto, 它比較詳細地介紹了客戶端通過 websocket 于 mosquitto 服務器通信的方式.
比如對于 client.html:
先引入 paho-mqtt.js, 這里我們先用 cloudflare.com CDN上的這段 js:

下面是創建客戶端 websocket 的例子:

var mqtt;
var host = "mosquitto";
var port = 9001;

// onConnect 事件
function onConnect() {
    console.log("connected.");
    var raw_message = "Hello World!";
    message = new Paho.MQTT.Message(raw_message);
    message.destinationName = "/p/client/upload";
    console.log("sending message: " + raw_message );
    mqtt.send(message);

    // 訂閱 download topic
    var subOptions = {
        qos: 1,
        onSuccess: onSubscribe
    };
    mqtt.subscribe("/p/client/download", subOptions);
}

// 訂閱主題成功事件
function onSubscribe(context) {
    console.log("subscribe success");
    console.log(context);
}

// 連接失敗事件
function onFailure(message) {
    console.log("connect failed.");
}

// onMessageArrived 事件
function onMessageArrived(message) {
    console.log("new message arrived...");
    console.log(message.payloadString);
}


// 建立 MQTT websocket 連接
function MQTTconnect() {
    console.log("connecting to " + host + ":" + port);
    mqtt = new Paho.MQTT.Client(host, port, "clientid");
    var options = {
        timeout: 3,
        onSuccess: onConnect,
        onFailure: onFailure,
        userName: "client",
        password: "123456",
        mqttVersion: 4
    };
    mqtt.onMessageArrived = onMessageArrived;
    mqtt.connect(options);
}

這里我們利用 paho-mqtt.js 新建了一個 mqtt, 然后綁定 onSuccess(連接成功), onFailure(連接失敗) onMessageArrived(消息到來)等事件, 之后用 options 里的配置連接到遠程的 mosquitto 服務器. 連接成功后, client 向 server 發送一條消息到 /p/client/upload topic, 通知服務端已經建立連接. 發送之后 mqtt 又訂閱 /p/client/download, 準備接受來自服務端的信息.

比如, 服務端可以這樣向客戶端推送消息:

import paho.mqtt.publish as publish
import time

HOST = "mosquitto"
PORT = 1883


if __name__ == "__main__":
    client_id = time.strftime("%Y%m%d%H%M%S", time.localtime(time.time()))
    publish.single(
        "/p/client/download", "hello mqtt", qos=2, hostname=HOST, port=PORT,
        client_id=client_id, auth={"username": "server", "password": "123456"})

這就是基于雙通道的服務端于客戶端通信

單通道通信原理類似, 但是由于客戶端可能有多臺設備, 比如手機端, 微信小程序端, PC 端. 那么身份的驗證不能直接由 mosquitto 確定, 應該在消息體內確定. 比如我們用 json 作為消息的承載方式. 消息體可以這樣:

{
    "timestamp": "1539141568",
    "client_id": "1001001",
    "message_type": "ping",
    "data": {"detail": "content"},
    "token": "auth_token"
}

這里應該按照具體的業務需求進行鑒權設計.