html+js网页连接MQTT服务器new Paho.MQTT.Client

网页完整代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div class="title" id="title"><br><br><h3 align="center">简单测试</h3><center><input type="button" value="开始" onclick="test()"></center></div><script src="https://cdn.bootcss.com/paho-mqtt/1.0.2/mqttws31.min.js"></script><script>client = new Paho.MQTT.Client("broker.emqx.io", Number(8083), "websockets-test");//建立客户端实例client.connect({ onSuccess: onConnect });//连接服务器并注册连接成功处理事件function onConnect() {console.log("onConnected");topic = 'mytopic'; //订阅的主题client.subscribe(topic);//订阅主题console.log("subscribed");//发送消息}client.onConnectionLost = onConnectionLost;//注册连接断开处理事件client.onMessageArrived = onMessageArrived;//注册消息接收处理事件function onConnectionLost(responseObject) {if (responseObject.errorCode !== 0) {// console.log("onConnectionLost:"+responseObject.errorMessage);console.log("连接已断开");}}function onMessageArrived(message) {console.log("收到消息:" + message.payloadString);console.log("主题：" + message.destinationName);}function test() {console.log('按钮点击')}</script>
</body></html>