使用MQTTX和前端vue进行通讯

需求：根据后端给的接口，前端实现消息订阅和消息加密连接操作，不走后端直接和硬件设备进行操作

1.下载mqttx

官网链接：MQTTX: Your All-in-one MQTT Client Toolbox

根据自己电脑选择不同的操作系统，默认下载后是英文的

 英文版改为中文

 2.根据后端提供链接地址进行连接

高级的部分都别动，连接编辑好后点击右上角就可以连接了

 添加订阅的主题名称，如果是测试的话可以随便输入，比如/test

Qos是决定消息质量，Qos：0，是发送端只发送一次，不管服务端收到没，1是至少发送一次，反正服务端一定能收到 1次，有可能收到2次以上，2保证服务端收到且只收到一次，值越大质量越高，qos越小，网络带宽越低。耗能越低

 

 2.前端mqtt连接，并且进行加密操作

这边的加密操作，其实也就是不能让连接地址暴露在浏览器的控制台里，所以我直接把加密的连接地址进行解密的操作再做链接。其实这个方法就应该要后端把加密的连接通过接口的形式给前端，前端再进行解密，这样就安全些。

下载mqtt和crypto-js

npm install mqtt crypto-js -S

加密代码

文本加密
var ciphertext = CryptoJS.AES.encrypt('连接地址', 'secret key 123').toString();

vue完整代码如下

3.效果

 文章到此结束，希望对你有所帮助，有不懂的可以在评论区或者私信我~