Technical

Server

We use Node.js, a futuristic JavaScript-based server.

png-streams

We pipe the screen of our nes emulator to an png-stream. Each rendered frame is tagged with a unique hash.

Refresh: 0 + long-pulling requests = <3

We utilize a combo of auto-refreshing iframes and long-pulling requests to make sure we only update a clients iframe when a new frame has been rendered. This is done by mapping latest seen frame to each client.

Client

NESoPNG is <noscript>-compliant, meaning that no JavaScript is used at all to render or interact with the game.

Controller

The controller use <map>-element together with <area>-elements to tag areas of the image. Each <area>-element is then is pointed to a hidden iframe so we can send input to the server without refreshing the page.

For further investigation

browse the source-code

Go back