SocketXO

Features Demo Architecture Tech Stack

Overview

SocketXO is a high-performance, browser-based real-time Tic-Tac-Toe web application. It is built specifically to demonstrate production-grade real-time system behavior, focusing heavily on connection resilience, server-authoritative state, and deterministic state synchronization over Socket.io.

Features

• The "Disconnect Handshake" — A highly resilient recovery system. If a player disconnects, the server holds their seat for a 30-second grace period while notifying the opponent. State is instantly restored upon return.
• Server-Authoritative State Engine — The backend enforces 100% synchronization consistency with zero desync incidents. Invalid moves are strictly rejected.
• Frictionless Matchmaking — Instant guest identity creation and a global matchmaking queue that pairs players in under 2 seconds.
• Room-Scoped Real-Time Chat — In-game chat drawer sanitized against XSS for secure communication between players.
• AI Benchmark Mode — Deterministic Minimax AI mode for testing game logic correctness.
• Dev-Mode Chaos Controls — A hidden mission control dashboard to intentionally simulate lag and disconnects.

Demo

Online Match — The Disconnect Handshake

Demonstrating multi-client synchronization and managed recovery during network loss.

Demo-online

[!TIP] This recording showcases the managed 30-second grace period where the server holds the session, notifies the opponent, and restores the full board state upon reconnection.

AI Benchmark Mode

Demonstrating the deterministic Minimax engine.

Demo-ai

Screenshots

Lobby

Game Board

Tech Stack

Architecture

SocketXO is built with a state-first, server-authoritative architecture. The system ensures that all clients are perfectly synchronized by treating the backend as the single source of truth for game logic and session state.

System Overview

• Event-Driven Core: Real-time communication is handled via Socket.io, with a strict event contract defined in the shared/ package.
• Session-Based Identity: Players are identified by a persistent unique ID rather than their socket connection, allowing for seamless recovery across page refreshes or network drops.
• Reactive State Sync: The frontend uses a reactive approach, where UI components instantly update based on the server-broadcasted state.

The Resilient Disconnect Handshake

The centerpiece of SocketXO's reliability is its Disconnect Handshake mechanism. Unlike typical socket apps where a disconnect ends the session, SocketXO enters a managed recovery state.

sequenceDiagram
participant P1 as Player A
participant S as Server
participant P2 as Player B

Note over P1, P2: Active Game Playing
P1-xS: Connection Lost
S->>S: Start 30s Grace Timer
S->>P2: Emit 'player_disconnected'
Note right of P2: UI shows "Opponent Disconnected"

alt Reconnect within 30s
P1->>S: Reconnect with ReconnectToken
S->>S: Validate Token & Rebind Session
S->>S: Cancel Grace Timer
S->>P1: Emit 'reconnect_success'
S->>P2: Emit 'player_reconnected'
S->>P1: Sync full Game State
else Grace Timer Expires
S->>S: Abandon Room
S->>P2: Emit 'game_over' (Opponent Left)
end

Technical Pillars

• Authoritative Validation: The game engine on the server validates every move against the current board state and player turns before broadcasting updates.
• Atomic State Updates: State transitions are atomic, preventing race conditions where two players might attempt to claim the same square simultaneously.
• Cryptographic Session Tokens: Reconnections are secured using short-lived tokens, preventing session hijacking.