做的產品簡介

這次需要做一個web端的上課平臺，有音視頻通訊，有白板(畫板)功能，有文字通訊等。
技術點

音視頻通訊需要走Webrtc

需要跟ios, android, windows, mac 客戶端互聯互通

一般通訊通過mqtt協議

MQTT簡介

MQTT（Message Queuing Telemetry Transport，消息隊列遙測傳輸）是IBM開發的一個即時通訊協議，有可能成為物聯網的重要組成部分。該協議支持所有平臺，幾乎可以把所有聯網物品和外部連接起來，被用來當做傳感器和制動器（比如通過Twitter讓房屋聯網）的通信協議。

MQTT組成

1 Broker (server端)
有EMQ、Mosquitto、 HiveMQ等等，這次公司采用的是EMQ

2 Client（web client端）

mqtt.js https://github.com/mqttjs/MQT...
Eclipse Paho Client https://eclipse.org/paho/clie...

經過實際測驗比較 Eclipse Paho的庫比較好用

MQTT遇到的坑

mqtt通過http通訊還算是比較簡單的，大概通過例子一個小時就可以掌握了。由于我做的項目有音視頻需要webrtc,
而webrtc是必須要通過https才能通信的，So 所有的連接都必須要通過ssl加密了。但是mqtt在https下面通訊一直報錯，連接不上，解決的過程比較波折

解決過程

1 部署本地https證書 （https在本地服務器環境中的部署）
通過openssl創建ssl證書
通過node.js 引入證書，代碼如下

const https = require('https');const options = {key: fs.readFileSync('./cert/key.pem'),cert: fs.readFileSync('./cert/cert.pem'),rejectUnauthorized: true };let httpserver = https.createServer(options, app);httpserver.listen(3002, function () {console.log('Https server listening on port ' + 3002); });

部署完了之后，還是通訊失敗。 想到了通過https 需要https的資源

2 部署mqtt Broker(服務端)

一開始自己使用了開源的Mosquitto測試，發現很難部署https環境，后來還是直接使用了EMQ,EMQ天然支持了。
文檔中也說明了端口，IOS 安卓等客戶端可以直接使用 1883端口，但是web是通過 8083和 8084端口進行通訊的。

在公司運維大神的成功協助下，配置好了 EMQ的https環境

我想這下應該好了吧，然后興奮的用 mqtt.js 連接，結果還是報錯了 :-(

3 更換mqtt client 類庫
使用了Eclipse Paho Client，終于，終于，成功了
代碼如下

const mqttHost = 'm.landi.com';const mqttPort = 8084;const mqttuseSSL = true;// Create a client instancemqttClient = new Paho.MQTT.Client(mqttHost, Number(mqttPort), this.mqttClientID);// connect the clientmqttClient.connect({onSuccess: onConnect, useSSL: mqttuseSSL});

最后，通過ios等客戶端過來的消息順利的實時抵達，在白板上畫線等各種操作實現就很容易了。

總結

以上是生活随笔為你收集整理的Web浏览器端通过https 使用mqtt通讯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。