Web em tempo real na Maratona de Basquete
Pet Project
Luís Cipriani
Twitter: @lfcipriani
lfcipriani@talleye.com
Ciência da Computação + várias outras coisas
30 horas
40 minutos
12 jogadores
200 jogadores
Basquete
Maratona de Basquete
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???
1997: primeira versão feita em Basic
2000 até 2008: Placar em Delphi
2009: ruby, rails, xmpp, erlang, javascript, ajax, html, google gears
www.maratonadebasquete.com.br/marathons/1
Browser
Scoutista/publisher
JQuery UI
Ajax Manager
JQPlot
Sparklines
JQuery Countdown
Data Switcher
Browser
Subscriber
JQuery UI
Ajax Manager
JQPlot
Sparklines
JQuery Countdown
PubSub client
Browser
Subscriber
JQuery UI
Ajax Manager
JQPlot
Sparklines
JQuery Countdown
PubSub client
Reverse Proxy
mod_rails
(Firefox, IE6/7/8,
Chrome, Opera, ...)
(Firefox, IE6/7/8, Safari
Chrome, Opera, ...)
(Firefox, IE6/7/8, Safari
Chrome, Opera, ...)
HTTP-bind
public
folder
mod_pubsub
Marathon-Bot
sync
controllers
memcached
shared models
TCP
TCP
XMPP4R
Daemon-kit
Eventmachine
Activerecord
REXML
XMPP4R/Pubsub
Twitter gem
250 linhas de código
Componente mais simples
Renderiza front-end
Realiza sincronização com publishers e subscribers
Sincronização completa com publishers
Sincronização sucinta com subscribers
...
,
Workflow PubSub
O que acontece quando alguém faz uma cesta?
SQL
<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>
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
API
<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>
http://geekandpoke.typepad.com/geekandpoke/2009/10/not-realtime.html
Programando a
com
Web em Tempo Real
e seus amigos...
Computação
em tempo real
Web em
tempo real
dados públicos
dados federados
pushing model
grafo social
explícito
sensação de tempo real
nova forma de comunicação
http://bit.ly/webtemporeal
Tecnologias
GPS
dispositivos móveis
web semântica
data mining
processamento de linguagem natural
Attention Profile Markup Language (APML)
PubSubHubBub
webhooks
cloud computing
AMQP
XMPP
comet
ajax
arquitetura/infra/programação orientada a eventos
e muito mais...
Extensible Messaging and Presence Protocol
Definindo XMPP
padrão aberto
baseado em XML
objetivos
instant messaging
informação de presença
middleware orientado a mensagens
extensível
Jabber open-source community
1998
História
1999-2000
2002-2003
2004
2009
2005
Jeremie Miller
Formalizado pela IETF (XMPP)
XMPP RFCs
Extensions, extensions, extensions...
Google Talk
Google Wave
Placar da Maratona de Basquete :-)
http://xmpp.org/about/history.shtml
Prós
Contras
descentralizado
extensível
seguro
padrão
comunidade forte
escalável
XML
overhead de presença
overhead de transferência
XML
JID (Jabber ID)
cipriani@zaphod/casa
Name
domain
resource
Stanzas
<presence/>
<message/>
<iq/>
<stream>
</stream>
<presence/>
<presence from=“tino@gtalk.com/casa“ to=“eric@jabber.org/office“/>
<presence from=“tino@gtalk.com/casa“ 
        type=“unavailable | probe | (un)subscribe | (un)subscribed | error“ />
<presence from=“tino@gtalk.com/casa“>
        <show> chat | away | xa | dnd </show>
        <status>Organizando Dev in Sampa</status>
</presence>
<message from="cipri@zaphod/dev" 
         to="nuxlli@plug.com/abril" 
         type="chat | groupchat | headline | error"> 
  <body>iPhone sucks!</body> 
  <qualquercoisa xmlns=“http://qualquer.com“ /> 
</message>
<iq from="cipri@zaphod/pda" 
    id="rr82a1z7" 
    to="zaphod" 
    type="get | set"> 
  <query xmlns="jabber:iq:roster"/> 
</iq> 

<iq from="zaphod" 
    id="rr82a1z7" 
    to="cipri@zaphod/pda" 
    type="result | error"> 
  <query xmlns="jabber:iq:roster"> 
    <item jid="nuxlli@zaphod"/> 
    <item jid="tino@zaphod"/> 
    <item jid="lsdr@zaphod"/> 
    <item jid="stevejobs@zaphod"/> 
  </query> 
</iq> 
Extensões
http://xmpp.org/extensions/
BOSH - Bidirectional-streams Over Synchronous HTTP
Publish-Subscribe (PubSub)
Multi-User Chat
Jingle
Service Discovery
vCard
Data Forms
Servidores
Bibliotecas
ejabberd - erlang
openfire - java
tigase - java
prosody - lua
djabberd - perl
jabberd2 - C

  e tanto outros...
http://xmpp.org/software/servers.shtml
http://xmpp.org/software/libraries.shtml
XMPP4R - ruby
blather - ruby
xmpppy - python
jabber.py - python
xmpphp - php
strophe - javascript
exmpp - erlang
libstrophe - C

  e várias outras...

COMET
Server push
HTML5 websockets
Streaming via iframe escondido
XMLHttpRequest com long polling
Script tag com long polling
Xhr com mime multipart/x-mixed-replace
componente flash
HTML5 Server-sent DOM events
Java Applet
http://en.wikipedia.org/wiki/Comet_%28programming%29
Legal, mas...
Isso não exige uma arquitetura diferente no lado do servidor? Sim? Não?
Event-driven architecture
Event-drive programming
thread-based versus event-based
rows = database.fetch(category = “sports“)
//usa o resultado
rows = database.fetch(category = “sports“, function() {
     //usa o resultado
})
Quem implementa isso?
twisted
eventmachine
node.js
AnyEvent
tornado
punjab
ejabberd http-bind
nginx_http_push_module
_db.execute('INSERT INTO events VALUES (?, ?, ?, ?, ?, ?, ?);',
       [obj["id"], obj["_type"], (obj["body"] || null), obj["_timestamp"], obj["_marathon"], (obj["team"] || null), (obj["action"] || null)]);
[{
   "event": {
      id: '12345678',
      "_type": event_type,
      "_timestamp": timestamp,        
      "team": team.id, "action": action.id,
      "$team": team, "$action": action,
      "body": 'um comentário',
       "storage": {
            _sync: 'local',
            _method: 'add'
       }
    }
}]
[{
   "event": {
      id: '12345678',
      "_type": event_type,
      "_timestamp": timestamp,        
      "team": team.id, "action": action.id,
      "$team": team, "$action": action,
      "body": 'um comentário',
       "storage": {
            _sync: 'local',
            _method: 'add'
       }
    }
}]
<message xmlns="jabber:client" from="pubsub.zaphod"  to="363292661259383918570218@zaphod/1196580140125938391977300">

<event xmlns="http://jabber.org/protocol/pubsub#event">
   <items node="/home/zaphod/marathon-bot/game_1">
      <item id="4EB5DBCD219B5">
         <event xmlns="http://cipriani/game/capture" 
                marathon="1" 
                timestamp="1259383948903" 
                type="action" id="1259383948903">
            <storage method="add" sync="local">
            <team>1</team>
            <action>1</action>
        </event>
     </item>
  </items>
</event>

</message>
cipriani