Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
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>
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
Browser
(Firefox, IE6/7/8, Safari
Chrome, Opera, ...)
Browser
(Firefox, IE6/7/8, Safari
Chrome, Opera, ...)
Browser
(Firefox, IE6/7/8,
Chrome, Opera, ...)
,
Subscriber
Scoutista/publisher