5分钟构建物联网消息看板EMQX Cloud Serverless Vue3实战指南当温湿度传感器数据需要实时呈现在办公室的大屏幕上或是生产线状态需要即时可视化监控时一个轻量级的物联网消息看板往往是最直接的解决方案。本文将带您使用完全免费的EMQX Cloud Serverless服务和Vue3框架在5分钟内搭建一个可动态更新的专业级数据看板。1. 准备工作零基础快速入门在开始之前您只需要准备一个现代浏览器推荐Chrome或Edge最新版Node.js 16环境用于Vue3开发注册EMQX Cloud账号免费为什么选择Serverless方案零服务器维护无需关心基础设施永久免费额度每月100万条消息足够原型开发自动扩展流量突增时无需手动调整配置提示EMQX Cloud Serverless的免费额度对于中小型物联网项目完全够用特别适合快速验证想法2. 创建Serverless MQTT服务访问 EMQX Cloud控制台选择Serverless部署类型填写实例名称如my-iot-dashboard点击立即创建等待约30秒部署完成创建成功后记录以下关键信息连接地址: xxxxxxx.emqxsl.cloud 端口: 8084 (WebSocket SSL) 用户名: 自动生成 密码: 自动生成配置参数示例表参数值说明协议wssWebSocket Secure端口8084默认SSL端口ClientID随机字符串确保唯一性主题格式sensor//data为通配符3. 初始化Vue3项目使用Vite快速创建项目npm create vitelatest iot-dashboard --template vue cd iot-dashboard npm install mqtt echarts vue-echarts项目结构精简配置src/ ├── components/ │ └── SensorChart.vue # 可视化组件 ├── App.vue # 主界面 └── main.js # MQTT初始化4. 实现实时数据可视化在SensorChart.vue中集成EChartstemplate div refchart stylewidth:600px;height:400px;/div /template script setup import { ref, onMounted } from vue import * as echarts from echarts const props defineProps([data]) const chart ref(null) let myChart onMounted(() { myChart echarts.init(chart.value) updateChart() }) const updateChart () { const option { xAxis: { type: time }, yAxis: { name: 温度(℃) }, series: [{ data: props.data, type: line, smooth: true }] } myChart.setOption(option) } /scriptMQTT连接核心逻辑// main.js import { createApp } from vue import mqtt from mqtt const app createApp(App) app.config.globalProperties.$mqtt mqtt.connect(wss://xxxxxx.emqxsl.cloud:8084/mqtt, { username: your-username, password: your-password, clientId: dashboard- Math.random().toString(16).substr(2, 8) })5. 进阶功能与优化技巧数据缓存策略// 使用Pinia管理历史数据 import { defineStore } from pinia export const useSensorStore defineStore(sensor, { state: () ({ temperature: [], humidity: [] }), actions: { addData(topic, payload) { const data JSON.parse(payload) this[topic.split(/)[1]].push({ timestamp: new Date(), value: data.value }) } } })断线自动重连client.on(close, () { setTimeout(() { client.reconnect() }, 5000) })性能优化建议使用Web Worker处理高频数据实现数据采样降频(downsampling)对图表采用防抖更新策略6. 部署与分享构建生产版本npm run build部署选项对比平台优点适用场景Vercel自动SSL/CDN演示原型Netlify持续部署团队协作GitHub Pages完全免费静态展示将dist目录上传至任意静态托管服务即可通过URL分享您的物联网看板。如需进一步定制可以考虑添加多主题切换实现数据导出功能集成报警阈值设置
保姆级教程：用EMQX Cloud Serverless + Vue3 5分钟搞定一个物联网消息看板
发布时间：2026/6/13 5:31:57
5分钟构建物联网消息看板EMQX Cloud Serverless Vue3实战指南当温湿度传感器数据需要实时呈现在办公室的大屏幕上或是生产线状态需要即时可视化监控时一个轻量级的物联网消息看板往往是最直接的解决方案。本文将带您使用完全免费的EMQX Cloud Serverless服务和Vue3框架在5分钟内搭建一个可动态更新的专业级数据看板。1. 准备工作零基础快速入门在开始之前您只需要准备一个现代浏览器推荐Chrome或Edge最新版Node.js 16环境用于Vue3开发注册EMQX Cloud账号免费为什么选择Serverless方案零服务器维护无需关心基础设施永久免费额度每月100万条消息足够原型开发自动扩展流量突增时无需手动调整配置提示EMQX Cloud Serverless的免费额度对于中小型物联网项目完全够用特别适合快速验证想法2. 创建Serverless MQTT服务访问 EMQX Cloud控制台选择Serverless部署类型填写实例名称如my-iot-dashboard点击立即创建等待约30秒部署完成创建成功后记录以下关键信息连接地址: xxxxxxx.emqxsl.cloud 端口: 8084 (WebSocket SSL) 用户名: 自动生成 密码: 自动生成配置参数示例表参数值说明协议wssWebSocket Secure端口8084默认SSL端口ClientID随机字符串确保唯一性主题格式sensor//data为通配符3. 初始化Vue3项目使用Vite快速创建项目npm create vitelatest iot-dashboard --template vue cd iot-dashboard npm install mqtt echarts vue-echarts项目结构精简配置src/ ├── components/ │ └── SensorChart.vue # 可视化组件 ├── App.vue # 主界面 └── main.js # MQTT初始化4. 实现实时数据可视化在SensorChart.vue中集成EChartstemplate div refchart stylewidth:600px;height:400px;/div /template script setup import { ref, onMounted } from vue import * as echarts from echarts const props defineProps([data]) const chart ref(null) let myChart onMounted(() { myChart echarts.init(chart.value) updateChart() }) const updateChart () { const option { xAxis: { type: time }, yAxis: { name: 温度(℃) }, series: [{ data: props.data, type: line, smooth: true }] } myChart.setOption(option) } /scriptMQTT连接核心逻辑// main.js import { createApp } from vue import mqtt from mqtt const app createApp(App) app.config.globalProperties.$mqtt mqtt.connect(wss://xxxxxx.emqxsl.cloud:8084/mqtt, { username: your-username, password: your-password, clientId: dashboard- Math.random().toString(16).substr(2, 8) })5. 进阶功能与优化技巧数据缓存策略// 使用Pinia管理历史数据 import { defineStore } from pinia export const useSensorStore defineStore(sensor, { state: () ({ temperature: [], humidity: [] }), actions: { addData(topic, payload) { const data JSON.parse(payload) this[topic.split(/)[1]].push({ timestamp: new Date(), value: data.value }) } } })断线自动重连client.on(close, () { setTimeout(() { client.reconnect() }, 5000) })性能优化建议使用Web Worker处理高频数据实现数据采样降频(downsampling)对图表采用防抖更新策略6. 部署与分享构建生产版本npm run build部署选项对比平台优点适用场景Vercel自动SSL/CDN演示原型Netlify持续部署团队协作GitHub Pages完全免费静态展示将dist目录上传至任意静态托管服务即可通过URL分享您的物联网看板。如需进一步定制可以考虑添加多主题切换实现数据导出功能集成报警阈值设置
的演进与通信机制)
