Streaming ASCII Art Demo on html5rocks.com

I recently thought about building a WebSocket demo for html5rocks.com and I was thinking about building something which could not easily be replicated with any of the work arounds such as long-polling, etc but would require a real streaming socket connection.

So I built a collaborative video streaming server and client for ASCII art videos.

The server is using node.js and it has two modes: it can either talk to a local QuickTime installation to stream the video or load a file into memory that contains all the text that makes up the frames of the video. For the production setup that runs on Joyent's no.de infrastructure the in-memory solution is used to avoid the dependency on QuickTime and to allow simulatenous access by multiple users.

The collaborative part comes into play with the scrub bar that scrubs the video for all users that are currently watching. This also means that the demo will not really be enjoyable with many concurrent watchers :)

I really love the simplicity of the client. It receives every frame as a single WebSocket messages and just puts that into a <pre> tag as soon as it is received. That's it.

2 Warnings:

1. Most browsers recently disabled their WebSocket implementation, so it might not work for you.
   Updates:
   Chrome should work
   To view on Firefox 4, go to about:config and set network.websocket.override-security-block to true.
   For Opera: opera:config#UserPrefs|EnableWebSockets
2. Lets see how much node.js can take :)

W3Fools

Wrong education about web technologies has seriously hurt web development as a whole. W3Schools is the worst offender in this area – and because they are along so long they tend to dominate search results. The PromoteJS initiative tries to fix this and now we have a new site in the ring. Help spread the word about W3Fools, an intervention for W3Schools.