Pet project: Web em tempo real na Maratona de Basquete

• O que é Maratona de basquete?

• Tecnologias utilizadas

• Arquitetura de uma app em tempo real

• Fluxo PubSub

• Desafios da implementação

• Demo

Cá entre nós... quem é o louco que fica mantendo o placar disso???

Não seria legal se tivesse uma aplicação que fizesse isso???

Luís Cipriani

Twitter: @lfcipriani

lfcipriani@talleye.com

Bs Computer Science + a lot of other stuff

Pet Project

Real Time Web and Basketball Marathon

Basquete

12 jogadores

40 minutos

200 jogadores

30 horas

Maratona de Basquete

1997: primeira versão feita em Basic

Desafios da implementação

2000 até 2008: Placar em Delphi

2009: ruby, rails, xmpp, erlang, javascript, ajax, html, google gears

• Garantir o funcionamento do placar caso a Internet saia do ar.

• Garantir o funcionamento caso qualquer nó da arquitetura saia do ar (servidor xmpp, marathon-bot, apache).

• Evitar perda de dados caso falte energia.

• Com a recuperação de algum dos problemas acima, publisher, servidores e subscribers devem ser sincronizados automaticamente.

• Sincronização do publisher deve evitar grandes volumes de dados.

• Sincronização conjunta de todos os subscribers não deve derrubar o servidor.

• Em sistemas de tempo real, muitas vezes o cache não se aplica.

• Garantir que o valor do placar seja o mesmo para publishers e subscribers.

• Remoção de eventos.

• Avisar os subscribers caso ocorra qualquer problema para que ele não ache que o jogo parou.

• Garantir que nenhum evento vai ser salvo duas vezes ou entregue duas vezes aos subscribers.

memcached

www.maratonadebasquete.com.br/marathons/1

• Componente mais simples

• Renderiza front-end

• Realiza sincronização com publishers e subscribers

• Sincronização completa com publishers

• Sincronização sucinta com subscribers

TCP

Stanzas

XMPP

<presence from='marathon-bot@zaphod' />

• Protocolo baseado em XML

• Conexões persistentes

• Presença

• Membros/Rosters

• Extensível

• Possui comunidade bastante ativa

<message from='romeo@montague.lit' to='juliet@capulet.com' id='msg_1'>

<body>Quer tc?</body>

</message>

shared models

Ejabberd

<iq type='set' from='marathon-bot@zaphod'

to='pubsub.zaphod' >

<pubsub xmlns='http://jabber.org/protocol/pubsub'>

<publish node='/home/zaphod/marathon-bot/events'>

<item>

<event marathon='1'

timestamp='1255059679512'

type='action'

id='1255059679512'>

<storage method='add' sync='local'/>

<team>2</team><action>1</action>

</event>

</item>

</publish>

</pubsub>

</iq>

<iq type="set" id="1-1" from="wave.initech-corp.com" to="wave.acmewave.com">

<pubsub xmlns="http://jabber.org/protocol/pubsub">

<publish node="wavelet">

<item>

<submit-request

xmlns="http://waveprotocol.org/protocol/0.2/waveserver">

<delta wavelet-name="acmewave.com/initech-corp.com!a/b">

<![CDATA[CiA...NvbQ==] ]>

</delta>

</submit-request>

</item>

</publish>

</pubsub>

</iq>

• Servidor XMPP implementado em Erlang

• Robusto e escalável

• Bom desempenho em benchmarks

• Implementa módulos importantes

• Extensível via módulos Erlang

• Fácil de configurar e utilizar (web admin)

• XMPP4R

• Daemon-kit

• Eventmachine

• Activerecord

• REXML

• XMPP4R/Pubsub

• Twitter gem

• 250 linhas de código

TCP

mod_pubsub

HTTP-bind

sync

controllers

public

folder

Workflow PubSub

O que acontece quando alguém faz uma cesta?

Marathon-Bot

Reverse Proxy

mod_rails

SQL

Comet

• Termo guarda-chuva para técnicas de server push

Exemplos:

• Streaming via iframe escondido

• Xhr com mime multipart/x-mixed-replace

• Ajax com long polling

• Script tag com long polling

• HTML5 websockets

• E mais uma tonelada de variações sobre essas idéias

JSON object

<iq from='scoutista@zaphod/1' to='marathon-bot@zaphod/server'

id='6155:webclient' xmlns='jabber:client'>

<query xmlns='http://cipriani/game/capture'>

<event marathon='1' timestamp='1255052864229' type='action' id='1255052864229'>

<storage method='add' sync='local'/>

<team>1</team>

<action>1</action>

</event>

</query>

</iq>

<iq from='scoutista@zaphod/1' to='marathon-bot@zaphod/server'

id='6155:webclient' xmlns='jabber:client'>

<query xmlns='http://cipriani/game/capture'>

<event marathon='1' timestamp='1255052864229' type='action' id='1255052864229'>

<storage method='add' sync='local'/>

<team>1</team>

<action>1</action>

</event>

</query>

</iq>

SQL

Strophe

• Client XMPP escrito em Javascript

• Implementa o padrão BOSH (XEP-0124)

• Faz long polling

• A versão utilizada ainda não faz cross-domain requests

• A nova versão usa um componente Flash para isso

• Incrivelmente fácil de usar

• Compatível com Firefox, Chrome, Opera, Safari, IE6,7,8, etc

API

PubSub client

...

PubSub client

Data Switcher

Google Gears

<iq type='set' from='marathon-bot@zaphod'

to='pubsub.zaphod' >

<pubsub xmlns='http://jabber.org/protocol/pubsub'>

<publish node='/home/zaphod/marathon-bot/events'>

<item>

<event marathon='1'

timestamp='1255059679512'

type='action'

id='1255059679512'>

<storage method='add' sync='local'/>

<team>2</team><action>1</action>

</event>

</item>

</publish>

</pubsub>

</iq>

• Compatível com vários browsers

• No placar, foi utilizado LocalServer e LocalStorage

• Usado somente no scoutista/publisher

• Evita perda de dados

• Aumenta desempenho pois menos dados são trafegados na rede

• LocalStorage usa sqlite

• Fácil de usar

• JQuery UI

• Ajax Manager

• JQPlot

• Sparklines

• JQuery Countdown

• JQuery UI

• Ajax Manager

• JQPlot

• Sparklines

• JQuery Countdown

• JQuery UI

• Ajax Manager

• JQPlot

• Sparklines

• JQuery Countdown

Browser

(Firefox, IE6/7/8, Safari

Chrome, Opera, ...)

Browser

(Firefox, IE6/7/8, Safari

Chrome, Opera, ...)

Browser

(Firefox, IE6/7/8,

Chrome, Opera, ...)

,

Subscriber

Subscriber

Scoutista/publisher