动态溯源 1. 添加websocket逻辑

riku

2025-05-14 a96e571b174fa30697f3aa6fdb22b3cf93d21b71

动态溯源
1. 添加websocket逻辑

 src/api/index.js

@@ -14,7 +14,7 @@
if (debug) {
  ip1 = 'http://192.168.0.110:8084/';
  // ip1 = 'http://locahost:8084/';
  ws = `192.168.0.110:9030`;
  ws = `192.168.0.110:9031`;
}

const $http = axios.create({

 src/api/websocket.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
import { ws } from '@/api/index';

var socket;
var onMsgEvents = [];

const MAX_TRY_TIMES = 5;
let tryTimes = 0;

function startSocket() {
  if (socket) {
    socket.close();
  }
  const url = 'ws://' + ws + '/ws';
  socket = new WebSocket(url);
  // ä¸ŽæœåŠ¡å™¨å»ºç«‹è¿žæŽ¥ï¼šå‘送消息到服务器
  socket.onopen = () => {
    console.log('connect: ');
  };
  // æ”¶åˆ°æœåŠ¡å™¨å‘送的消息：event处理服务器返回的数据
  socket.onmessage = (event) => {
    console.log('receive: ', event.data);
    onMsgEvents.forEach((e) => {
      if (typeof e === 'function') {
        e(event.data);
      }
    });
  };
  // è¿žæŽ¥æˆ–通信过程中发生错误
  socket.onerror = (event) => {
    console.log('errror: ', event);
  };
  // ä¸ŽæœåŠ¡å™¨æ–­å¼€è¿žæŽ¥
  socket.onclose = (event) => {
    console.log('close: ', event.code);
    // setTimeout(() => {
    //   if (tryTimes < MAX_TRY_TIMES) {
    //     startSocket();
    //     tryTimes++;
    //   } else {
    //     tryTimes = 0;
    //   }
    // }, 5000);
  };
}

if (socket == undefined) {
  startSocket();
}

function send(value) {
  if (socket) {
    socket.send(value);
  }
}

function registerReceiveEvent(event) {
  if (onMsgEvents.indexOf(event) == -1) {
    onMsgEvents.push(event);
  }
}

function removeReceiveEvent(event) {
  const index = onMsgEvents.indexOf(event);
  if (index != -1) {
    onMsgEvents.splice(index, 1);
  }
}

export default { send, registerReceiveEvent, removeReceiveEvent };

 src/views/historymode/HistoryMode.vue

@@ -28,7 +28,7 @@
        :factor="factorDatas.factor[factorType]"
        @change="handleLegendTypeChange"
      ></FactorLegend>
      <SourceTrace></SourceTrace>
      <!-- <SourceTrace></SourceTrace> -->
    </el-row>
    <el-row class="historical" justify="center">
      <HistoricalTrajectory

 src/views/realtimemode/RealtimeMode.vue

@@ -14,7 +14,7 @@
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
      <!-- <SourceTrace></SourceTrace> -->
      <SourceTrace></SourceTrace>
    </el-row>
    <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
    <RealTimeTrend
@@ -43,8 +43,12 @@
  clearFetchingTask
} from '@/utils/factor/data';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
import websocket from '@/api/websocket';

// const mapAnimation = new MapAnimation();

// è°ƒè¯•æ¨¡å¼
const mode = 'debug';

export default {
  components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
@@ -103,24 +107,29 @@
        // this.draw();
        this.factorDatas = fDatas;
      });
      if (mode == 'debug') {
        websocket.send(JSON.stringify(data));
      }
    },
    fetchRealTimeData() {
      this.fetchData((page) => {
        return fetchHistoryData(
          {
        const param =
          mode == 'debug'
            ? {
            deviceCode: this.deviceCode,
            // startTime: '2024-08-20 06:00:00',
            // endTime: '2024-08-20 06:02:00',
                startTime: '2025-01-16 11:30:00',
                endTime: '2025-01-16 11:32:00',
            page,
            perPage: 100
          },
          false
        ).then((res) => {
              }
            : {
                deviceCode: this.deviceCode,
                page,
                perPage: 100
              };
        return fetchHistoryData(param, false).then((res) => {
          this.onFetchData(res.data);
          this.onMapData(res.data);
          // if (res.data.length > 0) {
          //   this.fetchNextData(res.data[res.data.length - 1].time);
          // }
          this.fetchNextData();
          thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
        });

 src/views/sourcetrace/SourceTrace.vue

@@ -18,8 +18,12 @@
  </BaseCard>
</template>
<script setup>
/**
 * åŠ¨æ€æº¯æºä¿¡æ¯ç®¡ç†
 * é€šè¿‡websocket方式接收后端推送的异常信息并展示
 */
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
import { ws } from '@/api/index';
import websocket from '@/api/websocket';

const height = `60vh`;

@@ -35,48 +39,25 @@

const streams = reactive([]);

let socket;

const inputVal = ref('');
const handleSend = () => {
  if (socket) {
    socket.send(inputVal.value);
  }
};

const handleLink = () => {
  if (socket) {
    socket.close();
  }
  const url = 'ws://' + ws + '/ws';
  // socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
  socket = new WebSocket(url);
  // ä¸ŽæœåŠ¡å™¨å»ºç«‹è¿žæŽ¥ï¼šå‘送消息到服务器
  socket.onopen = () => {
    console.log('connect: ');
  };
  // æ”¶åˆ°æœåŠ¡å™¨å‘送的消息：event处理服务器返回的数据
  socket.onmessage = (event) => {
    console.log('receive: ', event.data);
    putWorkStream(event.data);
  };
  // è¿žæŽ¥æˆ–通信过程中发生错误
  socket.onerror = (event) => {
    console.log('errror: ', event);
  };
  // ä¸ŽæœåŠ¡å™¨æ–­å¼€è¿žæŽ¥
  socket.onclose = (event) => {
    console.log('close: ', event.code);
  };
  websocket.send(inputVal.value);
};

/**
 * æ·»åŠ ä¸€æ¡å·¥ä½œæµä¿¡æ¯
 * @param {*} data
 */
function putWorkStream(data) {
const putWorkStream = (data) => {
  const obj = JSON.parse(data);
  streams.push(obj);
  scrollToBottom();
}
};

onMounted(() => {
  websocket.registerReceiveEvent(putWorkStream);
});
onUnmounted(() => {
  websocket.removeReceiveEvent(putWorkStream);
});
</script>