Web浏览器端通过https 使用mqtt通讯

做的产品简介

这次需要做一个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等客户端过来的消息顺利的实时抵达，在白板上画线等各种操作实现就很容易了。

图片描述