Easily create stunning presentations
Takes a few minutes to start

More Prezis

By Luis Cipriani

Popular prezis

See more popular prezis →

RealTimeWeb with XMPP

Luis Cipriani
Twitter: @lfcipriani
lfcipriani@talleye.com
computer science + lots of work in sw eng.
30 hours
40 minutes
12 players
200 players
Basketball
basketball marathon
Pubsub Workflow
What happens when someone scores?
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>
_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>
CLIENT
SERVER
TCP/IP
XMPP
Regular XMPP connections
<stream>
</stream>
<presence from=“peter@gtalk.com/home“>


        <status>Watching TV...</status>


</presence>
<message from="peter@gtalk.com/home" 
         to="stewie@gtalk.com/work" 
         type="chat"> 


  <body>How are you?</body> 
  
 
</message>
<iq from="peter@gtalk.com/home" 
    id="rr82a1z7" 
    to="gtalk.com" 
    type="get">
 

  <query xmlns="jabber:iq:roster"/> 


</iq> 

SERVER
TCP/IP
XMPP
BOSH XMPP connections
<stream>
</stream>
<presence from=“peter@gtalk.com/home“>


        <status>Watching porn...</status>


</presence>
<message from="peter@gtalk.com/home" 
         to="stewie@gtalk.com/work" 
         type="chat"> 


  <body>How are you?</body> 
  
 
</message>
<iq from="peter@gtalk.com/home" 
    id="rr82a1z7" 
    to="gtalk.com" 
    type="get">
 

  <query xmlns="jabber:iq:roster"/> 


</iq> 

BOSH CM
XMPP
<stream>
</stream>
<presence from=“peter@gtalk.com/home“>


        <status>Watching porn...</status>


</presence>
<message from="peter@gtalk.com/home" 
         to="stewie@gtalk.com/work" 
         type="chat"> 


  <body>How are you?</body> 
  
 
</message>
<iq from="peter@gtalk.com/home" 
    id="rr82a1z7" 
    to="gtalk.com" 
    type="get">
 

  <query xmlns="jabber:iq:roster"/> 


</iq> 

BROWSER
BOSH
HTTP
<body> ...XMPP stream... </body>
AJAX
COMET
long polling
further reading...
Professional XMPP Programming with Javascript and jQuery, by Jack Moffitt

XMPP: http://www.xmpp.org

BOSH: http://xmpp.org/tech/bosh.shtml

Strophe: http://code.stanziq.com/strophe/

XMPP Pubsub spec: http://xmpp.org/extensions/xep-0060.html


Thank you
contact:
lfcipriani@talleye.com
http://bit.ly/xmppweb

Created by Luis Cipriani

Javascript Meetup talk about using XMPP to build web apps with Strophe library and an example of a real application done with this libraries.

Share this prezi

Embed this prezi

Copy the code below

  • Copy to clipboard