更改为通过websocket获取数据

baoshiwei

6 天以前 5bf14aed888cd0e258e325c65f14022dad02985b

 src/components/ThreeDDisplay.vue

@@ -2,11 +2,8 @@
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { sendToPipe } from '../pipe_client';
import { createDataReceiver } from '../utils/dataFetcher';

const props = defineProps<{
  pipeName: string;
}>();

const containerRef = ref<HTMLElement | null>(null);
let scene: THREE.Scene | null = null;
@@ -358,53 +355,25 @@
  renderer.setSize(width, height);
}

// 状态变量，用于控制错误显示频率
const errorCount = ref(0);
const maxConsecutiveErrors = 5;
const showingError = ref(false);

// 接收管道数据的函数
async function receiveForceData() {
  try {
    // 从管道接收数据
    const response = await sendToPipe(props.pipeName, 'GET_FORCE_DATA');
    
    // 成功接收数据，重置错误计数
    errorCount.value = 0;
    if (showingError.value) {
      showingError.value = false;
      console.log('管道通信已恢复');
    }
    
    // 解析接收到的数据
    try {
      const forceData = JSON.parse(response);
      if (Array.isArray(forceData) && forceData.length === 6) {
        updateVisualization(forceData);
      }
    } catch (e) {
      console.warn('解析数据失败:', e);
    }
  } catch (err) {
    // 增加错误计数
    errorCount.value++;
    
    // 只在连续错误达到阈值时显示错误信息，避免日志刷屏
    if (errorCount.value >= maxConsecutiveErrors && !showingError.value) {
      showingError.value = true;
      console.error('管道通信持续失败，请检查服务端状态:', err);
    }
  }
}


// 定时获取数据
let dataTimer: number | null = null;

onMounted(() => {
  initScene();
  animate();
  
  // 每秒获取一次数据
  dataTimer = window.setInterval(receiveForceData, 3000);
  const receiveData = createDataReceiver( (forceData) => {
    updateVisualization(forceData);
  });
  
  // 每100ms获取一次数据
  dataTimer = window.setInterval(receiveData, 100);
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {