前端定时清理websockect推送数据在浏览器的缓存

wangfei

2025-05-15 9fe113a778a94823185a1fa35ab316987b2f3220

前端定时清理websockect推送数据在浏览器的缓存

 UI-Project/src/views/largescreendisplay/screendisplay.vue

@@ -145,6 +145,7 @@
    z: 1
  }));


  const optionOne = {
    title: {
      text: title,
@@ -522,6 +523,28 @@
const chartTemp = ref(null)
const chartHollow = ref(null)

const cleanupWebSocketData = (completeCleanup) => {
  if (completeCleanup) {
    // 完全清理
    rawGlassStorageDetailList.value = [];
    orderDTOS.value = [];
    // ...其他数组
  } else {
    // 部分清理 - 保留最近数据
    const MAX_ITEMS = 50;
    rawGlassStorageDetailList.value = rawGlassStorageDetailList.value.slice(-MAX_ITEMS);
    orderDTOS.value = orderDTOS.value.slice(-MAX_ITEMS);
    // ...其他数组
  }
  
  // 清理图表
  [myChart, myChart2, myChartLoad, myChartEdg, myChartTemp, myChartHollow].forEach(chart => {
    if (chart) {
      chart.clear();
      // 如果需要，可以重新初始化图表
    }
  });
};

// 在组件挂载时设置默认时间范围
onMounted(async () => {
@@ -541,6 +564,21 @@
  // 设置时间范围为 [开始时间, 结束时间]
  // timeRange.value = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')];

  const cleanupInterval = setInterval(() => {
    cleanupWebSocketData(true); // 完全清理
  }, 3000);
  
  // 每次收到消息时检查数据量
  const originalHandleMessage = handleMessage;
  handleMessage = (data) => {
    originalHandleMessage(data);
    cleanupWebSocketData(false); // 部分清理
  };
  
  onUnmounted(() => {
    clearInterval(cleanupInterval);
    cleanupWebSocketData(true); // 组件卸载时完全清理
  });
});
// onMounted(() => {
//   socket = initializeWebSocket(socketUrl, handleMessage);