• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Real Time Web with XMPP
 

The Real Time Web with XMPP

on

  • 29,258 views

A new real time Web is emerging, backed by the eXtensible Messaging and Presence Protocol (XMPP). This protocol is designed for low latency, real time communication, publish-subscribe, and social ...

A new real time Web is emerging, backed by the eXtensible Messaging and Presence Protocol (XMPP). This protocol is designed for low latency, real time communication, publish-subscribe, and social networking. You will learn how XMPP and HTTP can be combined to make new applications possible and how to harness XMPP from JavaScript. We will use the Strophe library to create a few simple XMPP applications.

Code used in this presentation is at http://metajack.im/code/realtimeweb_jsconf2009.zip

Statistics

Views

Total Views
29,258
Views on SlideShare
28,517
Embed Views
741

Actions

Likes
79
Downloads
968
Comments
3

14 Embeds 741

http://ezcocoa.com 435
http://www.slideshare.net 151
http://disole.wordpress.com 126
http://blog.ignar.name 6
http://ignar.name 4
http://localhost 3
http://paper.li 3
http://a0.twimg.com 3
http://yapro.ru 3
http://www.veebox.com 2
http://softwaregeeks.org 2
http://webcache.googleusercontent.com 1
https://si0.twimg.com 1
http://xxx.broceliand.fr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • is there any pdf version for this...... please upload

    thank you
    Are you sure you want to
    Your message goes here
    Processing…
  • cannot open the file. please upload a pdf version
    Are you sure you want to
    Your message goes here
    Processing…
  • Please convert it to ppt or pdf
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • types are available, unavailable, probe, error, (un)subscribe(d) <br />
  • not intended for humans, can be away, chat, xa, or dnd <br />
  • human readable string <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • xml cannot be a string <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • returning true keeps the handler around <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

The Real Time Web with XMPP The Real Time Web with XMPP Presentation Transcript

  • The Real Time Web with XMPP an Introduction to Strophe.js Jack Moffitt Collecta
  • What is XMPP?
  • eXtensible Messaging and Presence Protocol
  • Why XMPP?
  • HTTP APIs are great
  • HTTP polling sucks
  • Real time is different
  • XMPP basics
  • XMPP network
  • XMPP addressing
  • example.com
  • jack@example.com
  • jack@example.com/home
  • jack@example.com/work
  • jack@example.com/7a29d835f9c
  • XMPP protocol
  • XML
  • XML streams
  • XML stanzas
  • <message/>
  • <presence/>
  • <iq/>
  • <message/>
  • <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
  • <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
  • <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
  • <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
  • <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
  • <presence/>
  • <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
  • <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
  • <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
  • <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
  • <iq/>
  • <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
  • <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
  • <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
  • <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
  • <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
  • <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
  • <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
  • <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
  • <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
  • XMPP and the Web
  • Sites using XMPP on the Web
  • BOSH Bidirectional streams Over Synchronous Http
  • Long polling
  • Normal polling Long polling
  • What is Strophe?
  • XMPP client library
  • JavaScript
  • Real time Web applications
  • Fully documented
  • Highly optimized
  • Well tested
  • Built for Chesspark
  • StanzIQ and Speeqe
  • also used by Seesmic Yammer Neuros OSD
  • First steps
  • Managing connections
  • Connecting
  • var connection = new Strophe.Connection(URL);
  • connection.connect( jid, password, callback );
  • user@domain Strophe lets server assign resource
  • user@domain/resource Strophe requests a specific resource
  • domain or domain/resource Strophe will try SASL ANONYMOUS
  • The connection callback
  • Strophe reports status
  • connecting authenticating authentication failed connected disconnecting disconnected
  • function on_status(status) { if (status == Strophe.Status.CONNECTED) { // send initial presence // query for the roster } }
  • Sending data
  • connection.send(xml);
  • Disconnecting
  • connection.disconnect();
  • All about events
  • Event driven
  • Interaction events
  • Timed events
  • Stanza events
  • Examples
  • User clicks send button $(‘#send’).click(function () { // build message stanza // send message });
  • Display incoming messages
  • Add a handler connection.addHandler( on_message, null, “message”, “chat” );
  • Respond to matched stanzas function on_message(msg) { // extract message body // display text return true; }
  • Dealing with IQ stanzas
  • Answering incoming IQs connection.addHandler( on_iq_version, “jabber:iq:version”, “iq”, “get” );
  • Getting responses connection.addHandler( on_version, null, “iq”, null, “disco-1” );
  • Timed handlers connection.addTimedHandler( 100, send_flood );
  • Building stanzas
  • Strophe.Builder
  • Almost always returns Strophe.Builder
  • Allows function chaining just like jQuery
  • var stanza = new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} );
  • Chainable methods
  • Adding a child c(name, attrs)
  • Adding text content t(“some text”)
  • Adding pre-made children cnode(element)
  • Modifying attributes attrs(new_attrs)
  • Traversing the tree up()
  • Examples
  • new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} ).c(“body”).t(“Hello, World!”);
  • new Strophe.Builder( “message”, {“to”: “...”, “type”: “chat”} ).c(“body”).t(“Hi”) .up() .c(“html”, {“xmlns”: “.../xhtml-im”}) .c(“body”, ...) .c(“p”).t(“Hi”)
  • Convenience functions
  • $pres(attrs) $msg(attrs) $iq(attrs)
  • Send available presence $pres()
  • Build a message $msg({“to”: “someone@jabber.org”, “type”: “chat”}) .c(“body”).t(“XMPP rocks!”)
  • Unchainable methods
  • calling stanza.toString() produces “<message to=‘someone@jabber.org’ type=‘chat’/>”
  • stanza.tree() produces a DOM tree
  • Hello, Server! an application
  • Plugins!
  • Strophe.addNamespace( ‘XHTML_IM’, ‘http://jabber.org/protocol/xhtml-im’ );
  • Strophe.addConnectionPlugin( ‘myplugin’, { init: function (conn) { ... } } );
  • Identi.ca microblogging
  • The Future
  • XPath matching with Strophe
  • conn.addHandler( “/message[@from=‘you@foo.com’ and @type=‘chat’]”, function (elem) {...});
  • The multi-session problem
  • http://code.stanziq.com/strophe http://metajack.im jack@collecta.com