Multiplayer game development — WebSocket networking and state sync

Understanding multiplayer game development is the foundation of this guide. Below we break it down step by step so you can act with confidence.

Multiplayer is the most challenging and rewarding area of game development. Sending game state over a network introduces latency, packet loss, and synchronization problems that do not exist in single-player games.

This lesson covers the architecture and techniques for real-time multiplayer browser games using WebSocket.

Multiplayer Game Development: Client-server architecture

The authoritative server pattern prevents cheating and ensures consistency. The server runs the game simulation; clients send input and receive state:

// server.js — authoritative game server
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });
const players = new Map();

wss.on('connection', ws => {
  const id = crypto.randomUUID();
  players.set(id, { x: 400, y: 300, vx: 0, vy: 0 });

  ws.on('message', raw => {
    const msg = JSON.parse(raw);
    if (msg.type === 'input') {
      const p = players.get(id);
      p.vx = msg.dx * 200;
      p.vy = msg.dy * 200;
    }
  });

  ws.on('close', () => players.delete(id));
  ws.send(JSON.stringify({ type: 'welcome', id }));
});

// Server game loop — 60 Hz
setInterval(() => {
  const dt = 1 / 60;
  for (const [id, p] of players) {
    p.x += p.vx * dt;
    p.y += p.vy * dt;
    // Clamp to world bounds
    p.x = Math.max(0, Math.min(800, p.x));
    p.y = Math.max(0, Math.min(600, p.y));
  }

  const state = Object.fromEntries(players);
  const payload = JSON.stringify({ type: 'state', players: state });
  for (const client of wss.clients) {
    client.send(payload);
  }
}, 1000 / 60);

Client-side prediction

Without prediction, player movement feels sluggish because every action waits for a server round-trip. Client-side prediction applies input locally and reconciles when the server confirms:

const ws = new WebSocket('ws://localhost:8080');
let serverState = {};
let localPlayer = { x: 400, y: 300 };
let inputSeq = 0;
const pendingInputs = [];

function sendInput(dx, dy) {
  const input = { type: 'input', dx, dy, seq: ++inputSeq };
  ws.send(JSON.stringify(input));
  pendingInputs.push(input);

  // Apply locally (prediction)
  localPlayer.x += dx * 200 * (1/60);
  localPlayer.y += dy * 200 * (1/60);
}

ws.onmessage = e => {
  const msg = JSON.parse(e.data);
  if (msg.type === 'state') {
    serverState = msg.players;

    // Reconciliation: replay unacknowledged inputs
    if (serverState[myId]) {
      localPlayer.x = serverState[myId].x;
      localPlayer.y = serverState[myId].y;

      // Remove acknowledged inputs
      while (pendingInputs.length && pendingInputs[0].seq <= msg.lastSeq) {
        pendingInputs.shift();
      }
      // Re-apply pending
      for (const inp of pendingInputs) {
        localPlayer.x += inp.dx * 200 * (1/60);
        localPlayer.y += inp.dy * 200 * (1/60);
      }
    }
  }
};

Entity interpolation

Other players' positions arrive at server tick rate. Interpolating between snapshots makes their movement smooth:

const INTERP_DELAY = 100; // ms behind real-time

class RemoteEntity {
  constructor() {
    this.snapshots = []; // { time, x, y }
    this.x = 0; this.y = 0;
  }

  addSnapshot(time, x, y) {
    this.snapshots.push({ time, x, y });
    // Keep only recent snapshots
    if (this.snapshots.length > 30) this.snapshots.shift();
  }

  interpolate(now) {
    const renderTime = now - INTERP_DELAY;
    const snaps = this.snapshots;

    // Find surrounding snapshots
    for (let i = 0; i < snaps.length - 1; i++) {
      if (snaps[i].time <= renderTime && snaps[i+1].time >= renderTime) {
        const t = (renderTime - snaps[i].time) / (snaps[i+1].time - snaps[i].time);
        this.x = snaps[i].x + (snaps[i+1].x - snaps[i].x) * t;
        this.y = snaps[i].y + (snaps[i+1].y - snaps[i].y) * t;
        return;
      }
    }
    // Extrapolate from last snapshot
    if (snaps.length > 0) {
      const last = snaps[snaps.length - 1];
      this.x = last.x;
      this.y = last.y;
    }
  }
}

When evaluating multiplayer game development, start with the fundamentals: what problem it solves, who it serves, and how it compares to the alternatives buyers consider first.

Start with the fundamentals. Define who you are serving, the single outcome you want, and the budget you are comfortable committing before you compare any options.

A practical rule is to favour clarity over cleverness. The choice that is easiest to understand, spell, remember and act on tends to win over the long run.

Context changes the answer. What is optimal for a fast-moving startup is rarely optimal for an established brand, so weigh your own stage, market and ambitions.

Avoid the common mistakes: rushing the decision, copying competitors blindly, and ignoring the total cost of ownership beyond the very first year of use.

Think in terms of trade-offs rather than a single perfect answer. Every option trades memorability, cost, reach and flexibility in a slightly different mix.

Document your reasoning. Writing down why you chose one path makes it far easier to revisit the decision later and to explain it to partners and investors.

Test with real people. A quick check with a handful of your actual customers will surface problems that no amount of internal debate ever reveals.

Plan for growth. The option that fits today should still make sense when your audience, catalogue or team is several times larger than it is right now.

Finally, revisit the decision periodically. Markets, tools and best practices move quickly, and a choice that was ideal last year may deserve a fresh look today.

When evaluating multiplayer game development, start with the fundamentals: what problem it solves, who it serves, and how it compares to the alternatives buyers consider first.

Start with the fundamentals. Define who you are serving, the single outcome you want, and the budget you are comfortable committing before you compare any options.

A practical rule is to favour clarity over cleverness. The choice that is easiest to understand, spell, remember and act on tends to win over the long run.

Context changes the answer. What is optimal for a fast-moving startup is rarely optimal for an established brand, so weigh your own stage, market and ambitions.

Avoid the common mistakes: rushing the decision, copying competitors blindly, and ignoring the total cost of ownership beyond the very first year of use.

Frequently asked questions

Should I use WebSocket or WebRTC for multiplayer?

WebSocket for most games. It is simpler, works through firewalls, and the server can be authoritative. WebRTC is peer-to-peer and lower latency, but harder to set up and harder to prevent cheating.

How many players can a WebSocket server handle?

A single Node.js server handles 1000-5000 concurrent players for a typical game. Beyond that, shard into game rooms or use multiple server processes.