Real time web apps

By Jamie Rumbelow

Download the audio (.mp3, 9.9MB)

Hello, my name’s Jamie Rumbelow and I’m a 15 year old developer, entrepreneur, musician, philosopher and artist from Cambridge in the UK. I’m here to talk about real time web applications, their use, some examples, and what you need to do to start creating real time apps.

Real time web applications are exactly that – real time. They allow us to push the boundaries of the web and turn it into a communication platform rather than just a resource. They enable instant communication, collaboration and contribution – and are slowly taking over and revolutionising the web. From simple chat apps to word processors to drawing programs to social networks to books to online lessons to reviews and ratings to heaven knows what else, they allow our web experience to feel faster and more open. We can finally feel other people working with us, along side us and communicating.

You’ve probably come across real-time web technologies before. Take a look at Facebook. For starters, the instant messenger fixed at the bottom right of every page allows users to chat to their online friends in real time. It tries to mimic a desktop instant messenger as much as possible, and although there are occasional problems with it, it is a remarkable achievement and goes to show what some simple JavaScript can do. Facebook is also starting to merge real-time features into the rest of their application. If you visit the home page you can see friend’s status updates and other elements of the stream appearing in real time. Some of these smaller, less complicated touches can utilise real-time tech and make the user experience that little bit nicer.

One of the very big and groundbreaking uses of real time technologies is, of course, Google Wave. Google Wave is a communication tool that allows people to chat in real time, and actually see each other’s characters appear as they’re typing. It’s a novel idea, and while Wave hasn’t proved that useful it is still a very clever bit of kit. Wave also allows support for attachments and other forms of media or gadgets, to add much more real time functionality. You can chat, brainstorm ideas, play games or tweet all from the Wave system. Check out Wave at wave.google.com

Another, lesser known system is Etherpad – something that has really impressed me and I will definitely use in the future. It’s an online, real time word processor. It’s fast, I mean really fast, and works really smoothly. Although it’s not the most full featured word processor ever, its interface is really simple and easy to use and the real time features work brilliantly. Creating a pad takes literally a second, you don’t even have to sign up, and then you can just point people to the URL and they can join and start collaborating. I highly recommend it, so check out etherpad.com for more.

Now we have looked at a bit of what real-time technologies can do, let’s get to the nitty gritty. How can I add real-time functionality to my app? There are a number of different techniques that I’ll touch on, but the simplest is called polling. During polling, the client (your user) makes a regular connection via an AJAX request to the server. The server responds with a status code or a message which notifies the client of an event – the event could be a new chat message, or the event could just be a simple response letting the client know that everything’s still okay and functional. Messages are generally in the form of a data serialisation format like JSON or XML, but can be any format, as long as the client knows how to parse it. Generally a session key is used to persist data across a polling session.

A second technique requires Flash – where a pixel flash widget is embedded into the page, which using Flash’s socket support connects to the server and keeps the connection open. The server then pushes data to the client when it receives it, and the Flash widget receives the data and triggers a JavaScript event, allowing the client to update the page. A good approach for when Flash isn’t installed is to fall back to polling, but there are other socket-based techniques such as a Java applet or HTML5’s Web Sockets API.

There are open protocols such as XMPP to provide real-time communication. XMPP is used by Google Wave, Apple’s Push Notifications, Google Talk, and much more. XMPP not only supports its own protocol (which uses a custom server to send and receive messages), but also support for connections over HTTP using servers like Tornado, which was recently released and powers the real-time stream on FriendFeed.

The most important thing to remember though is to only use real-time tech when it will add to the user experience – if you just want to play around with real-time stuff, try creating a mini chat app or something else, but don’t just build real-time support into your application for the hell of it. Real-time is difficult to do, and get right, but once done properly it can add real benefit to the user’s experience on your application, and provide a bit of that wow factor.

If you’ve got any questions about real-time web applications, web development, programming, or anything else, just send me an email at jamie at jamierumbelow dot net. You can find my blog, Jamie on Software, at jamieonsoftware.com. You can follow me on Twitter at @jamierumbelow. Good luck, and let me know if you build something cool!

Jamie Rumbelow

Real time web apps

Jamie is a 15 year old developer, entrepreneur, musician, philosopher and artist who lives in Cambridge in the UK