retour jeu multijoueur

SpeedyWiki

Speedrun Wikipedia en multijoueur, tout dans le navigateur. On part d’une page, et on a une liste de pages à atteindre, à vous de chercher en naviguant de liens en liens. Pendant ce temps, le serveur WebSocket calcule les moves, le proxy réécrit les pages et l’UI affiche une interface style Windows 95.

TEMPS RÉEL

Jeu web multijoueurs

via websocket

CHAT

Discussions en direct

socialisez!

MongoDB

Logs des parties

BDD NoSQL

crew

co-dev

Jules Grange (C'est moi)

Développeur Back-End Websocket & Proxy

Martial Carceles

MongoDB & Solveur python

Guillaume Augeraud

Développeur Front-End & Designer

Randy Bou Jaber

Game Designer

Le concept

Un duel nerveux : chaque joueur clique sur les liens internes dans Wikipedia jusqu'à atteindre toutes ses pages cibles. Chaque action est transmise en WebSocket au serveur qui gère toute la logique du jeu.

Les joueurs peuvent récolter des objets positifs ou négatifs et les utiliser pour mettre des bâtons dans les roues des adversaires. Un chat est intégré pour permettre la discussion entre les joueurs.

Flux de communication temps réel

Comment les joueurs interagissent avec le système

Client 1 (Hôte)

Client 2 (Joueur)

Serveur WebSocket

Serveur Proxy

Wikipedia

Connexion WS établie
CONNECT
Création de partie
CREATE
Confirmation de création
OK
Partage du code lobby
SHARE
Tentative de rejoindre
JOIN
Confirmation d'ajout
OK
Lancement de la partie
START
Fetch des articles randoms
FETCH
Retour des articles
ARTICLES
Distribution objectifs
OBJECTIVES
Distribution objectifs
OBJECTIVES
Navigation vers page
GET
Requête Wikipedia
REQUEST
Page originale
HTML
Page modifiée
MODIFIED
Navigation vers page
GET
Requête Wikipedia
REQUEST
Page originale
HTML
Page modifiée
MODIFIED
Message chat
CHAT
Broadcast à l'expéditeur
BROADCAST
Broadcast aux autres
BROADCAST
架構

stack technique - tout est connecté

Serveur WebSocket

Interactions instantanées, synchronisation des courses et scoreboard en direct. Le serveur pilote tout le rythme des speedruns.

Proxy Wikipedia

Express + Axios + CORS pour modifier les pages Wiki à la volée et injecter le tracking des liens dans la couche front.

Cadence Git

Travail en workflow strict avec branches, PR, revues (presque) quotidiennes et règles de merge. Documentation clean.

solveur python

BFS Bidirectionnel avec Multi-Objectifs

Visualisation interactive du solveur de graphe

Nous avons construit un service Python asynchrone qui explore le graphe Wikipedia depuis notre snapshot MongoDB. Il utilise un BFS bidirectionnel pour trouver des chemins entre plusieurs objectifs, puis optimise le parcours avec un scoring par permutations.

La démo ci-dessous montre comment l'algorithme explore simultanément depuis le départ et les objectifs, se rencontrant au milieu pour un speedup exponentiel.

(La démo s'execute en front dans le navigateur et peut devenir assez lent sur les gros graphes)

Contrôles

Légende

États des nœuds

Départ
Objectifs
Avant
Arrière
File Avant
File Arrière
Visités Avant
Visités Arrière
Intersection
Chemin
Test
Meilleur
  • BFS bidirectionnel permets de trouver rapidement un chemin valable entre deux nodes (pas forcément le meilleur)
  • Plusieurs objectifs : on essayes alors toutes les combinaisons pour trouver le meilleur ordre

Solveur conçu par Martial Carceles. Prototype non exécuté pendant les parties.

Architecture v2

Déploiement Cloud & Redis

Mise à jour 2026 - Scalabilité

Un an après le rendu du projet, nous sommes revenus sur le code pour le passer en production réelle. Fini le localhost, place au Cloud.

L'objectif principal était la scalabilité : transformer un serveur Node.js monolithique en une architecture stateless capable de monter en charge. Pour cela, nous avons intégré Redis qui gère désormais tout l'état du jeu (lobbies, joueurs, scores) et la synchronisation via Pub/Sub.

Le tout est conteneurisé avec Docker et déployé sur AWS (Lightsail pour les WebSockets, App Runner pour l'API) via des scripts PowerShell automatisés.

AWS Lightsail

Hébergement des conteneurs WebSocket avec support des connexions persistantes longue durée.

Redis Store

Centralisation de l'état du jeu. Permet à n'importe quel conteneur de traiter les messages de n'importe quel joueur.

Sécurité & Env

Sortie des secrets du code, passage en variables d'environnement injectées au runtime.

Fonctionnalités

  • 1 Synchronisation temps réel de toutes les actions des joueurs via WebSocket
  • 2 Proxy HTTP qui modifie les pages Wikipedia à la volée (liens, CSS, tracking)
  • 3 Système d'objets collectables (positifs et négatifs) pour pimenter les courses
  • 4 Chat intégré pour la communication entre joueurs pendant la partie
  • 5 Gestion de lobbies avec codes d'invitation uniques
  • 6 Persistance des parties dans MongoDB pour historique et statistiques
  • 7 Prototype de solveur Python qui pré-valide les objectifs hors-prod

Technologies

Frontend

ReactViteTypeScript

Temps réel

WebSocketWSContext custom

Backend

Node.jsExpressMongoDB Atlas

Proxy avec Wikipedia

AxiosRéécriture HTMLCORS custom

Solveur Python (R&D)

Pythonasyncio + aiohttpMotor (MongoDB)

DevOps

DockerAWS LightsailAWS App RunnerRedisPowerShell

travail d'équipe

crew

Collaboration

Daily stand-up + board Trello custom pour assigner chaque sprint.

Pair programming sur les modules critiques (proxy + socket handler).

Session de review pour chaque PR afin de garder un code cohérent.

Apprentissages

  • 1 Composer une communication temps réel robuste pour un jeu multi.
  • 2 Négocier les conflits Git et écrire des PR claires.
  • 3 Industrialiser un proxy HTTP de modification de pages.
  • 4 Imaginer un UI style rétro Windows 95.

Images à venir

Captures d’écran du lobby et des speedruns seront ajoutées pour montrer comment l’interface réagit en mode speedrun.

Lobby UI

Gameplay

Podium