Découvrez comment fonctionne Edgegap

Découvrez comment fonctionne Edgegap

/

Browser Games (JavaScript-based)

/

Publié

Publié

Publié

dernière vérification de l'exactitude

dernière vérification de l'exactitude

dernière vérification de l'exactitude

Jeux par navigateur (basés sur JavaScript) : Comment héberger des jeux multijoueurs Three.js, Phaser et Babylon.js sur des serveurs dédiés, et ajouter le Matchmaking

Jeux par navigateur (basés sur JavaScript) : Comment héberger des jeux multijoueurs Three.js, Phaser et Babylon.js sur des serveurs dédiés, et ajouter le Matchmaking

Ce guide vous montre comment héberger un jeu multijoueur sur navigateur écrit en JavaScript ou TypeScript, conçu avec Three.js, Phaser, Babylon.js, PixiJS ou un simple canvas, sur les serveurs de jeu dédiés d'Edgegap, puis y ajouter du matchmaking afin que les joueurs soient automatiquement regroupés et connectés à un serveur proche d'eux.

Une fois votre serveur de jeu conteneurisé, Edgegap le déploie à travers le monde sur plus de 615 emplacements Edge Cloud (à la demande) à partir d'un simple appel d'API et facturé exclusivement à l'utilisation : aucun serveur entier à louer, approvisionner ou maintenir en marche entre les parties. Pour des serveurs persistants avec capacité réservée, Edgegap propose les Private Fleets. Le Matchmaking d'Edgegap s'appuie là-dessus et reste optionnel.

Deux choses changent lorsqu'un jeu sur navigateur passe en ligne. Ses règles basculent sur un serveur, car n'importe qui peut lire et modifier le code exécuté dans son navigateur. Et il communique avec ce serveur via des WebSockets : les navigateurs ne peuvent pas ouvrir de connexions UDP, et une page servie via https:// ne peut utiliser que des WebSockets sécurisés (wss://). Votre serveur s'exécute dans Node.js, et la fonctionnalité TLS Upgrade d'Edgegap lui fournit un point de terminaison WebSocket sécurisé, vous évitant ainsi d'acheter ou de renouveler un certificat.

Ce guide aborde :

  1. La préparation de votre jeu, de votre compte Edgegap et d'un outil de conteneurisation

  2. La connexion de votre agent de codage à Edgegap (optionnel)

  3. Le transfert des règles du jeu vers un serveur WebSocket Node.js

  4. La conteneurisation du serveur et la création d'une version d'application

  5. Le déploiement d'un serveur de test et la connexion depuis le navigateur

  6. L'ajout du matchmaking (optionnel)

  7. La publication de la page web de votre jeu

  8. Le test de la boucle complète dans deux onglets de navigateur

Vous pouvez procéder de deux manières et les combiner :

  • Avec un agent de codage. Connectez Claude Code, Cursor ou un autre agent au serveur MCP Edgegap et à ses compétences d'agent (skills). L'agent sépare votre jeu en client et serveur, rédige le serveur et le Dockerfile, le déploie et configure le matchmaking. Vous gérez le tableau de bord Edgegap, les secrets et les phases de test.

  • Manuellement. Chaque étape ci-dessous fonctionne également sans agent.

Vous avez créé votre jeu avec Manus ? Consultez Manus AI. Vous l'avez conçu avec Unity ? Consultez Unity WebGL.

Aucune carte de crédit requise. L'offre gratuite inclut les ressources nécessaires pour déployer un véritable serveur de jeu.

Aucune carte de crédit requise. L'offre gratuite inclut les ressources nécessaires pour déployer un véritable serveur de jeu.

Guide étape par étape

Étapes d'intégration détaillées

1. Avant de commencer

  • Un compte Edgegap gratuit. Vérifiez votre adresse e-mail. Aucune carte de crédit n'est requise pour tester.

  • Un jeu par navigateur en JavaScript ou TypeScript, avec n'importe quel moteur : Three.js, Phaser, Babylon.js, PixiJS ou votre propre boucle canvas.

  • Node.js (version 22 ou plus récente) pour le serveur de jeu, et un outil de conteneurisation en cours d'exécution. Nous recommandons Docker Desktop.

  • Un backend que vous contrôlez (facultatif, recommandé pour la sortie) : il connecte les joueurs et demande un match au matchmaker en leur nom. Votre backend web existant fonctionne. Pour un exemple fonctionnel, consultez l'exemple Supabase Sumo Push : connexion, profils et classement sur Supabase, avec matchmaking via une fonction Supabase Edge.

  • Pour le parcours de l'agent : un jeton d'API Edgegap, provenant de Tableau de bord → Paramètres utilisateur → Jetons. Il s'applique à l'ensemble de l'organisation, traitez-le donc comme un mot de passe : ne le placez jamais dans votre jeu, votre page web, votre serveur ou une messagerie.

2. Connectez votre agent de codage à Edgegap

Ignorez cette étape si vous faites tout manuellement.

Le serveur MCP Edgegap permet à votre agent de créer des applications et des versions, de déployer des serveurs, de lire des journaux et de générer des configurations de matchmaking sur votre compte. Les compétences (skills) de l'agent lui fournissent des composants testés pour les jeux JavaScript : un serveur de jeu WebSocket Node.js qui s'arrête de lui-même, un client de navigateur avec reconnexion, un backend qui crée des tickets de matchmaking, ainsi que le Dockerfile. Ils proviennent de la compétence edgegap-threejs, testée sur Edgegap avec cinq jeux Three.js. Ses composants de serveur et de matchmaking ne dépendent pas du moteur de rendu, ils conviennent donc également à Phaser, Babylon.js ou à un simple canvas. Pour le backend, ajoutez la compétence correspondant au vôtre : edgegap-supabase, edgegap-colyseus ou edgegap-manus (voir étape 6).

Claude Code : installez le plugin Edgegap. Il ajoute à la fois le serveur MCP et les compétences, et demande votre jeton d'API lors de l'installation (enregistré dans le gestionnaire d'identifiants de votre système) :

/plugin marketplace add edgegap/llm-agent-skills, puis /plugin install edgegap@edgegap. Redémarrez la session.

Vous voulez uniquement le serveur MCP, sans le plugin ? Exécutez plutôt ceci dans votre propre terminal : claude mcp add --transport http edgegap https://mcp.edgegap.dev/mcp -H "Authorization: token YOUR_EDGEGAP_API_TOKEN" --scope user. Ne faites pas les deux, sinon vous aurez deux serveurs edgegap.

Cursor, VS Code et autres clients qui envoient des en-têtes : ajoutez https://mcp.edgegap.dev/mcp avec l'en-tête Authorization: token YOUR_EDGEGAP_API_TOKEN, et installez les compétences avec npx skills add edgegap/llm-agent-skills --skill "*".

Claude Desktop : les connecteurs personnalisés ne peuvent pas envoyer l'en-tête, utilisez donc plutôt le serveur local (Node 18+) : { "mcpServers": { "edgegap": { "command": "npx", "args": ["-y", "@edgegap/mcp"] } } }. Il demande le jeton lors de la première utilisation.

Vérifiez que cela fonctionne :

« Liste mes applications Edgegap. »

3. Déplacer les règles du jeu vers un serveur WebSocket Node.js

La plupart des jeux par navigateur exécutent tout dans une seule boucle : lire les entrées, mettre à jour le jeu, dessiner. Séparez-la en deux :

  • Le serveur gère les positions, la physique et les collisions, les scores, la santé, les chronomètres, les apparitions, l'aléatoire et les participants au match. Il exécute l'étape de mise à jour à une fréquence fixe (20 fois par seconde convient à la plupart des jeux) et envoie l'état à chaque joueur.

  • Le navigateur capture les entrées et les envoie sous forme d'intentions (« droite enfoncée », « tirer »), jamais sous forme de résultats (« je suis à x=500 »). Il dessine l'état qu'il reçoit, en lissant entre les mises à jour, et gère les menus, le son et les effets.

Par moteur :

  • Three.js et Babylon.js : le serveur n'a besoin que de nombres (positions, rotations). Un moteur physique compatible Node tel que Rapier ou cannon-es s'exécute sur le serveur tel quel.

  • Phaser : Phaser a besoin d'une page pour s'exécuter, gardez-le donc dans le navigateur et déplacez sa logique de jeu dans votre propre simulation sur le serveur.

  • PixiJS et canvas brut : l'étape de mise à jour de la boucle passe sur le serveur ; l'étape de dessin reste.

  • Le code qui déplace les éléments d'une valeur fixe par image (x += 5) doit d'abord devenir une vitesse par seconde multipliée par le temps écoulé : le serveur fonctionne à 20 Hz, pas à 60.

Ce dont Edgegap a besoin de la part du serveur : il écoute sur 0.0.0.0 sur un port fixe (par exemple 7777) avec des WebSockets standards, et arrête son propre déploiement lorsque le match est terminé (l'étape 4 détaille l'appel).

Avec votre agent :

« Charge la compétence edgegap-threejs. Sépare mon jeu : déplace les règles dans un serveur WebSocket Node.js faisant autorité sur 0.0.0.0:7777 qui tourne à 20 Hz et envoie des instantanés d'état, et modifie le navigateur pour qu'il envoie les entrées et dessine les instantanés. Teste-le ensuite localement avec deux onglets. »

4. Conteneurisez le serveur et créez une version de l'application

Edgegap exécute des conteneurs linux/amd64. Pour un serveur Node.js :

  • Partez d'une image Node allégée (FROM node:22-slim), installez uniquement les paquets de production (npm ci --omit=dev) et démarrez directement le serveur : CMD ["node", "server.js"]. L'exécuter via npm start masque le signal d'arrêt à votre serveur. Exécutez-le en tant qu'utilisateur node, et non root.

  • Créez l'image pour la plateforme d'Edgegap, même sur Apple Silicon : docker build --platform linux/amd64 -t registry.edgegap.com/<project>/<image>:<tag> ., puis effectuez un docker push après un docker login registry.edgegap.com avec les identifiants de la page Registre de conteneurs. Utilisez un nouveau tag pour chaque build.

Créez l'application et la version dans le tableau de bord : votre image et son tag, identifiants du registre, 0,25 vCPU et 512 Mo pour commencer, ainsi que le port 7777, protocole WS, nom gameport, avec l'option Mise à niveau TLS activée.

Arrêtez le serveur lorsque la partie se termine : votre serveur envoie une requête DELETE à la variable d'environnement ARBITRIUM_DELETE_URL, avec ARBITRIUM_DELETE_TOKEN comme en-tête d'autorisation. Faites-le 10 secondes après la fin de la partie, 30 secondes après le départ de tous les joueurs, ou après 2 minutes si personne n'a rejoint. Dès réception de SIGTERM, prévenez les joueurs et quittez.

Facultatif, avec le SDK JavaScript : DeploymentEnvironment et MatchEnvironment de @edgegap/sdk lisent les variables d'environnement d'Edgegap pour vous, y compris l'URL d'auto-arrêt et les tickets de match, et ServerAgent comble les places libres grâce au backfill. Conservez son jeton de serveur dans une variable d'environnement, jamais dans le bundle du navigateur.

Avec votre agent :

« Charge la compétence edgegap-containerize. Conteneurise mon serveur de jeu Node.js pour linux/amd64, publie-le avec un nouveau tag et crée l'application ainsi que la version Edgegap : port 7777, protocole WS, mise à niveau TLS activée, nommé gameport, 0,25 vCPU et 512 Mo. »

5. Déployez un serveur de test et connectez-vous depuis le navigateur

Déployez votre version depuis le tableau de bord (Deploy, choisissez un emplacement proche de vous), ou demandez à votre agent : « Déploie ma dernière version Edgegap près de chez moi, attends qu'elle soit prête, vérifie que le port WebSocket répond avec HTTP 101, et donne-moi le nom d'hôte et le port externe. »

Lorsque le déploiement est Ready, connectez-vous depuis la page de votre jeu avec new WebSocket("wss://<Host URL>:<External Port>"). Utilisez toujours le nom d'hôte, et non l'adresse IP, sinon la vérification du certificat échouera. Le port externe change à chaque déploiement.

Si les journaux du serveur indiquent First bytes from client was not 'GET', la mise à niveau TLS (TLS Upgrade) est désactivée sur le port : activez-la dans une nouvelle version de l'application.

Arrêtez le déploiement lorsque vous avez terminé. L'offre gratuite n'exécute qu'un seul déploiement à la fois.

6. Ajouter le matchmaking

Le matchmaker d'Edgegap regroupe les joueurs selon vos règles (taille de la partie, équipes, mode, région), déploie votre serveur à proximité d'eux et renvoie son adresse. Pour les jeux par navigateur :

  • Pas de règle de latence. Les navigateurs ne peuvent pas envoyer les pings de latence utilisés par les jeux de bureau ; le matchmaker positionne le serveur en fonction de l'emplacement géographique des joueurs à la place.

  • Votre backend demande la partie (recommandé). Il connecte le joueur, crée le ticket de matchmaking avec le jeton d'authentification (Auth Token) du matchmaker, et transmet au navigateur uniquement l'adresse du serveur ainsi qu'un jeton de connexion éphémère que le serveur vérifie. Un ticket par joueur, associé à un compte réel.

  • Ou le navigateur fait la demande directement, pour un prototype : listez chaque adresse web qui héberge votre jeu dans le champ allowed_cors_origins de la configuration, sinon le navigateur bloque les réponses.

Choisissez votre backend :

  • Aucun backend (prototype) : le navigateur interroge directement le matchmaker avec le SDK JavaScript (npm install @edgegap/sdk). Son GroupAgent crée le ticket, attend le serveur et génère l'adresse wss://. Les mini-jeux Three.js d'Edgegap l'utilisent.

  • Supabase : Supabase connecte les joueurs et gère les profils ainsi qu'un classement. Une Edge Function Supabase conserve le jeton d'authentification du matchmaker et crée un ticket par joueur connecté, puis le serveur de jeu vérifie le ticket de chaque joueur et transmet le résultat. Consultez l'exemple Sumo Push Supabase et la compétence edgegap-supabase.

  • Colyseus : les salons et la synchronisation d'état restent sur Colyseus, et chaque match s'exécute sur son propre serveur Edgegap. Consultez le guide Colyseus.

  • Conçu avec Manus : consultez le guide Manus AI.

Ensuite :

  1. Générez la configuration avec votre agent : « Génère une configuration de matchmaker Edgegap pour la version de mon application : une équipe de 2 à 8 joueurs, pas de règle de latence, un joueur seul obtient un serveur après 20 secondes. »

  2. Dans le tableau de bord, ouvrez Matchmaker, sélectionnez Create Matchmaker, téléversez le fichier et sélectionnez Create and Start. Copiez l'API URL et l'Auth Token dans les secrets de votre backend.

  3. Demandez à votre agent : « Charge la compétence edgegap-threejs et la compétence correspondant à mon backend (edgegap-supabase, edgegap-colyseus ou edgegap-manus). Ajoute le matchmaking via mon backend avec les fonctions join, status et cancel, ainsi qu'un bouton Trouver une partie dans mon jeu qui se connecte au serveur assigné via wss://. Sans backend, utilise le SDK JavaScript dans le navigateur. »

7. Publiez la page web de votre jeu

Hébergez la page du jeu où vous le souhaitez : votre propre site, un hébergeur statique, itch.io ou un portail de jeux. Deux vérifications :

  • La page est desservie via https, de sorte que le jeu se connecte avec wss://, ce que la mise à niveau TLS gère déjà.

  • Si le navigateur appelle directement le système de matchmaking, ajoutez l'adresse de la page à allowed_cors_origins (pour itch.io : https://VOTRE-NOM.itch.io et https://html-classic.itch.zone). Chaque entrée est une origine complète, port inclus, et les caractères génériques tels que https://*.mon-jeu.com fonctionnent. localhost seul ne correspond à rien : indiquez votre serveur de développement en entier, par exemple http://localhost:5173.

8. Testez la boucle complète dans deux onglets de votre navigateur

  1. Assurez-vous qu'aucun déploiement de test n'est toujours en cours d'exécution.

  2. Ouvrez votre jeu dans deux fenêtres de navigateur (ou une fenêtre normale et une fenêtre privée, pour vous connecter en tant que deux joueurs distincts).

  3. Sélectionnez Find Match dans les deux : recherche en cours, démarrage du serveur, connecté, tous deux dans la même partie.

  4. Rechargez un onglet en pleine partie : il se reconnecte au même serveur.

  5. Quittez la partie dans les deux fenêtres. Trente secondes plus tard, le serveur interrompt son propre déploiement et disparaît du tableau de bord.

Avec le forfait gratuit, le matchmaker s'arrête 3 heures après chaque démarrage (redémarrez-le depuis le tableau de bord), les déploiements s'arrêtent après 60 minutes, et un seul déploiement s'exécute à la fois.

Étapes suivantes

Étapes suivantes

Les joueurs doivent-ils choisir un salon plutôt que d'être jumelés ? Consultez le Navigateur de serveurs d'Edgegap. Vous lancez le jeu ? Demandez à votre agent d'exécuter la liste de vérification de la compétence edgegap-launch.

Bloqué ? Demandez à votre agent de charger edgegap-troubleshoot, ou posez vos questions à notre équipe et à d'autres studios sur le Discord d'Edgegap.

Questions Fréquemment Posées

Questions fréquentes sur l'hébergement de jeux multijoueurs par navigateur sur les serveurs dédiés d'Edgegap.

Comment héberger un serveur de jeu multijoueur sur navigateur ?

Exécutez les règles de votre jeu dans un serveur WebSocket Node.js, intégrez-le dans un conteneur et laissez Edgegap en démarrer un par match à proximité des joueurs. Le navigateur se connecte avec wss:// au nom d'hôte du serveur ; la mise à niveau TLS d'Edgegap gère le certificat.

Puis-je rendre un jeu Three.js multijoueur avec un serveur dédié ?

Oui. Three.js reste dans le navigateur pour le rendu. Le serveur conserve l'état du jeu sous forme de simples nombres et peut exécuter un moteur physique compatible avec Node, tel que Rapier ou cannon-es, puis envoie l'état à chaque joueur 20 fois par seconde.

Phaser peut-il fonctionner sur un serveur de jeu ?

Phaser a besoin d'une page pour s'exécuter, alors gardez-le dans le navigateur. Déplacez les décisions du jeu (déplacement, collisions, scores) dans votre propre simulation sur un serveur Node.js, et laissez Phaser afficher l'état envoyé par le serveur.

Pourquoi les jeux par navigateur utilisent-ils des WebSockets plutôt qu'UDP ?

Les navigateurs ne peuvent pas ouvrir de connexions UDP brutes, les jeux par navigateur en temps réel communiquent donc avec leur serveur via WebSockets. Une page servie via https:// ne peut utiliser que des WebSockets sécurisés (wss://), ce qu'Edgegap fournit avec la mise à niveau TLS.

Ai-je besoin d'un backend pour le matchmaking dans un jeu par navigateur ?

À ne pas tester : le navigateur peut appeler directement le matchmaker d'Edgegap si l'adresse de votre page figure dans ses origines autorisées. Pour la mise en production, un backend qui connecte les joueurs et demande le match permet de s'assurer que chaque ticket est lié à un compte réel.

Clients

Découvrez les témoignages de clients qui ont intégré Edgegap

31 études de cas sont disponibles auprès de studios ayant migré d'une autre plateforme vers Edgegap.

Principales raisons pour lesquelles ils ont choisi Edgegap

Découvrez l’impact de l’orchestration automatisée des serveurs de jeu d’Edgegap pour une expérience multijoueur impeccable.

Coût

Prix

Prix

Optimisez les coûts et les performances grâce à l'orchestration hybride

Optimisez les coûts et les performances grâce à l'orchestration hybride

Optimisez les coûts et les performances grâce à l'orchestration hybride

Cloud de périphérie

À la demande

0,00115 $

/ vCPU

/ MINUTE

Facturé à la minute, uniquement à l'utilisation

Payez quand les joueurs jouent. 0 serveur actif = 0 $

Déployez des serveurs de jeu dans le monde entier, par instance, dans plus de 615 emplacements edge cloud. Sans engagement.

Ajoutez simplement une carte de crédit.

Cloud de périphérie

À la demande

0,00115 $

/ vCPU

/ MINUTE

Facturé à la minute, uniquement à l'utilisation

Payez quand les joueurs jouent. 0 serveur actif = 0 $

Déployez des serveurs de jeu dans le monde entier, par instance, dans plus de 615 emplacements edge cloud. Sans engagement.

Ajoutez simplement une carte de crédit.

Cloud de périphérie

À la demande

0,00115 $

/ vCPU

/ MINUTE

Facturé à la minute, uniquement à l'utilisation

Payez quand les joueurs jouent. 0 serveur actif = 0 $

Déployez des serveurs de jeu dans le monde entier, par instance, dans plus de 615 emplacements edge cloud. Sans engagement.

Ajoutez simplement une carte de crédit.

Private Fleet (Bare Metal)

Capacité réservée

0,0261 $

/ vCPU

/ HEURE

Facturé mensuellement, toujours actif

280 $ par hôte/mois (tarif sur 12 mois), ou 350 $ par mois

Optimisez la rentabilité de votre serveur de jeu grâce à l'hébergement sans frais de transfert de données sortantes (egress-free) des flottes privées (Private Fleets).

Permanent, disponible 24h/24 et 7j/7, exclusif à votre studio.

Private Fleet (Bare Metal)

Capacité réservée

0,0261 $

/ vCPU

/ HEURE

Facturé mensuellement, toujours actif

280 $ par hôte/mois (tarif sur 12 mois), ou 350 $ par mois

Optimisez la rentabilité de votre serveur de jeu grâce à l'hébergement sans frais de transfert de données sortantes (egress-free) des flottes privées (Private Fleets).

Permanent, disponible 24h/24 et 7j/7, exclusif à votre studio.

Private Fleet (Bare Metal)

Capacité réservée

0,0261 $

/ vCPU

/ HEURE

Facturé mensuellement, toujours actif

280 $ par hôte/mois (tarif sur 12 mois), ou 350 $ par mois

Optimisez la rentabilité de votre serveur de jeu grâce à l'hébergement sans frais de transfert de données sortantes (egress-free) des flottes privées (Private Fleets).

Permanent, disponible 24h/24 et 7j/7, exclusif à votre studio.

Votre facture varie selon le tarif et l'utilisation, qui peuvent varier en fonction
du type de jeu, du nombre de joueurs et plus encore.

Votre facture varie selon le tarif et l'utilisation, qui peuvent varier en fonction
du type de jeu, du nombre de joueurs et plus encore.

Modélisez votre utilisation avec notre calculateur d'estimation ->

Modélisez votre utilisation avec notre calculateur d'estimation ->

Fonctionnalités et tarifs d'Edgegap : comparaison détaillée entre Edge Cloud et Private Fleets

Fonctionnalités et tarifs d'Edgegap : comparaison détaillée entre Edge Cloud et Private Fleets

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.