Web浏览器端经过https 使用mqtt通信

作的产品简介

此次须要作一个web端的上课平台，有音视频通信，有白板(画板)功能，有文字通信等。
技术点

1. 音视频通信须要走Webrtc

2. 须要跟ios, android, windows, mac 客户端互联互通

3. 通常通信经过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 instance
    mqttClient = new Paho.MQTT.Client(mqttHost, Number(mqttPort), this.mqttClientID);

    // connect the client
    mqttClient.connect({onSuccess: onConnect, useSSL: mqttuseSSL});

最后，经过ios等客户端过来的消息顺利的实时抵达，在白板上画线等各类操做实现就很容易了。