html文件里直接调用
<!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>mqtt.min.js 测试</title> <style> .divblock { display: inline-block; padding: 20px; border: 2px solid #00ff00; border-radius: 6px; margin: 20px 0px; user-select: none; } .divblock:active { background-color: #455072; border: 1px solid #0044ff; } </style> <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> <!-- 引处MQTT.MINI.JS库文件 --> </head> <body> <div>4路开关模块</div> <div class="divblock" onclick="Onmqtttest()">mqtt 发送</div> </body> <script> // Create a client instance var options = { //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档 clientId: 'mqttjs_' + (Math.random() * 1000000).toString() } //console.log(options.clientId); //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt var client = mqtt.connect("ws://gzlema.cn:8083/mqtt", options) // you add a ws:// url here //建立连接 client.on('connect', function () { console.log("connect success!") //订阅主题 presence client.subscribe('presence', function (err) { if (!err) { console.log("subscribe success!") } else { //打印错误 console.log(err) } }) }) //如果连接错误，打印错误 client.on('error', function (err) { console.log(err) client.end() }) //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑 client.on('message', function (topic, message) { // message is Buffer,此处就是打印消息的具体内容 console.log('-> ' + message.toString()) }) // 用户程序点击事件 function Onmqtttest() { message = "message from browser with websocket"; // 消息内容 //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收 client.publish('presence', 'Hello mqtt ' + message) } </script> </html>