uni-app mqtt 链接案例

已经解决了，找了一个demo。

当然，以下是一个使用uni-app通过MQTT协议连接到MQTT服务器的示例代码。这个示例使用了mqtt.js库，这是一个流行的JavaScript MQTT客户端库。首先，确保你的项目中已经安装了mqtt.js库，你可以通过npm安装：

npm install mqtt --save

接下来，在你的uni-app项目中，你可以按照以下步骤进行MQTT连接：

1. 创建一个MQTT服务文件（例如mqttService.js）：

// mqttService.js
import mqtt from 'mqtt';

const MQTT_SERVER = 'wss://your-mqtt-server-url'; // 替换为你的MQTT服务器URL
const CLIENT_ID = 'uni-app-client-' + Math.random().toString(16).substr(2, 8);
const TOPIC = 'your/topic'; // 替换为你的订阅主题

const client = mqtt.connect(MQTT_SERVER, {
  clientId: CLIENT_ID,
  clean: true
});

client.on('connect', () => {
  console.log('MQTT connected');
  client.subscribe(TOPIC, (err) => {
    if (!err) {
      console.log('Subscribed to topic:', TOPIC);
    } else {
      console.error('Failed to subscribe to topic:', TOPIC, err);
    }
  });
});

client.on('message', (topic, message) => {
  console.log('Received message:', topic, message.toString());
});

client.on('error', (error) => {
  console.error('MQTT error:', error);
});

client.on('close', () => {
  console.log('MQTT connection closed');
});

export default client;

1. 在你的页面中使用这个MQTT服务：

// pages/index/index.vue
<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
import client from '@/mqttService.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    client.on('message', (topic, message) => {
      this.message = message.toString();
    });
  },
  beforeDestroy() {
    client.end(true, () => {
      console.log('MQTT client disconnected');
    });
  }
};
</script>

<style>
/* 你的样式 */
</style>

在这个示例中，mqttService.js文件负责处理MQTT连接、订阅和消息接收。然后在你的页面中，通过导入并使用这个MQTT服务，你可以接收来自MQTT服务器的消息并更新页面的显示。

请注意，实际使用中你可能需要处理更多的连接状态、错误处理和重连逻辑，这个示例只是提供了一个基本的连接和消息接收的实现。同时，确保你的MQTT服务器URL、客户端ID和订阅主题等配置正确无误。