前端使用Websocket、MQTT连接、订阅,进行航线数据传输

javascript 复制代码
<template>
  <div id="map-container" ref="mapContainer" style="height: 600px;"></div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import MQTT from 'mqtt';
import mqtt from 'mqtt';
import { ElMessage } from 'element-plus';

// 地图和MQTT配置信息
const amapKey = '高德key';
const mqttTopic = ''; // 订阅的主题
//mqtt配置
let options = {
  username: 'admin',
  password: 'public',//密码
  clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),// 随机生成客户端ID
  connectTimeout: 600000,
  keepalive: 10,//心跳,单位秒,如果后台开启监听可以快速知道有没有退出
  clean: true,
  reconnecrPeriod: 3000,//重连周期,1000毫秒,两次之间的时间间隔
  resubscribe: true,//如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
}
//ws wss是在h5网页上websoket协议 而wx wxs是针对微信小程序使用 当然如果你用uniapp做app的话 使用的也是wx 
const client = MQTT.connect(`ws://你的ip:8083/mqtt`, options);
client.on('connect', (res) => {
  ElMessage.success("链接成功")
  client.subscribe(mqttTopic, (err) => {
    if (!err) {
      ElMessage.success("订阅成功")
    }
  })
}).on('message', (topic, message) => {
  console.log(topic, JSON.parse(message))
  //接受服务端信息
}).on('reconnect', (topic, message) => {
  ElMessage.warning("重连")
}).on('error', () => {
  console.log('77877')
  //重新连接
  client.reconnect()
})
// 地图容器的引用
const mapContainer = ref(null);

onMounted(async () => {
  try {
    // 加载高德地图API
    const AMap = await AMapLoader.load({
      key: amapKey,
      version: '2.0',
      plugins: ['AMap.Polyline'],
    });

    // 初始化地图
    const map = new AMap.Map(mapContainer.value, {
      zoom: 10,
      center: [116.397428, 39.90923], // 北京市中心点
    });

    // 地图上的点位,示例为北京的几个点
    const points = [
      new AMap.LngLat(116.191031, 39.988585),
      new AMap.LngLat(116.389275, 39.925818),
      new AMap.LngLat(116.287444, 39.810742),
    ];

    // 绘制航线
    const polyline = new AMap.Polyline({
      path: points,
      strokeColor: "#FF33FF",
      strokeWeight: 6,
      strokeOpacity: 0.2,
      strokeOpacity: 1,
    });
    map.add(polyline);

    // 序列化航线数据
    const lineData = JSON.stringify({ points: points.map(p => [p.lng, p.lat]) });

    // 发布消息到MQTT主题
    client.publish(mqttTopic, lineData, { qos: 1 }, (err) => {
      if (err) {
        console.error('MQTT消息发布失败:', err);
      } else {
        console.log('MQTT消息发布成功');
      }
    });

  } catch (error) {
    console.error('地图或MQTT初始化失败:', error);
  }
});

// MQTT消息接收回调
client.on('message', (topic, message) => {
  console.log(`从主题${topic}接收到消息: ${message.toString()}`);
});

// 组件销毁时断开MQTT连接
onUnmounted(() => {
  client.end();
});
</script>

<style>
#map-container {
  width: 100%;
}
</style>
相关推荐
qq_4560016535 分钟前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
sunbyte4 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊4 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君6 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库7 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端7 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED7 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
EasyDSS7 小时前
视频监控从安装到优化的技术指南,视频汇聚系统EasyCVR智能安防系统构建之道
大数据·网络·网络协议·音视频
rufeike7 小时前
UDP协议理解
网络·网络协议·udp