real time web - what's that for?

RTW – WTF?Real Time Web – What’s That For?Makoto Inoue - Martyn Loughran

Makoto

Who are we?

RTWExciting

The big guys already do it

Google wave

Facebook live feed

Twitter

This is our story

Once upon a time...

Martyn

November 2009

Visualise web traffic

Rack

Existing app

Sinatra Stats Collector

Fancy Visualization

Nginx HTTP_Push_Module

Long polling

Push handled by separate component

Worked, but fiddly to setup

Under the hood

WebSockets

http://www.flickr.com/photos/lenaah/2939721384/

Makoto

December 2009

WebSockets

HTML5 sub standard

Allows Socket in the browser

Now supported in the ‘non-shite’ browsers

Chrome & Webkit (nightly)

There is a library for flash emulation

Ajax vs Comet vs WebSocket

Ajax(Polling)

Comet(Long polling)

WebSocket

Client

Server

Client

Client

Server

Server

Javascript API

Server Side

http://www.flickr.com/photos/lenaah/2939721384/

December 2009

Martyn

Fun problems

Concurrent

Stateful

Low latency (sometimes)

Asynchronous servers

Make all IO non-blocking

Single thread

Efficient CPU utilisation

Simple example

Other options

em-websocket

cramp

sunshowers

node.js (js)

http://github.com/markevans/websocket_test

Example: Drawing

class Connection class << self def add(websocket) connections << websocket end def all connections end def remove(websocket) connections.delete(websocket) end private def connections @connections ||= [] end endend

Keep connection objects in memory

EventMachine.run { EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 3001) do |ws| ws.onopen { puts "WebSocket connection open" Connection.add(ws) }

ws.onclose { Connection.remove(ws) } ws.onmessage { |data| Connection.all.each do |ws| ws.send(data) unless ws == self end } end }

Demo

We wanted to add it to everything

http://www.flickr.com/photos/10737604@N02/1673136876/

January 2010

MandaysWork Schedule Management

TrueStoryBacklog Management

Data gets stale

People make conflicting changes

This discourages collaboration

Problems

Requirements

We didn’t want to re-write everything

Reusable by many apps

Really simple

Our solution

+

Look Ma

http://www.flickr.com/photos/jeremystockwell/2691931146/ February 2010

Case Study

Adding real time to TrueStory

Data Flow

Inspired by JS events

Trigger in on place

Bind in another

$('form#sprint').submit(function(){ var url = $(this).attr('action'); var data = $(this).serialize(); $.ajax({ url: url, data: data });});

def create @sprint = Sprint.new(params) @sprint.save

Pusher['project-1'].trigger('sprints-create', @sprint.attributes)end

pusher.bind('sprints-create', function(attributes) {addSprint(attributes);

})

Stateful client

http://github.com/benpickles/js-model

In memory object client side

Asynchronous persistence (e.g. to a REST API)

Used on TrueStory - let me show you

var sprint = new Sprint( { name: "My Sprint Name" });sprint.save();

def create @sprint = Sprint.new(params) @sprint.save

Pusher['project-1'].trigger('sprints-create', @sprint.attributes) respond_to do |format| format.js { render :json => @sprint.to_json } endend

pusher.bind('sprints-create', function(attributes) { var sprint = new Sprint(attributes); Sprint.add(sprint);})

Look MaMakoto

March 2010

Task Management Board

Debugging

Booking

Wife Notifier

http://www.flickr.com/photos/blueju38/2767019065/

Summary

RTW (our take)

More than just chat

Another layer of progressive enhancement

Work well with other HTML5 features

ResourcesWebSockets

• http://dev.w3.org/html5/websockets

• http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-75

• http://blog.new-bamboo.co.uk/2009/12/30/brain-dump-of-real-time-web-rtw-and-websocket

Javascript (Client side)• http://blog.new-bamboo.co.uk/2010/2/10/json-event-based-convention-websockets

• http://blog.new-bamboo.co.uk/2010/3/7/the-js-model-layer

Ruby (Server side)• http://github.com/igrigorik/em-websocket

• http://github.com/lifo/cramp

• http://rainbows.rubyforge.org/sunshowers

One more thing...

http://pusherapp.com

Questions ?

Get hooked!