Friday, April 12, 2013

Lighting the SignalR Fire: WebSockets Made Easy

Originally written for eImagine Technology Group at

If you have ever tried to develop a real-time chat web application (or pretty much any other sort of real-time web app) you have likely ran into a rough realization: either you go with a third-party solution or roll your own in creating a very complex system to mimic real-time feedback in the world of HTTP.

Traditionally you would use AJAX routines to make constant callbacks to a server that would serve as a conversation mediator with each client/browser sending and receiving to it centrally on a timed loop. On each pulse of the timer, the client asks the server if it has new text/data for it from the other party and may also push up the latest message it has to send to them. This works really well when done properly, but causes some noticeable lag in messaging and can restrict the features you can offer compared to other similar apps people are used to (like iMessaging on your iPhone) or using the Google Talk client on your desktop).

You wouldn't think this would be so hard, but the web (and its underlying protocols) was raised up on the concept of stateless connectivity (not maintaining an active connection to a server or client for long periods of time).

HTML5 Goodness
In comes the concept of WebSockets. Introduced in HTML5, WebSockets allows a persistent connection between the client(s) and server and for them to send payloads of data back and forth while raising events. The connection can be SSL secured as well, in case you plan on sending sensitive data (and what data ISN'T anymore?). If you want to learn more about implementing WebSockets yourself, look no further than the good folks at HTML5Rocks as they have some great examples to get you started.

Is That It?
No, that isn't it! All of that is preface to this: there is an easier way.

Much like the ATLAS plugin led the way of AJAX development for ASP.Net back before it was so ubiquitous, a fairly new project called SignalR is making it easy to add WebSocket technology to your ASP.Net projects. The beauty of it is that, should your browser or end client not support the emerging HTML5 spec, it gracefully falls back to other methods without the programmer having to generate code for those specific cases.

How It Works
You install the SignalR package, make a couple of calls server-side to prep the app for receiving the connection, and the rest is JS magic. By using a standard set of calls, SignalR wraps all of the behind-the-scenes fallback code and such so you don't have to worry about it. You open a connection and wait for data to be transmitted (via JS event callbacks) and/or transmit data using the active connection object you established. For specific code examples, check out the documentation page of SignalR.

Final Thoughts
Whether you are a seasoned professional or just entering into the mix, project such as SignalR can jump-start you into new areas of development with little barrier to entry. Since WebSockets is so new, this is a great way to test it out and begin thinking about the next killer app that is now enabled by this great technology.

No comments:

Voice Comments