Canvas 實時顯示二進制頻譜數據：WebSocket + Node.js 架構指南

需求拆解

• 數據源：C++ 頻譜儀，TCP 二進制協議，800點/幀，100ms 刷新（10fps）
• 展示端：網頁 Canvas/ECharts，局域網訪問
• 核心難點：瀏覽器無法直接建立 TCP 連接，需中轉服務

架構選型對比

推薦架構：Node.js 中轉服務

頻譜儀 (TCP:PortA) <---> Node.js (net.Server) <---> 瀏覽器 (WebSocket) <---> Canvas/ECharts
                    控制端口 (TCP:PortB)       (ws://localhost:8080)

關鍵實現步驟

1. Node.js TCP 客戶端連接頻譜儀

const net = require('net');
const client = new net.Socket();
client.connect({port: 5000, host: '192.168.1.100'}, () => {
    console.log('已連接頻譜儀');
});
client.on('data', (buffer) => {
    // 解析二進制協議 -> Float32Array
    const data = parseSpectrum(buffer);
    // 廣播給所有 WebSocket 客戶端
    wss.clients.forEach(ws => ws.send(data));
});

2. WebSocket 服務端

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

3. 前端接收並繪製

const ws = new WebSocket('ws://localhost:8080');
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
    const float32 = new Float32Array(event.data);
    updateChart(float32); // ECharts setOption 或 Canvas 繪製
};

部署建議

1. Node.js 服務部署在與頻譜儀同網段的工控機/工業網關
2. 前端文件放在 Node.js express.static 目錄或獨立 Nginx
3. 瀏覽器建議 Chrome/Firefox 最新版，保證 WebSocket/Canvas 性能
4. 歷史數據可用 localStorage 緩存，刷新頁面恢復顯示

協議解析提示

若頻譜儀協議為：包頭(2B) + 長度(2B) + 數據(800*4B) + 校驗(1B)，使用 buffer.readUInt16BE(offset)、buffer.readFloatBE(offset) 解析。