{"id":14512,"date":"2026-09-24T10:31:41","date_gmt":"2026-09-24T10:31:41","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14512"},"modified":"2026-09-24T10:31:41","modified_gmt":"2026-09-24T10:31:41","slug":"how-to-connect-an-html5-canvas-or-phaser-client-to-websocket","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-connect-an-html5-canvas-or-phaser-client-to-websocket\/","title":{"rendered":"How to connect an HTML5 canvas or Phaser client to WebSockets?"},"content":{"rendered":"

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.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
WebSocket API is a browser-native JS object<\/td>\nnew WebSocket(url)<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Phaser is a canvas\/WebGL browser game framework<\/td>\nruns on top of Canvas API<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Unity WebGL calls browser JS via plugin<\/td>\n.jslib files<\/td>\ndocs.unity3d.com<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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()<\/code> then just read that state each frame; they never touch the socket directly.<\/p>\n

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

const socket = new WebSocket('wss:\/\/your-server.example\/ws');\nsocket.addEventListener('open', () => console.log('connected'));\nsocket.addEventListener('message', (event) => {\n const data = JSON.parse(event.data);\n gameState.applyServerUpdate(data);\n});\nsocket.addEventListener('close', () => console.log('disconnected'));\nsocket.addEventListener('error', (err) => console.error('socket error', err));\n\nfunction sendInput(input) {\n if (socket.readyState === WebSocket.OPEN) {\n socket.send(JSON.stringify(input));\n }\n}<\/code><\/pre>\n
In Phaser, call sendInput()<\/code> from input handlers and apply incoming state in the Scene’s update()<\/code>, not inside the message handler itself, to avoid touching Phaser’s rendering objects off the main render tick unexpectedly.<\/p>\n
Engine-specific notes<\/h2>\n