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>