要使用MQTT协议，您需要遵循以下步骤：

1、引入MQTT库

2、设置MQTT服务器地址和端口

3、创建MQTT客户端对象

4、连接到MQTT服务器

5、订阅主题

6、发布消息

7、处理接收到的消息

8、断开连接

下面是一个详细的示例：

1、引入MQTT库

您需要在HTML文件中引入一个MQTT库，例如Paho MQTT JavaScript库，您可以从官方网站下载并引入库文件：https://www.paho.mqtt.org/javascript/index.html

在HTML文件中添加以下代码：

<script src="path/to/pahomqtt.js"></script>

2、设置MQTT服务器地址和端口

接下来，您需要设置MQTT服务器的地址和端口，这些信息通常由您的MQTT服务提供商提供。

const mqttServer = "your_mqtt_server_address";
const mqttPort = your_mqtt_server_port;

3、创建MQTT客户端对象

创建一个MQTT客户端对象，用于连接到MQTT服务器并处理消息。

const clientId = "your_client_id"; // 可选，用于标识客户端的唯一ID
const options = {
  keepalive: 30, // 保持连接的时间间隔，单位为秒
};
const mqttClient = new Paho.MQTT.Client(mqttServer, mqttPort, clientId);

4、连接到MQTT服务器

使用connect方法连接到MQTT服务器，您需要提供一个回调函数来处理连接成功或失败的情况。

mqttClient.onConnectionLost = onConnectionLost; // 处理连接丢失的情况
mqttClient.onMessageArrived = onMessageArrived; // 处理接收到的消息
mqttClient.connect({ onSuccess: onConnect }); // 连接成功时的回调函数

5、订阅主题

使用subscribe方法订阅您感兴趣的主题，当该主题收到消息时，将调用onMessageArrived回调函数。

function onConnect() {
  console.log("已连接到MQTT服务器");
  mqttClient.subscribe("your_topic", { qos: 1 }); // qos: 1表示至少一次传递，确保消息到达接收者
}

6、发布消息

使用publish方法发布消息到指定的主题，您需要提供一个回调函数来处理消息发布成功或失败的情况。

function publishMessage(topic, message) {
  mqttClient.publish(topic, message, { qos: 1 }, function (err) {
    if (!err) {
      console.log("消息已发布到主题：" + topic);
    } else {
      console.error("发布消息失败：" + err);
    }
  });
}

7、处理接收到的消息

当接收到与订阅主题相关的消息时，onMessageArrived回调函数将被调用，您可以在此函数中处理接收到的消息。

function onMessageArrived(message) {
  console.log("收到主题：" + message.destinationName + " 的消息：" + message.payloadString);
}

8、断开连接

使用disconnect方法断开与MQTT服务器的连接，您可以在适当的时机调用此方法，例如页面卸载时。

window.addEventListener("beforeunload", onBeforeUnload); // 监听页面卸载事件
function onBeforeUnload() {
  mqttClient.disconnect(); // 断开连接前先取消订阅主题，避免重复订阅问题
}