MQTT调试助手实现与网页进行MQTT通信【向网页控制台发送消息】

一、下载网页实现MQTT的js包

1、从<官网>按照如下图所示步骤下载MQTT的JS包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、直接从我的云盘获取

链接:https://pan.baidu.com/s/1iTcSBmM_J4ZI9OK58qfe3w
提取码:d92l
复制这段内容后打开百度网盘手机App,操作更方便哦

二、关于js包

在这里插入图片描述

paho-mqtt.js 完整功能;paho-mqtt-min.js 不支持SSL

咱们使用的是paho-mqtt.js

三、目录结构

1、总体目录结构

在这里插入图片描述

2、代码实现

下面使用WebSockets连接到服务器并订阅主题World。注意要替换自己的服务器IP、自己的用户名和密码,而端口号必须为8083。

订阅主题中的所有消息都将被打印到Javascript控制台。

使用WebSocket和TCP之间转发的网关。

最终代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>MQTT WebDemo</title>
	<script src="paho-mqtt.js" type="text/javascript"></script> <!-- 引入JS包 -->

	<script>
		// Create a client instance
		client = new Paho.MQTT.Client("×××IP××", Number(8083), "clientId");

		// set callback handlers
		client.onConnectionLost = onConnectionLost;
		client.onMessageArrived = onMessageArrived;

		// connect the client
		client.connect({onSuccess:onConnect,userName:"clay",password:"11223344"});


		// called when the client connects
		function onConnect() {
		  // Once a connection has been made, make a subscription and send a message.
		  console.log("onConnect");
		  client.subscribe("World");
		  message = new Paho.MQTT.Message("Hello");
		  message.destinationName = "World";
		  client.send(message);
		}

		// called when the client loses its connection
		function onConnectionLost(responseObject) {
		  if (responseObject.errorCode !== 0) {
		    console.log("onConnectionLost:"+responseObject.errorMessage);
		  }
		}

		// called when a message arrives
		function onMessageArrived(message) {
		  console.log("onMessageArrived:"+message.payloadString);
		}
	</script>>

</head>
<body>

</body>
</html>

四、运行

1、设置MQTT调试助手如下图所示

在这里插入图片描述
订阅主题必须是World

2、打开index.html网页,并点击F12打开开发者模式如下图所示

在这里插入图片描述

在右下角的console可以看到控制台打印信息。

3、MQTT调试助手向webMQTT发送消息

在这里插入图片描述

ReCclay CSDN认证博客专家 视觉/OpenCV 图像处理 深度学习
大家好,我是CSDN博主ReCclay,目前处于研究生阶段,就读于电子科技大学,主攻方向为汽车辅助驾驶算法研究。入站以来,凭借坚持与热爱,以博文的方式分享所学,截止目前累计博文数量达800余篇,受益人次达135万余次,涉及领域包括但不限于物联网开发、单片机开发、Linux驱动开发、FPGA开发、前/后端软件开发等。在未来我将继续专注于嵌入式相关领域,学习更多的科技知识,输出更高质量的博文。希望在”2020博客之星年度总评选“中,可以大家的关注和投票,投票地址:https://bss.csdn.net/m/topic/blog_star2020/detail?username=recclay
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页