https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js
https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js

概述

mqttws31 是一个 MQTT（Message Queue Telemetry Transport）客户端库，可以用于在浏览器中实现与 MQTT 代理服务器的通信

mqttws31 提供了一个基于 WebSocket 协议的 MQTT 客户端实现，可以将 MQTT 协议封装在 WebSocket 协议之上，使得客户端可以通过浏览器向 MQTT 代理服务器发送和接收消息。

使用 mqttws31 可以很方便地在浏览器中实现 MQTT 通信，它提供了与标准 MQTT 客户端库相似的 API，包括连接到服务器、发布消息、订阅主题等功能。

由于是用websocket，所以一定要选择服务端里对用的mqtt over websocket端口号，因为请求路径是ws或wss开头

具体使用

引入mqttws.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

客户端实例化

var hostname = 'kh.tyzfchina.com.cn',port = 8084,clientId = guid(),
var client = new Paho.MQTT.Client(hostname, port, clientId)

创建连接

var options = {invocationContext: {host: hostname,port: port,path: client.path,clientId: clientId},timeout: timeout,keepAliveInterval: keepAlive,cleanSession: cleanSession,useSSL: ssl,userName: userName,password: password,onSuccess: onConnect, //创建实例成功回调onFailure: function (e) {console.log('创建mq实例失败', e)s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}"console.log(s)} //创建实例失败回调
}
client.connect(options)//连接服务器并注册连接成功处理事件
function onConnect () {client.subscribe(topic)console.log('订阅topic', topic)
}

注册连接断开处理事件

//注册连接断开处理事件
client.onConnectionLost = onConnectionLost//注册消息接收处理事件
function onConnectionLost (responseObject) {console.log('连接断开了', responseObject)s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}"if (responseObject.errorCode !== 0) {setTimeout(function () {console.log("连接错误:" + responseObject.errorMessage)isConnetion = falsestartMqtest()}, 1000 * 60)}
}

收到消息回调函数

// 收到消息回调函数
client.onMessageArrived = onMessageArrived// 接收到消息
function onMessageArrived (message) {s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onMessageArrived()}"console.log("收到消息:" + message.payloadString);console.log("topic:" + message.destinationName);
}

订阅topic

client.subscribe(topic名称,可选参数qos、OnSuccess、onFailure、invocationContext、timeout);

取消订阅

client.unsubscribe(topic名称, unsubscribeOptions);
//unsubscribeOptions: 可选参数qos、OnSuccess、onFailure、invocationContext、timeout

断开连接

client.disconnect();

发送消息

client.send(topic,payload,qos,retained); 
// topic: 主题
// payload： 内容
// qos： 发送频率
// retained：是否保留（选择true，其他客户端订阅时会自动获取内容）

参考文章

https://blog.csdn.net/qq_42627162/article/details/112877805