使用MQTT.JS创建一个网页版的MQTT客户端

一、MQTT.JS介绍

MQTT.js 是一个开源的 MQTT 协议的客户端库，使用 JavaScript 编写，主要用于 Node.js 和 浏览器环境中。是JavaScript 环境下的 MQTT 客户端库。可以用于微信小程序、支付宝小程序等定制浏览器环境。

我们可以直接在HTML文件中进行调用:

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

也可以下载该文件，和HTML文件放在同一目录来进行调用:

<script src=" ./mqtt.min.js"></script>

二、网页界面设计

调用库文件后，我们需要在html中生成一些文本框，来填写一些连接服务器所需要的信息，如服务器地址，服务器端口，服务器路径，clientID,用户名，用户密码，这里在文本框中加入了默认的一些信息，如果自已有更方便测试的服务器，可以自行修改:

      服务器地址:<input type="text" id="host" value="ws://broker.emqx.io">服务器端口:<input type="text" id="port" value="8083">服务器路径:<input type="text" id="path" value="/mqtt">客  户  端  ID:<input type="text" id="clientID" value="">用   户   名:<input type="text" id="user" value="test">密        码:<input type="text" id="password" value="123">

接下来我们需要要两个按钮，用来实现连接和断开服务器功能，当按下按钮时，分别调用connectMQTT()函数和connectEND()函数:

    <button id="connectBtn" onclick="connectMQTT()">连接</button><button id="disconnectBtn" disabled="disabled" onclick="connectEND()">已断开</button>

接下来，我们需要一个文本框来填写订阅的主题名称，以及一个按钮来确定订阅内容:

  <body><h2>MQTT订阅</h2>主题:<input type="text" id="subtopic" value="test"><button onclick="subscribe_topic()">订阅</button></body>

我们还需要两个文本框来填写发送的主题名称和发送的消息内容，以及一个按钮来确定发送消息:

  <body><h2>MQTT消息发送</h2>主题:<input type="text" id="topic" value="test">消息:<input type="text" id="message" value="test"><button onclick="sendMessage()">发送</button></body>

最后，我们需要一个文本框来显示各种信息，该文本框使用<textarea>元素，该元素为一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本:

  <body><h1>消息框</h1><textarea id="messageTextArea" style="resize:none;" cols="80" rows="20"></textarea><br/></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+':'+port+path;								//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>
<html><head><!-- 可选在线mqtt.min.js文件与本地mqtt.min.js文件 --><!-- <script src=" https://unpkg.com/mqtt@5.3.4/dist/mqtt.min.js"></script> --><script src=" ./mqtt.min.js"></script></head><body><h2>MQTT服务器设置</h2><form>服务器地址:<input type="text" id="host" value="ws://broker.emqx.io">服务器端口:<input type="text" id="port" value="8083"> </br>服务器路径:<input type="text" id="path" value="/mqtt">客  户  端  ID:<input type="text" id="clientID" value=""> </br>用   户   名:<input type="text" id="user" value="test">密        码:<input type="text" id="password" value="123"> </br></form><button id="connectBtn" onclick="connectMQTT()">连接</button><button id="disconnectBtn" disabled="disabled" onclick="connectEND()">已断开</button></body><body><h2>MQTT订阅</h2>主题:<input type="text" id="subtopic" value="test"><button onclick="subscribe_topic()">订阅</button></body><body><h2>MQTT消息发送</h2>主题:<input type="text" id="topic" value="test">消息:<input type="text" id="message" value="test"><button onclick="sendMessage()">发送</button></body><body><h1>消息框</h1><textarea id="messageTextArea" style="resize:none;" cols="80" rows="20"></textarea><br/></body><script>document.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+':'+port+path;								//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"的消息。

测试成功

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/316767.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

k8s中实现pod自动扩缩容

k8s中实现pod自动扩缩容

一、k8s应用自动扩缩容概述 1&#xff09;背景&#xff1a; 在实际的业务场景中&#xff0c;我们经常会遇到某个服务需要扩容的场景&#xff08;例如&#xff1a;测试对服务压测、电商平台秒杀、大促活动、或由于资源紧张、工作负载降低等都需要对服务实例数进行扩缩容操作&…
阅读更多...
LiveGBS流媒体平台GB/T28181功能-国标级联对接海康大华宇视华为等上级平台选择通道支持只看已选只看未选

LiveGBS流媒体平台GB/T28181功能-国标级联对接海康大华宇视华为等上级平台选择通道支持只看已选只看未选

LiveGBS功能国标级联对接海康大华宇视华为等上级平台选择通道支持只看已选只看未选 1、国标级联2、只看已选3、只看未选4、搭建GB28181视频直播平台 1、国标级联 LiveGBS可以作为下级平台&#xff0c;级联到第三方国标平台&#xff0c;详见&#xff1a; LiveGBS国标GB/T28181流…
阅读更多...
SpringBoot整合Elasticsearch报错

SpringBoot整合Elasticsearch报错

本文来记录一下SpringBoot整合Elasticsearch报错 文章目录 报错如下报错原因es7.15.2版本下载 报错如下 报错如下 2024-01-02 15:09:10.349 ERROR 134936 --- [nio-8088-exec-6] o.a.c.c.C.[.[.[/]. [dispatcherServlet] : Servlet.service() for servlet [dispatcherServle…
阅读更多...
小红书、抖音、视频号下载工具：随心管理个人作品集 | 开源日报 No.134

小红书、抖音、视频号下载工具：随心管理个人作品集 | 开源日报 No.134

karanpratapsingh/system-design Stars: 20.6k License: NOASSERTION 这个项目是关于系统设计的。它提供了有关系统设计的课程内容&#xff0c;包括 IP、OSI 模型、TCP 和 UDP 等主题。该项目的核心优势和特点如下&#xff1a; 提供全面而高效的系统架构定义。从基础设施到数…
阅读更多...
SM2——适用于前后端（java+vue）公用的SM2国密加解密传输

SM2——适用于前后端（java+vue）公用的SM2国密加解密传输

目录 一、SM2国密加解密算法1.1、pom文件引入依赖包1.2、SM2加解密工具类1.3、测试类 一、SM2国密加解密算法 1.1、pom文件引入依赖包 <dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk18on</artifactId><version>…
阅读更多...
element的select遇到的下拉名称过长的问题修复

element的select遇到的下拉名称过长的问题修复

问题描述&#xff1a;如果下拉框的数据名称过长怎么解决 解决办法&#xff1a;在select下加类名 :popper-append-to-body“false” popper-class“my-select” 不要忽略一点&#xff1a;如果改样式的话因为用的饿了么组件&#xff0c;有的样式避免找来找去&#xff0c;可以直接…
阅读更多...
自动驾驶TPM技术杂谈 ———— ODDODC

自动驾驶TPM技术杂谈 ———— ODDODC

文章目录 介绍研究现状主流相关定义国标定义SAE定义WP29定义 ODD主流构建框架NHTSA ODD构建框架SAE AVSC ODD构建框架PEGASUS 6层模型BSI ODD构建框架 设计运行条件的原则ODC 的设计原则ODC 元素的制定原则ODC 的使用原则 设计运行条件元素ODD 元素驾乘人员状态4车辆状态 ODC 描…
阅读更多...
基于ssm的在线点歌系统的设计与实现+vue论文

基于ssm的在线点歌系统的设计与实现+vue论文

摘 要 使用旧方法对在线点歌系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在在线点歌系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的在线点歌系…
阅读更多...
Spring高手之路-Spring Bean、Java Bean和对象的区别与联系

Spring高手之路-Spring Bean、Java Bean和对象的区别与联系

目录 什么是Spring Bean 什么是Java Bean 什么是对象 Spring Bean与Java Bean与对象的联系与区别 联系 区别 什么是Spring Bean 在Spring官方文档中对Bean的解释如下&#xff1a; In Spring, the objects that form the backbone of your application and that are manage…
阅读更多...
C++ 二进制图片的读取和blob插入mysql_stmt_init—新年第一课

C++ 二进制图片的读取和blob插入mysql_stmt_init—新年第一课

关于二进制图片的读取和BLOB插入一共包含五步 第一步&#xff1a;初始化 MYSQL_STMT* stmt mysql_stmt_init(&mysql); 第二步&#xff1a;预处理sql语句 mysql_stmt_prepare(stmt,sql,sqllen); 第三步&#xff1a;绑定字段 mysql_stmt_bind_param(stmt,bind); 第四…
阅读更多...
【华为机试】2023年真题B卷（python）-靠谱的车

【华为机试】2023年真题B卷（python）-靠谱的车

一、题目 题目描述&#xff1a; 程序员小明打了一辆出租车去上班。出于职业敏感&#xff0c;他注意到这辆出租车的计费表有点问题&#xff0c;总是偏大。 出租车司机解释说他不喜欢数字4&#xff0c;所以改装了计费表&#xff0c;任何数字位置遇到数字4就直接跳过&#xff0c;其…
阅读更多...
thinkphp6入门（14）-- 多关联模型查询

thinkphp6入门（14）-- 多关联模型查询

背景&#xff1a; 有3个数据表&#xff0c;一个User表&#xff0c;一个Cloth表&#xff0c;一个Shoe表。 Cloth表和Shoe表分别和User表通过user_id关联。 thinkphp 6中如何通过模型查询所有用户&#xff0c;其中包括每个用户的cloth和shoe。 多关联模型查询&#xff1a; 1.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023