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>