Skip to main content

How to Use WebSockets Today With Pusher

By Craig Buckler

Microsoft Tech

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.