Latency Handling

import { ClientPrediction } from '@web-engine/core/network';
 
const prediction = new ClientPrediction();
 
// Simulation function (same on client and server)
function simulateMovement(state: GameState, input: InputFrame): GameState {
  const player = state.entities.get(localPlayerId);
  if (!player) return state;
 
  // Apply movement
  const speed = 5;
  player.pos[0] += input.inputs.move[0] * speed * 0.016;
  player.pos[2] += input.inputs.move[1] * speed * 0.016;
 
  // Apply gravity
  player.vel[1] -= 9.8 * 0.016;
  player.pos[1] += player.vel[1] * 0.016;
 
  return state;
}
 
// Process local input immediately
function onInput(input: InputFrame) {
  // Predict movement on client
  const predictedState = prediction.processInput(input, simulateMovement);
 
  // Apply predicted state to rendering
  updateVisuals(predictedState);
 
  // Send input to server for validation
  network.sendInput(input);
}
 
// Reconcile with server state
function onServerState(serverState: GameState, lastProcessedSeq: number) {
  const result = prediction.reconcile(
    serverState,
    lastProcessedSeq,
    simulateMovement
  );
 
  console.log('Prediction error:', result.predictionError);
  console.log('Rollback needed:', result.needsRollback);
 
  if (result.needsRollback) {
    // Re-simulate pending inputs from confirmed state
    console.log('Re-simulated', result.inputsReconciled, 'inputs');
  }
 
  // Apply reconciled state
  updateVisuals(prediction.getPredictedState());
}

// Server processes input and returns authoritative state
// with the last input sequence it processed
const stateUpdate = {
  timestamp: 1000,
  lastProcessedSequence: 42,
  entities: [
    {
      netId: 1,
      pos: [10.5, 0.2, 5.3],  // Server's authoritative position
      rot: [0, 0, 0, 1],
      lastProcessedSequence: 42
    }
  ]
};
 
// Client reconciles prediction with server state
const result = prediction.reconcile(
  stateUpdate,
  stateUpdate.lastProcessedSequence,
  simulateMovement
);
 
// If prediction error is large, we had misprediction
if (result.predictionError > 0.5) {
  console.warn('Large prediction error detected!');
 
  // Possible causes:
  // 1. Different simulation code between client/server
  // 2. Packet loss causing missed inputs on server
  // 3. Server applied different physics (collision, terrain)
  // 4. Lag spike causing out-of-order processing
}
 
// Reconciliation automatically:
// 1. Removes acknowledged inputs (seq <= 42)
// 2. Rewinds to server state
// 3. Re-applies remaining pending inputs (seq > 42)
// 4. Updates predicted state

class PredictionSmoother {
  private errorOffset = { x: 0, y: 0, z: 0 };
  private smoothingRate = 0.2; // Correct 20% per frame
 
  reconcile(serverPos: Vec3, predictedPos: Vec3) {
    // Calculate error
    const error = {
      x: serverPos.x - predictedPos.x,
      y: serverPos.y - predictedPos.y,
      z: serverPos.z - predictedPos.z,
    };
 
    // If error is small, smooth it out
    if (Math.abs(error.x) < 1 && Math.abs(error.y) < 1 && Math.abs(error.z) < 1) {
      this.errorOffset.x += error.x;
      this.errorOffset.y += error.y;
      this.errorOffset.z += error.z;
    } else {
      // Large error - teleport immediately
      this.errorOffset = { x: 0, y: 0, z: 0 };
      return serverPos;
    }
 
    // Return predicted position with partial correction
    return {
      x: predictedPos.x + this.errorOffset.x * this.smoothingRate,
      y: predictedPos.y + this.errorOffset.y * this.smoothingRate,
      z: predictedPos.z + this.errorOffset.z * this.smoothingRate,
    };
  }
 
  update() {
    // Decay error offset
    this.errorOffset.x *= (1 - this.smoothingRate);
    this.errorOffset.y *= (1 - this.smoothingRate);
    this.errorOffset.z *= (1 - this.smoothingRate);
  }
}

import { LagCompensator } from '@web-engine/core/network';
 
// Server-side lag compensation
const compensator = new LagCompensator(1000); // 1 second history
 
// Record state every frame
function serverUpdate(deltaTime: number) {
  const timestamp = Date.now();
 
  // Update game state
  updateGameLogic(deltaTime);
 
  // Record state for potential rollback
  compensator.recordState(timestamp, getCurrentGameState());
}
 
// Handle hitscan weapon fire
function handleHitscan(shooterId: number, timestamp: number, raycast: Ray) {
  // Get player's ping
  const player = getPlayer(shooterId);
  const ping = player.getAveragePing();
 
  // Calculate when the player actually saw the target
  const compensatedTime = timestamp - ping;
 
  // Rewind to that time
  const pastState = compensator.getStateAtTime(compensatedTime);
 
  if (!pastState) {
    console.warn('Cannot compensate - state too old');
    return false;
  }
 
  // Perform hit detection against rewound state
  const hit = performRaycast(raycast, pastState);
 
  if (hit) {
    console.log(`Hit! Compensated ${ping}ms lag`);
    applyDamage(hit.target, 25);
    return true;
  }
 
  return false;
}

import { SnapshotBuffer } from '@web-engine/core/network';
 
// Create buffer for each remote entity
const buffers = new Map<number, SnapshotBuffer>();
 
// Add snapshots from server
function onStateUpdate(entities: NetworkEntityState[]) {
  const timestamp = Date.now();
 
  for (const entity of entities) {
    let buffer = buffers.get(entity.netId);
 
    if (!buffer) {
      buffer = new SnapshotBuffer(64, 100); // 100ms interpolation delay
      buffers.set(entity.netId, buffer);
    }
 
    buffer.addSnapshot(timestamp, entity);
  }
}
 
// Render with interpolation
function render() {
  const renderTime = Date.now();
 
  for (const [netId, buffer] of buffers) {
    const interpolated = buffer.getInterpolated(renderTime);
 
    if (interpolated) {
      // Render entity at interpolated position
      renderEntity(netId, interpolated.state);
    }
  }
}
 
// Tune interpolation delay based on network conditions
function adjustInterpolationDelay(avgJitter: number) {
  // Higher jitter = more delay needed for smooth interpolation
  const delay = Math.max(50, Math.min(200, avgJitter * 2));
 
  for (const buffer of buffers.values()) {
    buffer.setInterpolationDelay(delay);
  }
}

import {
  NetworkMonitor,
  BandwidthThrottle,
  getNetworkMonitor
} from '@web-engine/core/network';
 
const monitor = getNetworkMonitor();
const throttle = new BandwidthThrottle();
 
// Monitor connection quality
setInterval(() => {
  const metrics = monitor.getMetrics();
 
  console.log('Connection Quality:', {
    quality: metrics.connectionQuality,
    rtt: metrics.averageRtt.toFixed(1) + 'ms',
    packetLoss: (metrics.packetLoss * 100).toFixed(1) + '%',
    jitter: metrics.jitter.toFixed(1) + 'ms'
  });
 
  // Adapt based on quality
  if (metrics.connectionQuality < 0.5) {
    // Poor connection - reduce quality
    setUpdateRate(10);           // 10 Hz instead of 20 Hz
    setPositionPrecision(8);     // Lower precision
    setNetworkLODDistance(50);   // More aggressive LOD
  } else if (metrics.connectionQuality > 0.8) {
    // Good connection - increase quality
    setUpdateRate(30);           // 30 Hz
    setPositionPrecision(16);    // Higher precision
    setNetworkLODDistance(100);  // Less aggressive LOD
  }
}, 1000);
 
// Bandwidth throttling
function sendUpdate(packet: NetworkPacket) {
  const packetSize = estimatePacketSize(packet);
 
  if (throttle.canSend(packetSize)) {
    network.sendPacket(packet);
    throttle.recordSent(packetSize);
  } else {
    // Bandwidth limit reached - queue for later or drop
    console.log('Bandwidth throttled');
  }
}

import { NetworkManager } from '@web-engine/core/network';
 
const network = NetworkManager.getInstance();
 
// Server sends its timestamp with each state update
function onStateUpdate(packet: StateUpdatePacket) {
  // Update client's clock offset
  network.updateServerTime(packet.timestamp);
}
 
// Get synchronized server time
function performTimedAction() {
  const serverTime = network.getServerTime();
 
  // Use server time for consistency
  const action = {
    type: 'ability',
    timestamp: serverTime,
    playerId: network.getClientId()
  };
 
  network.sendPacket(action);
}
 
// Check time offset
const offset = network.getDiagnostics().serverTimeOffset;
console.log(`Server time offset: ${offset}ms`);
 
// Offset is smoothed over time using exponential moving average
// This prevents jitter from affecting time-sensitive actions

class InputBuffer {
  private buffer: InputFrame[] = [];
  private maxBuffer = 60; // 1 second at 60fps
 
  addInput(input: InputFrame) {
    this.buffer.push(input);
 
    // Limit buffer size
    if (this.buffer.length > this.maxBuffer) {
      this.buffer.shift();
    }
  }
 
  // Flush buffered inputs when connection recovers
  flush(network: NetworkManager) {
    console.log(`Flushing ${this.buffer.length} buffered inputs`);
 
    for (const input of this.buffer) {
      network.sendInput(input);
    }
 
    this.buffer = [];
  }
 
  clear() {
    this.buffer = [];
  }
}
 
// Usage
const inputBuffer = new InputBuffer();
 
network.on('disconnect', () => {
  console.log('Disconnected - buffering inputs');
});
 
network.on('reconnect', () => {
  console.log('Reconnected - flushing buffer');
  inputBuffer.flush(network);
});
 
function onInput(input: InputFrame) {
  if (network.isActive()) {
    network.sendInput(input);
  } else {
    inputBuffer.addInput(input);
  }
}

import { NetworkManager } from '@web-engine/core/network';
 
const network = NetworkManager.getInstance();
 
// Simulate poor network conditions for testing
network.configureSimulation({
  latencyMs: 150,        // 150ms round-trip latency
  jitterMs: 30,          // ±30ms jitter
  packetLoss: 0.05,      // 5% packet loss
  duplicateChance: 0.01  // 1% packet duplication
});
 
// Simulate different connection types
const profiles = {
  perfect: { latencyMs: 0, jitterMs: 0, packetLoss: 0 },
  lan: { latencyMs: 10, jitterMs: 2, packetLoss: 0.001 },
  broadband: { latencyMs: 50, jitterMs: 10, packetLoss: 0.01 },
  mobile4g: { latencyMs: 100, jitterMs: 30, packetLoss: 0.02 },
  mobile3g: { latencyMs: 200, jitterMs: 50, packetLoss: 0.05 },
  satellite: { latencyMs: 600, jitterMs: 100, packetLoss: 0.02 },
};
 
// Test with mobile 4G simulation
network.configureSimulation(profiles.mobile4g);