用JS写MQTT接收数据展示到界面

要使用 JavaScript 实现 MQTT 数据接收并展示到界面上，需要先加载 MQTT 客户端库和相应的 JavaScript 库。以下是一个简单的例子：

首先，在 HTML 文件中，加载 MQTT 客户端库和 jQuery 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/2.18.8/mqtt.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接着，在 JavaScript 中，定义 MQTT 客户端：

var client = mqtt.connect("wss://test.mosquitto.org:8081"); // 连接到 MQTT 服务器
client.on("connect", function () {
  console.log("connected"); // 连接成功后打印日志
  client.subscribe("test/topic"); // 订阅主题
});

client.on("message", function (topic, message) {
  console.log(topic, message.toString()); // 接收到消息后打印日志
  $("#message").html(message.toString()); // 将消息展示到页面上
});

这里使用了 `mqtt` 库连接到 `test.mosquitto.org` 服务器，并订阅 `test/topic` 主题。当接收到消息时，将消息展示到页面上。

最后，在 HTML 中添加一个用于展示消息的元素：

<div id="message"></div>

这样，当 MQTT 客户端收到消息时，就会自动更新页面上的消息展示。