2011-10-20

firebase

Playing with HTML5 and WebSockets

We have been looking at implementing support for HTTP and HTML5 WebSockets in Firebase in the next version to better support Javascript and the emerging HTML5 standards. Read more to see a short update on the status as well as an example of a use case against the latest version.

HTML5

Current State

The nightly build of Firebase now supports;

The support for HTTP traffic is disabled by default but can currently be enabled and directed to a port by setting the following in cluster.props

node.client.enable-http-server=true

And the following in server.props

web-client-bind-address=0.0.0.0:8080

The Firebase protocol will be converted to JSON when using the HTTP support to better support JavaScript development. WebSockets are fairly straight forward, the client can send JSON messages and the server will push JSON messages to the client. However, regular HTTP is a bit more tricky: GET is used to poll and POST to send messages, but you need to have a HTTP-session (JSESSIONID). This means that if the first request from the server is a GET then the server will return immediately with a “Set-Cookie” header instead of a poll.

WebSockets and HTTP are served on the same port but under the following paths:

/http
/socket

NOTE: The implementation is still in flux and the information given above may very well change as we get closer to a proper release.

Usage Example

On to the fun stuff! Here I will show you an example of how it works in practice and how would you implement a simple login using nothing but JavaScript HTML5 and WebSocket.

Opening a WebSocket to Firebase is very simple, all you have to do is point it towards the right URL and port.

var socket = new WebSocket("ws://localhost:8080/socket");

Note the ws:// protocol which specifies WebSocket for the communication.

To send a login request we just call socket.send(…) with the JSON equivalent of the LoginRequestPacket as specified in the Firebase protocol. Note that in the current JSON implementation of the Firebase protocol you need to add classId to specify the type and then place the payload in a data-field.

socket.send('{"classId":10,"user":"Foo","password":"123","operatorId":"1"}');

Password needs to be, as always in the default mock login handler, integers.

The socket object has different callbacks, to listen for incoming messages we implement onMessage and check for login responses. To get the message payload, i.e. Firebase messages, we must access the data field.

socket.onmessage = function(msg){
    var loginResponse = jQuery.parseJSON(msg)[0];
    if (loginResponse.classId == 11) {
       alert("Login "+loginResponse.data.status);
    }
};

Those are the basics of the WebSockets communication. I have deployed a more complete source code for trying logins here – http://www.robotsociety.com/jslogin/login.html . You will need a local Firebase running on the default port of 8080 to try it out. To see the full source code you can browse the source files for the example directly here: http://www.robotsociety.com/jslogin/