目录：（点击跳转）
一、申请创建MQTT公网服务器
两种方案：
1.自己购买云服务或者自己在公网云上自行搭建MQTT服务器（有很多开源的项目）
2.申请免费的公网MQTT服务器，比如EMQX CloudEMQX Cloud: 全托管的 MQTT 消息云服务。
那么接下来重点说下第二种方法（第一种要自己折腾，可能存在的问题很多，不够便捷）
- 注册与申请EMQX Cloud
- MQTT TLS/SSL 端口：8883
- 还需要上述的CA证书文件，自行下载
- WebSocket TLS/SSL 端口：8084
免费试用——》填写信息——》开始试用（看情况免费的版本就够用了）——》登录
新建试用——》Serverless——》免费开启——》没有高需求就立即部署
进入部署工作台——》查看服务器概况——》服务器认证设置
右边添加用户和密码（注意：这是客户端连接时需要的）
然后查看服务器概况：
Python编写客户端时可以用：
JS中试用WebSocket编写客户端可以用：
到这里可能会疑惑：为什么课上教的端口是1883，而这里没有，简单来说，因为这两个是加密连接，所有对应端口不同。
二、编写对应的MQTT客户端（会附完整代码）
Python编写
1.1 导入头文件paho.mqtt和ssl
1.2 创建MQTT类（详情注释）
1.3 调用方式：
首先实例化对象MQTTClient，里面带上下列参数：
在外部发送主题：
接收某主题的消息时：
注：通过设置遗嘱主题“WillMsg”，可以进行连接上下线的显示，符合设备上下线的操作。（就是上线也用遗嘱，有点感觉怪怪的，你们自行决定吧）
JS中WebSocket编写
这个主要是写JS，配合html页面进行显示什么的
1.引用
mqtt.min.js文件首先在html的头部引入
<script src="mqtt.min.js"></script>这个文件可以下载（可能的留意版本区别）mqtt (v4.3.7) - A library for the MQTT protocol | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
或者在头部通过CDN在线使用
或者：
或者下载我这里文件（下载后解压出js文件）
2.新建js文件（比如：mqtt-client.js）
2.1 首先设置客户端id和服务器连接信息
2.2 连接参数设置：
下面是对每个连接参数的解释注释：
username: 连接使用的用户名。
password: 连接使用的密码。
keepalive: 保持连接的时间间隔（以秒为单位）。如果客户端在指定的时间间隔内没有向服务器发送消息，服务器可能会认为客户端已断开连接。
clientId: 客户端ID，用于标识一个特定的MQTT客户端连接。
protocolId: 协议ID，指定所使用的协议类型。在这种情况下，协议是MQTT。
protocolVersion: 协议版本，指定所使用的MQTT协议的版本号。在这种情况下，版本号为4。
clean: 指定是否要在连接时清除会话状态。如果设置为true，则客户端与服务器之间的连接将是全新的，不会保留任何之前的会话信息。
reconnectPeriod: 重新连接的时间间隔（以毫秒为单位）。如果连接中断，客户端将尝试在此时间间隔后重新连接到服务器。
connectTimeout: 连接超时时间（以毫秒为单位）。如果连接尝试在指定的时间内未成功建立，将会超时。
will: 遗嘱消息，用于在客户端异常断开时发送给服务器的消息。包含以下属性：topic: 遗嘱消息的主题。payload: 遗嘱消息的有效负载（内容）。qos: 遗嘱消息的质量等级（QoS）。retain: 指定服务器是否应保留遗嘱消息。
rejectUnauthorized: 指定是否应拒绝未经授权的服务器证书。
这些参数用于配置MQTT客户端的连接选项，以便与MQTT代理建立连接并进行通信。
2.3 进行连接：
2.4 连接情况处理：
整体代码：
下面是对每个事件监听回调函数的注释说明：
- 监听"error"事件，当出现连接错误时触发。
- 打印连接错误信息(err)。
- 调用
client.end()方法来关闭客户端连接。
- 监听"reconnect"事件，当客户端正在重新连接时触发。
- 打印"Reconnecting..."以指示重新连接正在进行。
- 监听"connect"事件，当客户端成功连接到MQTT代理时触发。
- 打印"Client connected:"后跟客户端ID(clientId)以表示连接成功。
- 调用
client.subscribe()方法订阅主题"testtopic"和"WillMsg"，使用QoS 0。
- 调用
client.publish()方法发布遗嘱消息到主题"WillMsg"，发送消息"On Online!"，使用QoS 0和不保留标志(retain: false)。
- 监听"message"事件，当客户端接收到消息时触发。
- 打印接收到的消息内容(message)以及消息的主题(topic)。
- 通过DOM操作更新消息到指定的
<div>元素(messageBox_recv)中，显示主题和接收到的消息内容。
- 监听"close"事件，当客户端断开连接时触发。
- 打印客户端ID(clientId)后跟'disconnected'，表示客户端已断开连接。
2.5 发布消息：
client.publish(topic, message, { qos: 0, retain: false }) 是用于发布消息到指定主题的方法，下面是对参数的注释说明：topic: 要发布消息的主题。
message: 要发布的消息内容。
{ qos: 0, retain: false }: 一个可选的选项对象，用于设置发布消息的参数。qos: 指定消息的质量等级（Quality of Service）。在此示例中，设置为0，表示使用最多一次的传递，不保证消息的可靠传递。retain: 指定是否在代理服务器上保留该消息。在此示例中，设置为false，表示不保留消息。
调用
client.publish(topic, message, { qos: 0, retain: false }) 方法将发布消息到指定主题，传递的消息内容为message，并使用指定的QoS等级和保留标志。最后，千万别忘记在html的尾部引用mqtt-client.js这个刚刚写的文件
<script src="mqtt-client.js"></script>注：通过设置遗嘱主题“WillMsg”，可以进行连接上下线的显示，符合设备上下线的操作。（就是上线也用遗嘱，有点感觉怪怪的，你们自行决定吧）
JS的json串处理：
首先对应json数据的变量创建全局变量文件config.js
这些全局变量的使用范例：
接下来在MQTT接收消息的回调函数处添加json处理程序：（主要是try-catch部分）
注意：
jsonData.F?.F1 使用了可选链操作符 ?.，它是 ECMAScript 2020 引入的一个新特性。它用于处理可能为 null 或 undefined 的对象属性的访问。如上操作后，MQTT发送的json串格式的数据将会自动更新到全局变量中，其他图表JS程序只需要访问这些全局变量（注意是否需要类型转换）就可以实现通过定时器更新的效果了。
小说明：
上述代码中所用的主题为"testtopic"，这个你们自行设置，这里只是用来做验证的，
上述代码中客户端的遗嘱主题“WillMsg”，这个也可以自行设置，可用于MQTT客户端异常离线时的提醒。
当两个客户端（分别拥有各自的ID），订阅同一主题时，在消息回调函数中都能自动接收该主题被更新的内容。
订阅主题和发布主题消息功能有区别：
python的订阅主题与发布主题消息：
client.subscribe("testtopic")client.publish("testtopic", "Hello, MQTT!")JS的websocket的订阅主题与发布主题消息：
client.subscribe('testtopic', { qos: 0 });client.publish('testtopic', 'Hello, MQTT!', { qos: 0, retain: false });订阅了某主题后只是会接收这个主题的更新的消息内容；
而发送主题消息需要特殊指定主题和消息内容，并不是订阅某主题后就可以直接只发送消息内容，这好像是不行的。