How to connect an HTML5 canvas or Phaser client to WebSockets?

Create a native WebSocket object in your game’s JavaScript code (not inside Canvas draw calls or a Phaser Scene’s render loop), listen for open, message, close and error events, and feed incoming data into your game state so Phaser or your canvas render loop just reads updated values each frame.

At a glance

WebSocket connections have nothing to do with Canvas or Phaser rendering – they live in plain JavaScript, outside the render loop. Open the socket once (in your game’s boot or preload code), keep a reference to it, and update a shared game-state object whenever a message arrives. Your Canvas draw calls or Phaser Scene’s update() then just read that state each frame; they never touch the socket directly.

If you’re also monetizing the same page, keep ad SDK calls separate from your socket logic entirely; Playgama Bridge documents how ad and platform SDK calls are wired in similarly, alongside the game loop rather than inside it.

const socket = new WebSocket('wss://your-server.example/ws');
socket.addEventListener('open', () => console.log('connected'));
socket.addEventListener('message', (event) => {
 const data = JSON.parse(event.data);
 gameState.applyServerUpdate(data);
});
socket.addEventListener('close', () => console.log('disconnected'));
socket.addEventListener('error', (err) => console.error('socket error', err));

function sendInput(input) {
 if (socket.readyState === WebSocket.OPEN) {
 socket.send(JSON.stringify(input));
 }
}

In Phaser, call sendInput() from input handlers and apply incoming state in the Scene’s update(), not inside the message handler itself, to avoid touching Phaser’s rendering objects off the main render tick unexpectedly.

Engine-specific notes

• Unity WebGL builds run compiled code that can’t open a raw WebSocket by itself easily inside a browser sandbox the same way JS does; interop with browser-side WebSocket code goes through a .jslib plugin.
• Godot web exports call browser JavaScript through the JavaScriptBridge singleton, useful if you want the browser’s native WebSocket object rather than Godot’s own networking classes.

Test with your server’s actual TLS certificate (wss://) before shipping – browsers block insecure ws:// connections from https pages, and this only shows up once you’re testing outside localhost.

Sources

• MDN: WebSockets API
• MDN: Canvas API
• Unity manual: interacting with browser scripting
• Godot docs: exporting for the Web
• Playgama Bridge docs

Related questions

Should the WebSocket live inside my Phaser Scene class?

It can, but keep the socket reference and handlers separate from rendering code; apply incoming messages to game state in update(), not inside the message callback.

Why does wss:// work but ws:// fails in production?

Browsers block insecure ws:// connections from pages served over https; use wss:// with a valid TLS certificate on your server.

Last updated: 24 September 2026