用JS实现MQTT接收数据 温湿度 电机 电表 产量 展示到界面

要使用 JavaScript 实现 MQTT 接收数据并展示到界面上，可以使用 MQTT.js 库来实现 MQTT 连接和消息订阅，使用 DOM 操作来更新界面数据。具体的步骤如下：

1. 引入 MQTT.js 库和相关的 DOM 元素。

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<div>
  <div>温度：</div>
  <div id="temp"></div>
  <div>湿度：</div>
  <div id="humidity"></div>
  <div>电机：</div>
  <div id="motor"></div>
  <div>电表：</div>
  <div id="electricity"></div>
  <div>产量：</div>
  <div id="yield"></div>
</div>

2. 使用 MQTT.js 库进行连接和消息订阅。

// MQTT 连接参数
const host = 'mqtt://localhost';
const port = 1883;
const username = 'your-username';
const password = 'your-password';

// MQTT 订阅主题
const topics = ['temp', 'humidity', 'motor', 'electricity', 'yield'];

// MQTT 连接对象
const client = mqtt.connect(host, { port, username, password });

// MQTT 连接成功后，订阅消息
client.on('connect', () => {
  console.log('Connected to MQTT broker');
  topics.forEach(topic => {
    client.subscribe(topic);
  });
});

// MQTT 接收到消息后，更新界面数据
client.on('message', (topic, message) => {
  console.log(`Received message: ${message.toString()} on topic ${topic}`);
  switch (topic) {
    case 'temp':
      document.getElementById('temp').textContent = message.toString();
      break;
    case 'humidity':
      document.getElementById('humidity').textContent = message.toString();
      break;
    case 'motor':
      document.getElementById('motor').textContent = message.toString();
      break;
    case 'electricity':
      document.getElementById('electricity').textContent = message.toString();
      break;
    case 'yield':
      document.getElementById('yield').textContent = message.toString();
      break;
    default:
      console.log(`Unknown topic: ${topic}`);
  }
});

这样，就可以使用 JavaScript 实现 MQTT 接收数据并展示到界面上了。需要注意的是，需要先安装 MQTT.js 库并在服务器上启动 MQTT 服务。