uniapp vue3 连接树莓派物联网服务器的方法

一、树莓派物联网服务器配置配置

 参考博客：树莓派系列(十四) 树莓派4B安装 docker并配置为 MQTT服务器_docker pull emqx/emqx:4.3-rc.5-CSDN博客

二、uniapp的main.js全局配置：

import { createApp } from 'vue';
import App from './App.vue';
import MQTT from 'mqtt/dist/mqtt.js';

let mqttClient = null; // 全局 MQTT 客户端实例

let options = {
  username: 'lxt',
  clientId: '6666',
  connectTimeout: 600000,
  keepalive: 5,
  clean: true,
};

let subscribe = "mqtt11";

// mqttClient = MQTT.connect('ws://192.168.1.105:8083/mqtt', options);
mqttClient = MQTT.connect('ws://106.54.235.58:18083/mqtt', options);
mqttClient.on('connect', () => {  
  console.log('Connected to MQTT broker');
  console.log("连接成功");
  mqttClient.subscribe(subscribe, (err) => {  
    console.log(err);
    if (!err) {  
      console.log("订阅成功");
	        // 连接成功后发送数据
	        sendDataToServer('lightoff'); // 这里假设初始状态为关闭灯
    }  
  });
});

function sendDataToServer(command) {
  // 在这里编写发送数据的逻辑
  // let command = command;
  let topic = 'mqtt11';
  mqttClient.publish(topic, command, (err) => {
    if (!err) {
      console.log('Message sent successfully');
    } else {
      console.error('Failed to send message:', err);
    }
  });
mqttClient.on('message', (topic, message) => {  
  console.log(`Received message on topic ${topic}: ${message.toString()}`);
  // 在这里处理接收到的消息
});
}
const app = createApp(App);
app.config.globalProperties.$mqttClient = mqttClient; // 将 mqttClient 挂载到全局属性中
app.mount('#app');

三、页面调用

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  }
  ,
  mounted() {
    this.$mqttClient.on('message', (topic, message) => {  
      console.log(`Received message on topic ${topic}: ${message.toString()}`);
      this.receivedMessage = message.toString(); // 更新接收到的消息
    });
  }
}
</script>