Discover how Edgegap works

Discover how Edgegap works

/

Browser Games (JavaScript-based)

/

Published

Published

Published

Last reviewed for accuracy

Last reviewed for accuracy

Last reviewed for accuracy

Browser Games (JavaScript-based): How to host multiplayer Three.js, Phaser and Babylon.js games on dedicated servers, and add Matchmaking

Browser Games (JavaScript-based): How to host multiplayer Three.js, Phaser and Babylon.js games on dedicated servers, and add Matchmaking

This guide shows you how to host a multiplayer browser game written in JavaScript or TypeScript, built with Three.js, Phaser, Babylon.js, PixiJS or a plain canvas, on Edgegap's dedicated game servers, then add matchmaking so players are grouped and connected to a server near them automatically.

Once your game server is containerized, Edgegap deploys it worldwide to 615+ Edge Cloud locations (on-demand) from a simple API call and billed exclusively on usage: no entire server to rent, provision or keep running between matches. For persistent servers of reserved capacity, Edgegap offers Private Fleets. Edgegap's Matchmaking builds on top of that and is optional.

Two things change when a browser game goes online. Its rules move to a server, because anyone can read and edit the code running in their browser. And it talks to that server over WebSockets: browsers can't open UDP connections, and a page served over https:// may only use secure WebSockets (wss://). Your server runs in Node.js, and Edgegap's TLS Upgrade gives it a secure WebSocket endpoint, so you never buy or renew a certificate.

This guide covers:

  1. Preparing your game, your Edgegap account and a containerization tool

  2. Connecting your coding agent to Edgegap (optional)

  3. Moving the game's rules to a Node.js WebSocket server

  4. Containerizing the server and creating an app version

  5. Deploying a test server and connecting from the browser

  6. Adding matchmaking (optional)

  7. Publishing your game's web page

  8. Testing the full loop in two browser tabs

You can do it two ways, and mix them:

  • With a coding agent. Connect Claude Code, Cursor or another agent to the Edgegap MCP server and its agent skills. The agent splits your game into a client and a server, writes the server and the Dockerfile, deploys it and sets up matchmaking. You handle the Edgegap dashboard, the secrets, and playtest.

  • By hand. Every step below also works without an agent.

Built your game with Manus? See Manus AI. Built it with Unity? See Unity WebGL.

No credit card required. Free tier includes the resources to deploy a real game server.

No credit card required. Free tier includes the resources to deploy a real game server.

Step-by-Step Guide

Detailed Integration Steps

1. Before you start

  • A free Edgegap account. Verify your email. No credit card is needed to test.

  • A browser game in JavaScript or TypeScript, with any engine: Three.js, Phaser, Babylon.js, PixiJS or your own canvas loop.

  • Node.js (version 20 or newer) for the game server, and a containerization tool, running. We recommend Docker Desktop.

  • A backend you control (optional, recommended for release): it signs players in and asks the matchmaker for a match on their behalf. Your existing web backend works.

  • For the agent path: an Edgegap API token, from Dashboard → User Settings → Tokens. It is organization-wide, so treat it like a password: never put it in your game, your web page, your server or a chat.

2. Connect your coding agent to Edgegap

Skip this step if you're doing everything by hand.

The Edgegap MCP server lets your agent create apps and versions, deploy servers, read logs and generate matchmaker configurations on your account. The agent skills give it the tested pieces for JavaScript games: a Node.js WebSocket game server that stops itself, a browser client with reconnect, a backend that creates matchmaking tickets, and the Dockerfile. They come from the edgegap-manus skill and work outside Manus too.

Claude Code: install the Edgegap plugin. It adds both the MCP server and the skills, and asks for your API token during install (stored in your system's credential store):

/plugin marketplace add edgegap/edgegap-agent-skills, then /plugin install edgegap@edgegap. Restart the session.

Only want the MCP server, without the plugin? Run this in your own terminal instead: claude mcp add --transport http edgegap https://mcp.edgegap.dev/mcp -H "Authorization: token YOUR_EDGEGAP_API_TOKEN" --scope user. Don't do both, or you'll have two edgegap servers.

Cursor, VS Code and other clients that send headers: add https://mcp.edgegap.dev/mcp with the header Authorization: token YOUR_EDGEGAP_API_TOKEN, and install the skills with npx skills add edgegap/edgegap-agent-skills --skill "*".

Claude Desktop: custom connectors can't send the header, so use the local server instead (Node 18+): { "mcpServers": { "edgegap": { "command": "npx", "args": ["-y", "@edgegap/mcp"] } } }. It asks for the token on first use.

Check it works:

"List my Edgegap apps."

3. Move the game's rules to a Node.js WebSocket server

Most browser games run everything in one loop: read input, update the game, draw. Split it in two:

  • The server owns positions, physics and collisions, scores, health, timers, spawns, randomness and who is in the match. It runs the update step at a fixed rate (20 times per second suits most games) and sends the state to every player.

  • The browser captures input and sends it as intents ("pressed right", "fire"), never results ("I'm at x=500"). It draws the state it receives, smoothing between updates, and keeps menus, sound and effects.

By engine:

  • Three.js and Babylon.js: the server needs only numbers (positions, rotations). Node-compatible physics such as Rapier or cannon-es runs on the server as is.

  • Phaser: Phaser needs a page to run, so keep it in the browser and move its game decisions into your own simulation on the server.

  • PixiJS and plain canvas: the loop's update step moves to the server; the draw step stays.

  • Code that moves things a fixed amount per frame (x += 5) needs to become a speed per second times the elapsed time first: the server ticks at 20 Hz, not 60.

What Edgegap needs from the server: it listens on 0.0.0.0 at a fixed port (for example 7777) with plain WebSockets, and stops its own deployment when the match is over (step 4 covers the call).

With your agent:

"Load the edgegap skill, then the edgegap-manus skill for its Node.js server and browser client templates (this game isn't built with Manus). Split my game: move the rules into an authoritative Node.js WebSocket server on 0.0.0.0:7777 that ticks at 20 Hz and sends state snapshots, and change the browser to send inputs and draw snapshots. Then test it locally with two tabs."

4. Containerize the server and create an app version

Edgegap runs linux/amd64 containers. For a Node.js server:

  • Start from a slim Node image (FROM node:22-slim), install only production packages (npm ci --omit=dev), and start the server directly: CMD ["node", "server.js"]. Running it through npm start hides the stop signal from your server.

  • Build for Edgegap's platform, even on Apple Silicon: docker build --platform linux/amd64 -t registry.edgegap.com/<project>/<image>:<tag> ., then docker push after docker login registry.edgegap.com with the credentials from the Container Registry page. Use a new tag for every build.

Create the application and version in the dashboard: your image and tag, registry credentials, 0.25 vCPU and 512 MB to start, and port 7777, protocol WS, name gameport, with TLS Upgrade turned on.

Stop the server when the match ends: your server sends DELETE to the ARBITRIUM_DELETE_URL environment variable, with the ARBITRIUM_DELETE_TOKEN as its Authorization header. Do it 10 seconds after the game is over, 30 seconds after everyone left, or after 2 minutes if nobody joined. On SIGTERM, tell the players and exit.

With your agent:

"Load the edgegap-containerize skill. Containerize my Node.js game server for linux/amd64, push it with a new tag, and create the Edgegap app and version: port 7777, protocol WS, TLS Upgrade on, named gameport, 0.25 vCPU and 512 MB."

5. Deploy a test server and connect from the browser

Deploy your version from the dashboard (Deploy, pick a location close to you), or ask your agent: "Deploy my latest Edgegap version near me, wait until it's ready, check the WebSocket port answers with HTTP 101, and give me the host name and external port."

When the deployment is Ready, connect from your game page with new WebSocket("wss://<Host URL>:<External Port>"). Always use the host name, not the IP address, or the certificate check fails. The external port changes on every deployment.

If the server logs First bytes from client was not 'GET', TLS Upgrade is off on the port: turn it on in a new app version.

Stop the deployment when you're done. The free tier runs one deployment at a time.

6. Add matchmaking

Edgegap's matchmaker groups players by your rules (match size, teams, mode, region), deploys your server near them and returns its address. For browser games:

  • No latency rule. Browsers can't send the latency pings desktop games use; the matchmaker places the server from the players' locations instead.

  • Your backend asks for the match (recommended). It signs the player in, creates the matchmaking ticket with the matchmaker's Auth Token, and hands the browser only the server address and a short-lived join token the server checks. One ticket per player, tied to a real account.

  • Or the browser asks directly, for a prototype: list every web address that serves your game in the configuration's allowed_cors_origins, or the browser blocks the replies.

Then:

  1. Generate the configuration with your agent: "Generate an Edgegap matchmaker configuration for my app version: one team of 2 to 8 players, no latency rule, a lone player gets a server after 30 seconds."

  2. In the dashboard, open Matchmaker, select Create Matchmaker, upload the file and select Create and Start. Copy the API URL and Auth Token into your backend's secrets.

  3. Ask your agent: "Using the edgegap-manus skill's backend templates, add join, status, cancel and leave matchmaking routes to my backend, and a Find Match button to my game."

7. Publish your game's web page

Host the game's page wherever you like: your own site, a static host, itch.io or a game portal. Two checks:

  • The page is served over https, so the game connects with wss://, which TLS Upgrade already handles.

  • If the browser calls the matchmaker directly, add the page's address to allowed_cors_origins (for itch.io: https://YOUR-NAME.itch.io and https://html-classic.itch.zone).

8. Test the full loop in two browser tabs

  1. Make sure no test deployment is still running.

  2. Open your game in two browser windows (or a normal and a private window, to sign in as two players).

  3. Select Find Match in both: searching, server starting, connected, both in the same match.

  4. Reload one tab mid-match: it reconnects to the same server.

  5. Leave the match in both. Thirty seconds later, the server stops its own deployment and it disappears from the dashboard.

On the free tier, the matchmaker stops 3 hours after each start (restart it from the dashboard), deployments stop after 60 minutes, and one deployment runs at a time.

Next Steps

Next Steps

Players should pick a room instead of being matched? See Edgegap's Server Browser. Going live? Ask your agent to run the edgegap-launch skill's checklist.

Stuck? Ask your agent to load edgegap-troubleshoot, or ask our team and other studios on the Edgegap Discord.

Frequently Asked Questions

Common questions about hosting multiplayer browser games on Edgegap's dedicated servers.

How do I host a multiplayer browser game server?

Run your game's rules in a Node.js WebSocket server, package it as a container, and let Edgegap start one per match near the players. The browser connects with wss:// to the server's host name; Edgegap's TLS Upgrade handles the certificate.

Can I make a Three.js game multiplayer with a dedicated server?

Yes. Three.js stays in the browser for rendering. The server holds the game state as plain numbers and can run Node-compatible physics such as Rapier or cannon-es, then sends the state to every player 20 times per second.

Can Phaser run on a game server?

Phaser needs a page to run, so keep it in the browser. Move the game's decisions (movement, collisions, scores) into your own simulation on a Node.js server, and let Phaser draw the state the server sends.

Why do browser games use WebSockets instead of UDP?

Browsers can't open raw UDP connections, so real-time browser games talk to their server over WebSockets. A page served over https:// may only use secure WebSockets (wss://), which Edgegap provides with TLS Upgrade.

Do I need a backend for matchmaking in a browser game?

Not to test: the browser can call Edgegap's matchmaker directly if your page's address is in its allowed origins. For release, a backend that signs players in and requests the match keeps every ticket tied to a real account.

Clients

Learn more from clients who integrated Edgegap

31 case studies are available from studios that moved to Edgegap from another platform.

Key reasons why they chose Edgegap

Discover the impact of Edgegap's automated game server orchestration for a flawless multiplayer experience.

Cost

Pricing

Pricing

Optimize costs and performance with hybrid orchestration

Optimize costs and performance with hybrid orchestration

Optimize costs and performance with hybrid orchestration

Edge Cloud

On-Demand

$0.00115

/ vCPU

/ MINUTE

Billed by the Minute, Only on Usage

Pay only when players play. 0 active servers = $0

Deploy game servers worldwide, per instance, to all 615+ edge cloud locations. Zero commitment.

Simply add a credit card.

Edge Cloud

On-Demand

$0.00115

/ vCPU

/ MINUTE

Billed by the Minute, Only on Usage

Pay only when players play. 0 active servers = $0

Deploy game servers worldwide, per instance, to all 615+ edge cloud locations. Zero commitment.

Simply add a credit card.

Private Fleet (Bare Metal)

Reserved Capacity

$0.0261

/ vCPU

/ HOUR

Billed Monthly, Always On

$280 per host/month (12 mo rate), or $350 monthly

Optimize the cost effectiveness of your game server with egress-free hosting of Private Fleets.

Persistent, available 24/7, exclusive to your studio.

Private Fleet (Bare Metal)

Reserved Capacity

$0.0261

/ vCPU

/ HOUR

Billed Monthly, Always On

$280 per host/month (12 mo rate), or $350 monthly

Optimize the cost effectiveness of your game server with egress-free hosting of Private Fleets.

Persistent, available 24/7, exclusive to your studio.

Your bill varies per rate and usage; which can vary per game type, player count, & more.

Your bill varies per rate and usage; which can vary per game type, player count, & more.

Model your usage with our estimate calculator ->

Model your usage with our estimate calculator ->

Edgegap's features & price: detailed comparison between Edge Cloud & Private Fleets

Edgegap's features & price: detailed comparison between Edge Cloud & Private Fleets

COMPARE

Free Trial

Edge Cloud

Private Fleets

FEATURES

Analytics & Monitoring

Billing Alarms

Click to Expand

28 more rows

Unlocks

Capabilities are unlocked when a credit card is added to the account.

COMPARE

Free Trial

Edge Cloud

Private Fleets

FEATURES

Analytics & Monitoring

Billing Alarms

Click to Expand

28 more rows

Unlocks

Capabilities are unlocked when a credit card is added to the account.

COMPARE

Free Trial

Edge Cloud

Private Fleets

FEATURES

Analytics & Monitoring

Billing Alarms

Click to Expand

28 more rows

Unlocks

Capabilities are unlocked when a credit card is added to the account.