怎样注册网站卖东西,画册设计免费模板,seo行业,有哪些做家教网站一、MQTT.JS介绍
MQTT.js 是一个开源的 MQTT 协议的客户端库#xff0c;使用 JavaScript 编写#xff0c;主要用于 Node.js 和 浏览器环境中。是JavaScript 环境下的 MQTT 客户端库。可以用于微信小程序、支付宝小程序等定制浏览器环境。
我们可以直接在HTML文件中进行调用…一、MQTT.JS介绍
MQTT.js 是一个开源的 MQTT 协议的客户端库使用 JavaScript 编写主要用于 Node.js 和 浏览器环境中。是JavaScript 环境下的 MQTT 客户端库。可以用于微信小程序、支付宝小程序等定制浏览器环境。
我们可以直接在HTML文件中进行调用:
script srchttps://unpkg.com/mqtt/dist/mqtt.min.js/script
也可以下载该文件和HTML文件放在同一目录来进行调用:
script src ./mqtt.min.js/script
二、网页界面设计
调用库文件后我们需要在html中生成一些文本框来填写一些连接服务器所需要的信息如服务器地址服务器端口服务器路径clientID,用户名用户密码这里在文本框中加入了默认的一些信息如果自已有更方便测试的服务器可以自行修改: 服务器地址:input typetext idhost valuews://broker.emqx.io服务器端口:input typetext idport value8083服务器路径:input typetext idpath value/mqtt客 户 端 ID:input typetext idclientID value用 户 名:input typetext iduser valuetest密 码:input typetext idpassword value123
接下来我们需要要两个按钮用来实现连接和断开服务器功能当按下按钮时分别调用connectMQTT()函数和connectEND()函数: button idconnectBtn onclickconnectMQTT()连接/buttonbutton iddisconnectBtn disableddisabled onclickconnectEND()已断开/button
接下来我们需要一个文本框来填写订阅的主题名称以及一个按钮来确定订阅内容: bodyh2MQTT订阅/h2主题:input typetext idsubtopic valuetestbutton onclicksubscribe_topic()订阅/button/body
我们还需要两个文本框来填写发送的主题名称和发送的消息内容以及一个按钮来确定发送消息: bodyh2MQTT消息发送/h2主题:input typetext idtopic valuetest消息:input typetext idmessage valuetestbutton onclicksendMessage()发送/button/body
最后我们需要一个文本框来显示各种信息该文本框使用textarea元素该元素为一个多行的文本输入控件在文本输入域中可以输入任意长度的文本: bodyh1消息框/h1textarea idmessageTextArea styleresize:none; cols80 rows20/textareabr//body
以上界面的设计已经完成。下面我们介绍一下需要用到的MQTT.JS的API
三、MQTT.JS常用API
mqtt.connect([url], options)
连接url和选项所指定的代理并返回客户端对象。URL 可以是以下协议mqtt、mqtts、tcp、tls、ws、wss、wxs、alis。URL 也可以是 URL.parse() 返回的对象在这种情况下两个对象会合并也就是说可以传递一个同时包含URL和连接选项的对象。也可以指定一个服务器选项内容为[{ host: localhost, port: 1883 }, ... ]在这种情况下每次连接都会遍历该数组。
client.on(connect,function)
为指定事件注册一个监听器接受一个字符串 event 和一个回调函数。
参数1:connect -成功连接或重连后触发reconnect -开始一个重新连接时触发close -断开连接时触发disconnect -从服务器接收到断开命令的数据包时触发offline -客户端离线时触发error -当客户端无法连接或出现解析错误时触发end -调用Client.end()时触发。如果向Client.end() 传递了回调则回调返回后会触发该事件message -客户端收到发布数据包时触发packetsend -客户端发送任何数据包时触发。包括published()数据包以及MQTT用于管理订阅和连接的数据包packetreceive -客户端收到任何数据包时触发。包括来自订阅主题的数据包以及MQTT用于管理订阅和连接的数据包参数2回调函数
Client.publish(topic, message, [options], [callback])
发布消息
参数topic -主题message -消息内容[options] -发布选项[callback] -回调函数
Client.subscribe(topic/topic array/topic object, [options], [callback])
参数topic/topic array/topic object -要订阅的字符串主题或主题数组。也可以是一个对象对象键是主题名称值是 QoS如 {test1: {qos: 0}, test2: {qos: 1}}. 支持MQTT主题通配符表示单层级#表示多层级[options] -是订阅的选项[callback] -回调函数Client.end([force], [options], [callback])
参数[force] -将其设为true将立即关闭客户端而无需等待接收到飞行中的消息。该参数为可选参数。[options] -断开连接选项[callback] -回调函数
这里介绍一些常用的API如果想了解详细的API说明可以到官方地址:https://github.com/mqttjs/MQTT.js
四、函数设计
我们需要以下几个函数来完整地实现一个MQTT客户端功能:
1、连接服务器函数
该函数从网页的文本框中获取连接服务器所需的信息如服务器地址服务器端口服务器路径clientID,用户名用户密码通过以上信息用mqtt.connect()函数连接服务器连接成功后
触发client.on(connect,function)所指向的回调函数
/* 连接服务器 */function connectMQTT(){var host document.getElementById(host).value; //服务器地址var port document.getElementById(port).value; //服务器端口var path document.getElementById(path).value; //服务器路径var clientID document.getElementById(clientID).value; //clientIDvar user document.getElementById(user).value; //用户名var password document.getElementById(password).value; //用户密码var url host:portpath; //URL地址console.log(url); //后台输入URL地址var options { //创建一个参数对象clientID:clientID, //clientIDusername:user, //用户名password:password //用户密码};client mqtt.connect(url,options); //连接服务器console.log(client);console.log(client.connected);client.stream.on(error, function(err) { //连接错误时触发console.error(Connection error:err);console.log(连接失败);client.end(); //关闭客户端对象})client.on(connect,function(packet){ //连接服务器后触发document.getElementById(connectBtn).setAttribute(disabled,disabled); //连接按钮不可用document.getElementById(connectBtn).innerHTML 已连接; //连接按钮显示为已连接document.getElementById(disconnectBtn).removeAttribute(disabled,disabled); //断开按钮设为可用document.getElementById(disconnectBtn).innerHTML 断开; //断开按钮显示为断开client.on(message, message_str) //定义接收消息后触发回调函数var messageTextArea document.getElementById(messageTextArea); //textarea添加文本messageTextArea.value 已连接\n //textarea添加文本console.log(已连接); //后台输出已连接})}
2、断开消息函数
该函数利用client.end()关闭client对象
/* 断开连接服务器 */function connectEND(){if(client client.connected){client.end();console.log(已断开连接);document.getElementById(connectBtn).removeAttribute(disabled,disabled); //连接按钮设为可用document.getElementById(connectBtn).innerHTML 连接; //连接按钮显示为连接document.getElementById(disconnectBtn).setAttribute(disabled,disabled); //断开按钮设为不可用document.getElementById(disconnectBtn).innerHTML 已断开; //断开按钮显示已断开var messageTextArea document.getElementById(messageTextArea); //textarea添加文本messageTextArea.value 已断开\n //textarea添加文本}else{console.log(未连接);}}
3、发布消息函数
该函数使用client.publish()发送消息。
/* 发送消息 */function sendMessage() {var topic document.getElementById(topic).value; //获取主题var message document.getElementById(message).value; //获取消息文本//console.log(topic);if(client client.connected){client.publish(topic, message); //发送消息console.log(已发送);}else{console.log(未连接);}}
4、订阅主题函数
该函数使用client.subscribe()来订阅一个主题。
/* 订阅主题 */function subscribe_topic(){var topic document.getElementById(subtopic).value; //获取主题client.subscribe(topic); //定阅主题var messageTextArea document.getElementById(messageTextArea); //获取textarea元素messageTextArea.value 已定阅topic\n; //textarea添加文本console.log(已订阅:topic);}
5、接收消息函数
该函数由连接服务器函数中的client.on(message, message_str)事件触发当该事件触发时调用该函数
/* 接收消息函数 */function message_str(topic,message){ //监听消息函数console.log(收到来自主题:topic的消息:message.toString());var messageTextArea document.getElementById(messageTextArea); //获取textarea元素messageTextArea.value 收到来自主题:topic的消息:message.toString()\n; //将新的文本追加到 value}
五、完整代码
保存为index.html
!DOCTYPE html
htmlhead!-- 可选在线mqtt.min.js文件与本地mqtt.min.js文件 --!-- script src https://unpkg.com/mqtt5.3.4/dist/mqtt.min.js/script --script src ./mqtt.min.js/script/headbodyh2MQTT服务器设置/h2form服务器地址:input typetext idhost valuews://broker.emqx.io服务器端口:input typetext idport value8083 /br服务器路径:input typetext idpath value/mqtt客 户 端 ID:input typetext idclientID value /br用 户 名:input typetext iduser valuetest密 码:input typetext idpassword value123 /br/formbutton idconnectBtn onclickconnectMQTT()连接/buttonbutton iddisconnectBtn disableddisabled onclickconnectEND()已断开/button/bodybodyh2MQTT订阅/h2主题:input typetext idsubtopic valuetestbutton onclicksubscribe_topic()订阅/button/bodybodyh2MQTT消息发送/h2主题:input typetext idtopic valuetest消息:input typetext idmessage valuetestbutton onclicksendMessage()发送/button/bodybodyh1消息框/h1textarea idmessageTextArea styleresize:none; cols80 rows20/textareabr//bodyscriptdocument.getElementById(clientID).setAttribute(value,randomID()); //生成随机clientIDvar client; //创建一个客户端对象
/* 连接服务器 */function connectMQTT(){var host document.getElementById(host).value; //服务器地址var port document.getElementById(port).value; //服务器端口var path document.getElementById(path).value; //服务器路径var clientID document.getElementById(clientID).value; //clientIDvar user document.getElementById(user).value; //用户名var password document.getElementById(password).value; //用户密码var url host:portpath; //URL地址console.log(url); //后台输入URL地址var options { //创建一个参数对象clientID:clientID, //clientIDusername:user, //用户名password:password //用户密码};client mqtt.connect(url,options); //连接服务器console.log(client);console.log(client.connected);client.stream.on(error, function(err) { //连接错误时触发console.error(Connection error:err);console.log(连接失败);client.end(); //关闭客户端对象})client.on(connect,function(packet){ //连接服务器后触发document.getElementById(connectBtn).setAttribute(disabled,disabled); //连接按钮不可用document.getElementById(connectBtn).innerHTML 已连接; //连接按钮显示为已连接document.getElementById(disconnectBtn).removeAttribute(disabled,disabled); //断开按钮设为可用document.getElementById(disconnectBtn).innerHTML 断开; //断开按钮显示为断开client.on(message, message_str) //定义接收消息后触发回调函数var messageTextArea document.getElementById(messageTextArea); //textarea添加文本messageTextArea.value 已连接\n //textarea添加文本console.log(已连接); //后台输出已连接})}/* 断开连接服务器 */function connectEND(){if(client client.connected){client.end();console.log(已断开连接);document.getElementById(connectBtn).removeAttribute(disabled,disabled); //连接按钮设为可用document.getElementById(connectBtn).innerHTML 连接; //连接按钮显示为连接document.getElementById(disconnectBtn).setAttribute(disabled,disabled); //断开按钮设为不可用document.getElementById(disconnectBtn).innerHTML 已断开; //断开按钮显示已断开var messageTextArea document.getElementById(messageTextArea); //textarea添加文本messageTextArea.value 已断开\n //textarea添加文本}else{console.log(未连接);}}/* 发送消息 */function sendMessage() {var topic document.getElementById(topic).value; //获取主题var message document.getElementById(message).value; //获取消息文本if(client client.connected){client.publish(topic, message); //发送消息console.log(已发送);}else{console.log(未连接);}}/* 订阅主题 */function subscribe_topic(){var topic document.getElementById(subtopic).value; //获取主题client.subscribe(topic); //定阅主题var messageTextArea document.getElementById(messageTextArea); //获取textarea元素messageTextArea.value 已定阅topic\n; //textarea添加文本console.log(已订阅:topic);}/* 接收消息函数 */function message_str(topic,message){ //监听消息函数console.log(收到来自主题:topic的消息:message.toString());var messageTextArea document.getElementById(messageTextArea); //获取textarea元素messageTextArea.value 收到来自主题:topic的消息:message.toString()\n; //将新的文本追加到 value}/* 生成随机clientID */function randomID(){return clientID_ Math.random().toString(16).substr(2, 8)}/script
/html
六、测试代码
我们用浏览器打开该html文件 点击连接并订阅名为test的主题同时给test主题发送一个文本内容为test的消息。 测试成功 备注在网页中使用MQTT.JS只支持WebSocket连接选项就是说在网页版的客户端中无法连接mqtt://为前缀的地址。
