RailsConf 2011 - Day 1

RailsConf 2011 - Day 1
Today is the tutorial days.

Tutorial 1 : html5tutorial

I started RailsConf with the "Building Web Apps with HTML5: Beyond the Buzzword" by Mike Subelsky (@subelsky).
He prepared twelve html5 exercises that walked the about 250 attendees through various features of html5 over a 2.5 hour session. It's fun to have time to work on these features. The high point was having about 200 computers using Websockets to send data back and forth with his server. He created a small ruby program that used EventMachine::WebSocket and it was holding up quite well all these connections.
You can download his tutorial and all files from https://github.com/subelsky/html5tutorial. Look at the tutorial.html file for instructions.
Here are a few highlights of his talk:

1 - Feature Detection

By using the Modernizr library, we used modernizr-1.7.js, you can detect difference html5 of your browser.
For example:

Modernizr.canvas

Modernizr.websockets

2 - Basic Canvas Drawing

You can get a 2d context and draw on the canvas via that context. You can use fillRect and other primitives like moveTo and lineTo to draw.

7 - Canvas Cleanup

The canvas itself can be styled like any element. Here we set a black background:

canvas {
background-color: black;
}
input { display: block; }

8 - Web Sockets

That was the fun part of the presentation, mike created the a small ruby application and had over 200 clients connecting to it.
Here is an extract of the ruby program:
class TutorialServer
def run
EventMachine.run do
EventMachine::WebSocket.start(:host => @host, :port => @port) do |socket|
socket.onmessage do |msg|
@logger.info "received: #{msg}"
broadcast(msg)
end
end
EventMachine::add_periodic_timer(10) { broadcast(JSON.generate({ :type => "ping" })) }
end
end
def broadcast(msg)
@sockets.keys.each { |socket| socket.send(msg) }
end
end
TutorialServer.new('0.0.0.0',8011).run
Then when the users moved the character image using the keyboard each keystroke was sent to his server.
// create the socket
var ws = new WebSocket("ws://exp.subelsky.com:8011");
// sent to position+name to server
ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));
Ultimately he wanted to drive multiple clients from his server...but we ran out of time to dive into this.