If you aren’t aware already, HTML5 has Websockets API – enabling bidirectional communication between client and server. You should check Ilya’s post Ruby & WebSockets: TCP for the Browser for a better explanation.

Starting with version 0.9, Cramp has in built support for Websockets. Unlike other solutions, Cramp extends the underlying webserver ( thin or Rainbows! ) to add the websockets superpower. As websockets protocol is an extension of the HTTP protocol, hopefully the webservers will be supporting it out of the box once websockets are well established.

For working with websockets, Cramp::Controller provides a class called Cramp::Controller::Websocket. Cramp::Controller::Websocket is very similar to Cramp::Controller::Action. If you don’t know much about Cramp::Controller::Action, you could read my introductory post on cramp.

As Cramp extends the underlying webserver to support websockets, you must tell it which webserver you are using :

Cramp::Controller::Websocket.backend = :thin # or :rainbows

Cramp::Controller::Websocket adds a new callback called on_data in addition to the functionalities available to Cramp::Controller::Action. Whenever the client sends any data over the websocket, Cramp will call the specified on_data callbacks, passing client supplied data as the lone argument. To send any data to the client over the websocket, you could use render() as usual.

Here’s a very basic example using Cramp’s websockets, which echoes everything received over the socket :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

require 'rubygems'
require 'cramp/controller'

Cramp::Controller::Websocket.backend = :thin

class WelcomeController < Cramp::Controller::Websocket
  on_data :received_data

  def received_data(data)
    render "Got your #{data}"
  end
end


Rack::Handler::Thin.run WelcomeController, :Port => 3000

Demo

I have ported Jetty’s Websocket example to Cramp. You can find the code at http://gist.github.com/273794. It’s currently running at http://cramp.in:8080, however I wouldn’t bring it up once it dies of natural causes :) Make sure you open the demo in Google Chrome or Webkit. On a related note, Firefox should have websockets support soonish.

But what about the fucking Internet Explorer ?!

As you might have guessed, no such luck as websockets support for IE. But not all is lost. You can very easily fallback to flash sockets if the browser doesn’t have websockets support. Check out web-socket-js library by Hiroshi Ichikawa which does exactly that.

Fabio’s Demo Application

Fabio Akita has written an excellent demo application for Cramp – http://github.com/akitaonrails/cramp_chat_demo. The chat application has two versions : long polling and websockets. The websockets version even falls back to flash socket if the browser doesn’t provide the support. It’s an excellent example of how you should write cramp applications, and rack applications in general.