Real Time Web - What's that for?

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

Who are we?

RTW Exciting

The big guys already do it Google wave Facebook live feed Twitter

This is our story Martyn Once upon a time... November 2009

Visualise web trafﬁc Rack Sinatra Stats Existing app Collector Fancy Visualization

Under the hood Nginx HTTP_Push_Module Long polling Push handled by separate component Worked, but ﬁddly to setup

Makoto WebSockets http://www.ﬂickr.com/photos/lenaah/2939721384/ 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 ﬂash emulation

Ajax vs Comet vs WebSocket Server Ajax (Polling) Client Server Comet (Long polling) Client Server WebSocket Client

Javascript API

Martyn Server Side http://www.ﬂickr.com/photos/lenaah/2939721384/ December 2009

Fun problems Concurrent Stateful Low latency (sometimes)

Asynchronous servers Make all IO non-blocking Single thread Efﬁcient CPU utilisation

Simple example

Other options em-websocket cramp sunshowers node.js (js)

Example: Drawing http://github.com/markevans/websocket_test

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 end end 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 }

We wanted to add it to everything http://www.ﬂickr.com/photos/10737604@N02/1673136876/ January 2010

Mandays Work Schedule Management

TrueStory Backlog Management

Problems Data gets stale People make conﬂicting changes This discourages collaboration

Requirements We didn’t want to re-write everything Reusable by many apps Really simple

Our solution

Look Ma http://www.ﬂickr.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({ def create url: url, @sprint = Sprint.new(params) data: data @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

Makoto Look Ma March 2010

Task Management Board

Debugging

Booking

Wife Notiﬁer

Summary http://www.ﬂickr.com/photos/blueju38/2767019065/

RTW (our take) More than just chat Another layer of progressive enhancement Work well with other HTML5 features

Resources WebSockets • 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...

Questions ? http://pusherapp.com Get hooked!

http://mloughran.com	332
http://tumblr.mloughran.com	312
http://d.hatena.ne.jp	117
http://www.slideshare.net	13
http://translate.googleusercontent.com	6
http://www.mloughran.com	3
http://tumblelog.renderedtext.com	3
http://webcache.googleusercontent.com	1

Real Time Web - What's that for?

by Martyn Loughran on Mar 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 787

Statistics

Real Time Web - What’s that for? — Presentation Transcript