当前位置：首页 > backend >正文

Vue3 + MQTT + 高德地图实现车辆在线状态与实时位置更新

backend 2025/9/2 11:37:46

在车联网项目中，我们经常需要实时接收设备（车辆）状态、GPS 位置数据，并且动态更新到前端界面。本篇文章将结合 Vue3 + TypeScript + MQTT + 高德地图，实现以下功能：

🚦 车辆上下线状态实时更新（在线、离线、行驶、停车）
📡 接收设备的 GPS 数据并动态更新位置
🗺️ 与全局车辆信息绑定，实现响应式更新

一、MQTT 客户端封装

首先，我们基于 mqtt.js 封装一个 useMqtt 方法，用于连接 MQTT Broker 并处理消息。

（MQTT 订阅流程图 + 数据流转图）

import mqtt from "mqtt";
import { deviceStatusMap, latestLocationMap } from './deviceCache';export type DeviceStatus = 'online' | 'online_driving' | 'offline' | 'online_parking';const BROKER_URL = "你的MQTT Broker 的 WebSocket 接入地址";const statusMap: Record<string, DeviceStatus> = {'client.connected': 'online','client.disconnected': 'offline',
};export function useMqtt(onMessageCallback: (deviceId: string,data: { status: DeviceStatus; location: any; }) => void
) {const client = mqtt.connect(BROKER_URL);client.on("connect", () => {console.log("✅ [MQTT] Connected");const topics = ["device/status","login","dataStream/+/GPS",];topics.forEach((topic) => {client.subscribe(topic, (err) => {if (err) console.error(`❌ 订阅 ${topic} 失败`, err);else console.log(`📡 已订阅 topic: ${topic}`);});});});client.on("message", (topic, message) => {console.log("📨 收到 Topic:", topic);console.log("📦 原始消息:", message.toString());const str = message.toString();if (!str) return;try {// 设备上下线事件if (topic === "device/status") {/*** 预期消息格式：* {*   "clientid":"DEV001",*   "event":

查看全文

http://www.xdnf.cn/news/19526.html