Mobile App Development for Online Chess

Mobile Application Development for Online Chess

Chess app with online play — classic task with non-trivial technical solutions. Main complexity not in board rendering but game state synchronization between two clients in real time with minimal latency and correct timer handling.

WebSocket and Move Synchronization

Move must appear at opponent instantly. HTTP polling unsuitable — need WebSocket. On iOS — URLSessionWebSocketTask (native, no dependencies) or Starscream. On Android — OkHttp WebSocket. For Flutter — web_socket_channel.

Exchange protocol: client sends move in UCI notation (e2e4), server validates position, sends update to both players. Important: client does not trust itself for move legality — server does all validation. Otherwise modified app can make illegal moves.

// Android — send move
webSocket.send(Json.encodeToString(MoveMessage(
    gameId = currentGameId,
    move = "e2e4",
    remainingTimeMs = timerViewModel.whiteTimeMs
)))

Connection break handling: on WebSocket loss client switches to HTTP polling every 2 seconds, attempts reconnect with exponential backoff. Game continues — player with bad connection shouldn't lose time automatically.

Timer: Synchronization Without Client Trust

Timer in online chess — source of disputes. Keeping timer only on client, unscrupulous player can slow it down. Correct scheme: server stores white_remaining_ms and black_remaining_ms, updates on each move, sends current values to clients. Client displays timer (decrement animation) but isn't truth source.

On reconnect client requests current game state and syncs timer display with server.

Board Rendering

For native apps: Canvas API (Android) or CAShapeLayer + CALayer (iOS) sufficient for static board render. Move animation — piece ImageView/UIImageView movement via ValueAnimator / UIView.animate.

In Flutter — popular flutter_chess_board package as starting point but its render not always performant on old devices. Custom CustomPainter with Canvas.drawImage for pieces gives better control.

Pieces — SVG converted to raster images at different resolutions. Not PNG directly — SVG allows recoloring pieces for different board themes.

Chess Engine for AI Play

For game against computer need chess engine. Stockfish — industry standard, open, strongest. For mobile app:

• iOS: Stockfish compiles as C++ library via SPM or as static .a file. UCI protocol via Pipe in separate Thread. Not main thread — position analysis blocks UI.
• Android: Stockfish via JNI or ready wrapper stockfish-android.
• Flutter: stockfish package (wraps native library).

Search depth managed via UCI commands: setoption name Skill Level value 10 (0–20 for different difficulty), go movetime 1000 (move time in ms).

Matchmaking and Rating

Elo rating — industry standard. Formula simple, implemented server-side: newRating = oldRating + K * (score - expectedScore), where K = 32 for new players, 16 for experienced.

Matchmaking: find opponent within ±100 Elo range with timeout expansion every 10 seconds. Queue in Redis Sorted Set, score = queue timestamp, search takes nearest by rating from current participants.

Timeline Estimates

App with AI play (Stockfish) without online — 4–5 weeks. With online play, timer, matchmaking and rating — 8–12 weeks.