WebSockets In HTML5

This entry was posted on Aug 18 2010

Over the weekend I participated in the GTUG (Google Technology User Group) campout hackathon. The focus of the event was to learn what new things HTML5 introduces to the web and to build something using this new technology.

Along with new HTML elements such as <nav>, <footer>, <video> and <audio>, HTML5 includes a new set of APIs to drag-and-drop elements around the page, free-hand drawing on a canvas, storing data in the browser and geolocation. However my favourite new API is WebSockets.

WebSockets is a standard that intends to significantly simplify two way communication between the browser and the web server. The idea is that with a little Javascript you can open a connection to the server just by supplying the URL and port number of the service. Some server side service needs to be running on this port. For example, if the back-end technology is PHP then you would write a script (to be started from the shell) that would open a port using PHP sockets and then handle any data to be passed back and forth.

Of course the server side code will be as complicated as the application requires. The purpose of WebSockets is to have a standard that all web browsers can follow and to make the front-end development as simple as possible. To achieve this type of communication in today’s browsers requires some Javascript that polls the server for any new messages. With WebSockets, the server side service can send messages to the browsers without the browser polling at all.

The project we decided to build with WebSockets was to re-create the old game of Battleships. I thought this was an interesting idea as it breaks away from the traditional instant message module that would be a likely use of the new technology.

Although we put together some of the fundamentals of the comms I was unable to attend day two of the hackathon. I am anticipating Websockets to become available in all browsers so I can implement some ideas into a real use application.

Post a Comment