Microsoft Tech

How to Use WebSockets Today With Pusher

Craig Buckler
Share

Brian Raymor’s recent SitePoint article, WebSockets: Stable and Ready for Developers provides a fabulous overview of the technology. In essence, WebSockets permit asynchronous bi-directional communication between the client and server. A connection is held open so lightweight messages can be sent from either device at any time. It’s an ideal solution for real-time chat and games and is likely to be more efficient than Ajax polling.

That said, there are a couple of drawbacks:

  • WebSocket technology is relatively new and, at the time of writing, it’s only fully supported by Firefox and Chrome.
  • Even if your browser supports WebSockets, there’s no guarantee it’ll be natively supported by your server platform.

Stable and ready? Perhaps not yet.

Fortunately, there’s another option if you’re desperate to exploit WebSocket technology today. Pusher is a new service which ployfills over the gaps in WebSocket implementation:

  • Pusher is a proxy service that sits between your clients and server.
  • On the client, Pusher provides a range of WebSocket libraries for JavaScript, iOS, Android, Flash, .NET, Silverlight, Ruby and Arduino.
  • If you’re using a browser which doesn’t offer native support, the JavaScript library automatically imports a Flash-based shim which implements WebSocket technology on IE6 to 9, Chrome 1 to 4, Firefox 1 to 3, Safari 1 to 4, Opera and Android.
  • On the server, Pusher provides a range of WebSocket libraries for PHP (generic and framework options), Ruby, ASP.NET (C# and VB.NET), Python, Node.js, Java, Groovy/Grails, Clojure, Coldfusion and Perl.
  • If you’d prefer not use the WebSocket API for triggering server events, you can adopt Pusher’s REST API.

The whole process is reassuringly simple. Once you’ve registered for a Pusher account, you’ll receive an API key. Your HTML5 page includes the JavaScript library, establishes a connection and subscribes to a named channel:


<script src="http://js.pusher.com/1.11/pusher.min.js"></script>
<script>
var pusher = new Pusher("YOUR-PUSHER-API-KEY");
var channel = pusher.subscribe("my-channel");

You can then define callbacks that bind to events coming in via the Pusher socket:


channel.bind("my-event", function(data) {
	alert("An event was triggered with message: " + data.message);
});

To send a message from PHP:


require('Pusher.php');
$pusher = new Pusher($key, $secret, $app_id);
$pusher->trigger( 'my-channel', 'my-event', array('message' => 'hello world') );

The Pusher website provides full documentation, a selection of tutorials for PHP and Ruby and a showcase with case studies which might inspire your next world-beating real-time app.

I like the concept behind Pusher. It’s a great solution if you want to try WebSockets today while supporting the majority of browsers and native OS platforms. There are free plans for experimental prototypes as well as paid accounts for heavier usage.

For more information, refer to Pusher.com.

CSS Master, 3rd Edition