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

图片描述

 

https://segmentfault.com/a/1190000011117061

 

posted @ 2023-02-18 21:21  imxiangzi  阅读(998)  评论(0编辑  收藏  举报