mqtt前端调用_mqtt前端框架资源-CSDN文库

共2个文件

html：1个

js：1个

需积分: 50 141 浏览量 2018-12-21 11:09:10 上传评论 5 收藏 20KB RAR 举报

**MQTT前端调用详解** MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅消息协议，常用于物联网(IoT)设备之间的通信。在本文中，我们将深入探讨如何在前端环境中使用MQTT进行数据交互，特别是通过JavaScript实现。我们需要了解MQTT的工作原理。MQTT基于客户端-服务器架构，它使用TCP/IP协议栈进行传输，确保了数据的可靠传输。在MQTT中，数据以“主题”（Topic）的形式发布和订阅，允许客户端根据自己的需求订阅特定主题，从而只接收与之相关的消息。在前端应用中，由于跨域限制，直接使用TCP连接是不可行的。因此，我们需要一个支持Websocket的MQTT库，如`mqtt.js`，它允许我们在浏览器环境中建立WebSocket连接到MQTT代理服务器。`mqtt-web`压缩包中的内容可能就包含了这个库和一个示例页面，用于演示前端调用MQTT的实现。要开始使用`mqtt.js`，首先需要在HTML文件中引入该库，可以通过CDN链接或者将库文件下载到本地后引用： ```html <script src="path/to/mqtt.min.js"></script> ``` 然后，在JavaScript中创建一个客户端实例，并连接到MQTT服务器： ```javascript var client = mqtt.connect('ws://your-mqtt-broker-url'); ``` 这里的`your-mqtt-broker-url`应替换为实际的MQTT服务器地址。连接成功后，可以订阅和发布消息。订阅一个主题： ```javascript client.on('connect', function () { client.subscribe('your/topic'); }); ``` 订阅后，当有消息发布到这个主题时，会触发`message`事件： ```javascript client.on('message', function (topic, message) { console.log('Received message:', topic, message.toString()); }); ``` 发布消息到一个主题： ```javascript client.publish('your/topic', 'Your message content'); ``` 为了在断线后重新连接，需要监听`close`和`error`事件，并在适当时候重试连接： ```javascript client.on('close', function () { console.log('Connection closed, reconnecting...'); // 重连逻辑 }); client.on('error', function (err) { console.error('Error occurred:', err); // 错误处理和重连逻辑 }); ``` 在`mqtt-web`提供的示例页面中，可能已经封装了这些基本操作，通过交互界面实现订阅、发布和接收消息的功能。你可以通过分析和运行这个示例来更直观地理解前端调用MQTT的过程。前端调用MQTT主要依赖于支持WebSocket的库，如`mqtt.js`，它使得前端应用能够与后台设备或服务实时通信，非常适合实时性要求高的物联网应用。通过学习和实践，开发者可以轻松地将MQTT集成到自己的Web项目中，实现高效的数据交换。

资源推荐

资源详情

资源评论

收起资源包目录

mqtt-web.rar （2个子文件）

mqtt-web

index.html 4KB

mqttws31.js 81KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/mqttws31.js" type="text/javascript"></script> <script> /* var hostname = '20.97.6.41', port = 6009, */ var hostname = '172.29.3.76', port = 9247, //var hostname = '20.97.6.62', // port = 61623, // var hostname = '192.168.50.131', // var hostname = '127.0.0.1', //port = 61623, clientId = 'test_liming'+ new Date().getTime(), timeout = 5, keepAlive = 50, cleanSession = true, ssl = false, // userName = 'admin', //password = 'password@123', userName = 'dev', password = 'dev123', // password = 'password', topic = 'hiboard_yishaohong', topic2 = 'hiboard_all', /*topic2 = 'moments_7a0fa778-ccbe-47ab-a3e3-01dd9c2088d9';*/ 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(e); } }; client.connect(options); //连接服务器并注册连接成功处理事件 function onConnect() { console.log("onConnected"); client.subscribe(topic); client.subscribe(topic2); console.log("onConnected-------------"); } client.onConnectionLost = onConnectionLost; //注册连接断开处理事件 client.onMessageArrived = onMessageArrived; //注册消息接收处理事件 function onConnectionLost(responseObject) { console.log(responseObject); if (responseObject.errorCode !== 0) { console.log("onConnectionLost:"+responseObject.errorMessage); console.log("连接已断开"); } } function onMessageArrived(message) { console.log("收到消息:"+message.payloadString); console.log("主题："+message.destinationName); } function send(){ var s = document.getElementById("msg").value; if(s){ s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}"; message = new Paho.MQTT.Message(s); message.destinationName = topic; client.send(message); document.getElementById("msg").value = ""; } } var count = 0; function start(){ window.tester = window.setInterval(function(){ if(client.isConnected){ var s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(count++)+", from: web console}"; message = new Paho.MQTT.Message(s); message.destinationName = topic; client.send(message); } }, 1000); } function stop(){ window.clearInterval(window.tester); } Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } </script> </head> <body> <input type="text" id="msg"/> <input type="button" value="Send" onclick="send()"/> <input type="button" value="Start" onclick="start()"/> <input type="button" value="Stop" onclick="stop()"/> <p id="msg"></p> </body> </html>

评论收藏

内容反馈