esp8266(4),关于MQTT

最新推荐文章于 2024-09-20 20:58:13 发布

飞奔的裸羊羊

最新推荐文章于 2024-09-20 20:58:13 发布

阅读量371

点赞数

分类专栏： ardunio

本文链接：https://blog.csdn.net/walle167/article/details/117199623

版权

ardunio 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ESP8266模块配合JavaScript连接到免费的MQTT服务器。MQTT是一种轻量级的消息协议，常用于物联网(IoT)设备通信。示例代码展示了通过WebSocket（wss）加密连接到EMQ X MQTT Broker，并实现订阅、发布消息及错误处理的功能。

摘要由CSDN通过智能技术生成

先看一个 https://www.emqx.cn/mqtt/mqtt5 说明
mqtt 简单的说就是一个mq,消息队列服务
在物联网领域，还是很有用的

在我们了解了esp8266的一下基本特性之后，我们就可以开始着手远程服务了

所以先把mqtt 介绍一下

这是一篇esp8266的文章
https://www.emqx.cn/blog/esp8266-connects-to-the-public-mqtt-broker

免费在线的mqtt服务器
https://www.emqx.cn/mqtt/public-mqtt5-broker
在这里插入图片描述

接入方式有很多种
但是比较方便的是 JS的形式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF8">
    <title>MQTT</title>
	<script src="https://unpkg.com/mqtt@4.2.6/dist/mqtt.min.js"></script>
	<script>
		// 将在全局初始化一个 mqtt 变量
		console.log(mqtt);
		// 连接选项
		const options = {
			  clean: true, // true: 清除会话, false: 保留会话
			  connectTimeout: 60000, // 超时时间
			  // 认证信息
			  clientId: 'mqttx_b7317a0a',
			  username: 'cat_esp',
			  password: 'cat_esp12345678',
		}

		// 连接字符串, 通过协议指定使用的连接方式
		// ws 未加密 WebSocket 连接
		// wss 加密 WebSocket 连接
		// mqtt 未加密 TCP 连接
		// mqtts 加密 TCP 连接
		// wxs 微信小程序连接
		// alis 支付宝小程序连接
		const connectUrl = 'wss://broker.emqx.io:8084/mqtt';
		const client = mqtt.connect(connectUrl, options);

		client.on('connect', function () {
		  client.subscribe('cat', function (err) {
			if (!err) {
			  console.log('连接success:');
			}
		  })
		});

		client.on('reconnect', (error) => {
			console.log('正在重连:', error)
		})

		client.on('error', (error) => {
			console.log('连接失败:', error)
		})

		client.on('message', (topic, message) => {
		  console.log('收到消息：', topic, message.toString());
		  var html = "topic:"+topic+"，msg:"+message.toString();
		  var h = document.createElement("h1");
		  h.innerHTML = html;
		  document.getElementById("msg").appendChild(h);
		})
		
		client.publish('cat', 'Hello mqtt');

	</script>

</head>
<body>
<form action="" method="get" style='margin-left:20px;'>
	<h3>get message:<h3>
	 <div id="msg">
		
	 </div>
</form>
</div>
</body>
</html>