Function streamFrame

examples/worker-streaming/main.ts:185–230

()

  let intervalId: number | null = null;

  const streamFrame = (): void => {
    if (!streaming || totalPoints >= MAX_POINTS) {
      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = null;
      }
      setText('fps', 'Complete');
      return;
    }

    const now = performance.now();
    const delta = now - lastFrameTime;

    // Throttle to target FPS
    if (delta < FRAME_INTERVAL_MS) {
      return;
    }

    lastFrameTime = now;

    // Generate batch
    const batch = generateBatch(nextX, POINTS_PER_FRAME);
    nextX += POINTS_PER_FRAME * 0.01;

    // Pack to Float32Array (Story 8h: zero-copy transfer)
    const packed = packDataPoints(batch);
    const byteSize = packed.byteLength;

    // Append with zero-copy transfer
    // The 'xy' format specifies interleaved [x0,y0,x1,y1,...] layout
    // 
    // IMPORTANT: After this call, packed.buffer is transferred to the worker and becomes
    // detached (packed.length === 0). Do NOT reuse packed after this point.
    // Each call to packDataPoints() creates a new ArrayBuffer that can be transferred once.
    chart.appendData(0, packed, 'xy');

    // Update metrics
    totalPoints += POINTS_PER_FRAME;
    fpsTracker.update();
    dataRateTracker.update(byteSize);

    // Update UI
    setText('fps', fpsTracker.getFPS().toFixed(0));
    setText('points', formatInt(totalPoints));
    setText('dataRate', formatDataRate(dataRateTracker.getBytesPerSecond()));
  };

  // Start streaming
  intervalId = window.setInterval(streamFrame, 0);