HTML5 Hacks

// script(src='./socket.io/socket.io.js')

body.deck-container
!= body

The mobile layout contains all of the Sencha 2.0 dependencies to create the HTML5
mobile web application.

The smartphone view is injected within the mobile container and is intended to be for
nontablet web clients. We could also have tablet-specific views, or we could use CSS3
media queries to respond to the different viewports by configuring our markup with
metadata (more on CSS3 media queries in Hack #16).

For now, we will keep it simple and return the same view to all clients accessing the
localhost:3000/x URL.

Because of the way Sencha 2.0 works, nothing is needed inside the smartphone view.
All of the code necessary to generate a Sencha 2.0 app is included within the Java-
Script files already included in the mobile layout view. This approach differs from other
similar frameworks such as jQuery Mobile, but this “JavaScript as the kernel” design
is what makes Sencha 2.0 unique and popular among some JavaScript developers.
We will discuss Sencha in more detail in an upcoming section.

For now, we will continue to support the empty smartphone.jade view in case we want
to include some other scripts in the future, such as the Socket.IO client, or switch to
jQuery Mobile.

Public Files

Just as in the web socket hacks provided earlier in this chapter, in order to achieve
communication through web sockets you must maintain code on both the server and
the client. You should also have a /public directory within your application that will
hold all of the static resources for your application.

To begin let’s move our Deck.js JavaScript files into the /public directory so that we
can access our basic presentation from the browser. Our directory structure should
now look like Figure 9-35.

424 HTML5 HACKS

Figure 9-35.
Adding Deck.js to the public directory

Polyfill WebSocket Support with Socket.IO

Socket.IO aims to make real-time apps possible in every browser and mobile device,
blurring the differences between the different transport mechanisms.

For more on polyfills, refer to this book’s Preface or to Hack #55.

In order to provide real-time connectivity on every browser, Socket.IO selects the most
capable transport at runtime, from among those in the following list, without it af-
fecting the API:

• WebSocket
• Adobe Flash socket
• Ajax long polling
• Ajax multipart streaming
• Forever iFrame
• JSONP polling

Figure 9-36 shows the Socket.IO home page.

CHAPTER 9: HACKING HTML5 CONNECTIVITY 425

Figure 9-36.
Socket.IO home page

Fortunately the Node.js community has made it extra simple to include Socket.IO
within your application and to be up and running with a web socket server in no time.

We already installed the socket.io module in the beginning of this hack, so now we

will require it and begin to use the API.

To get started we need to open our app.js file and add the following before the

app.config and app.routes calls:

// Clients is a list of users who have connected
var clients = [];

function send(message) {

clients.forEach(function(client) {
client.send(message);

});
}

Here, we create an array of clients and a special send function that will iterate through
the array of connected clients and send them a message.

426 HTML5 HACKS

Now we’ll add the following app.listen (1511) declaration:

app.listen(process.env.PORT || 1511);

var sio = io.listen(app);
sio.sockets.on('connection', function(client) {

clients.push(client);
send(JSON.stringify({ "clients": clients.length }));

client.on('disconnect', function () {
var index = clients.indexOf(client.id);
clients.splice(index, 1);

});

});

Here, we begin to create our Socket.IO implementation on the server.

Notice that we are passing the Express app object to the listen() method of the

Socket.IO application so that both will be listening on the same port.

We then set up an event handler to handle the client connection event. Next, we push

the unique client to the clients array and send an initial web socket message, con-

taining the current number of clients connected.

Also, notice that the client will be removed from the clients array when a disconnect

event is fired, ensuring that the client total remains accurate.

This is our first web socket message, and it is used within the Deck.js desktop view to
update the UI with the number of clients viewing the Deck.js presentation.

One other dependency is required for this UI update to actually work, and that is the
addition of the Socket.IO library on the client side.

Adding the Socket.IO Client JavaScript to Our Views

Now, back to our /public directory that holds all of our static resources. This is where

the client-side JavaScript will live that creates the WebSocket object that will make

the initial request to the server requesting an upgrade to the WebSocket Protocol.
This client JavaScript will also establish the publish-and-subscribe system that will
handle and send messages over the network.

Here we will create /socket.io for our socket.io files alongside our deck.js files.

CHAPTER 9: HACKING HTML5 CONNECTIVITY 427

Let’s download the socket.io client JavaScript files and place them in the /socket.io
directory. Our directory structure should now look like Figure 9-37.

Figure 9-37.
Adding the socket.io client JavaScript to the /public directory
Finally, let’s add some JavaScript to our basic.jade view to enable Socket.IO to begin
listening for messages from the server:

script
var socket = io.connect();

socket.on('message', function (data) {

var json = JSON.parse(data);

if (json.clients) {

// update the DOM
$('#viewers').text('viewers:' + json.clients);

}

});

Once a message is retrieved with a clients property, we access the DOM with jQuery

and update the Viewers section with a current value.

428 HTML5 HACKS

You can test this functionality by opening a number of tabs within your browser, or
even separate browser instances anywhere on your network that has access to local-
host:3000 and access to the presentation at the root URL http://localhost:3000. Each
instance will receive a web socket message and update all connected clients with the
client total (see Figure 9-38).

Figure 9-38.
Real-time updates of client data

Adding Geolocation APIs and Reverse Geocoding with the
googlemaps Module

Now that we have an application that is retrieving web socket messages, let’s add
additional data (the clients’ longitude and latitude) by leveraging the Geolocation APIs
available within your browser, and the Node.js googlemaps module to reverse-
geocode the client’s location based on the two-part data.

We will then send the new location returned from the Google lookup service back to
the client for a dynamic update within the browser.

First let’s add the necessary code to the client. Within our basic.jade file, we will use
the Geolocation APIs available in the browser to prompt the user for access to her
location. All browsers have slightly different prompts; in Safari the prompt looks like
Figure 9-39.

CHAPTER 9: HACKING HTML5 CONNECTIVITY 429

Figure 9-39.
Apple Safari requesting geolocation

For more details and code snippets see Hack #59.

Setup for Mobile and Install of Sencha 2.0

Sencha Touch 2 is a high-performance HTML5 mobile application framework that
enables developers to build fast and impressive apps that work on all mobile web
browsers. For the purposes of this hack, we have chosen the framework for this very
reason. Just as we chose Socket.IO for its cross-platform, real-time communication
support, we also want our mobile remote control application to be able to run on as
many devices as possible.

Communicating from the Remote Control

As our final piece of functionality, we need the ability to advance our slide deck by

sending one-way requests in the background over XMLHttpRequest from our client

applications connected at http://localhost:3000/x. To do this we want to utilize the
Sencha 2.0 HTML5 mobile web application framework.

Our UI will contain a Forward button and a Back button (see Figure 9-40).

430 HTML5 HACKS

Figure 9-40.
Robodeck mobile built with Sencha 2.0

In the views section you saw that we included all the dependencies necessary to build
a Sencha 2.0 application. In order for those links to access the correct files we need
to download Sencha 2.0 and install the files in the /public directory. Our /public di-
rectory will now look like Figure 9-41.

CHAPTER 9: HACKING HTML5 CONNECTIVITY 431

Figure 9-41.
Adding Sencha 2.0 to the /public directory

Now we will only need to update two files from within Sencha’s app directory to use
Sencha’s declarative syntax for building applications.

First we will open the app.js file located in the app/app directory and create a new

Ext.regApplication. Now we’ll define the namespace in the name property and use
the launch method to declare the entry point to the application.

Ext.regApplication({
name: 'robodeck',
launch: function() {
this.views.Viewport = new this.views.Viewport();
}

});

Let’s open the Viewport.js file located in the app/app/views directory and configure
the viewport. All of this should be fairly straightforward; for detailed information refer
to the Sencha documentation.

The key declaration to notice is the creation of the Ext.TabPanel called Viewport:

robodeck.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',

tabBar: new Ext.TabBar({
dock: 'bottom',
ui: 'dark',
layout: {

432 HTML5 HACKS