The Real Time Web with XMPP
   an Introduction to Strophe.js




                               Jack Moffitt
              ...
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?
 </...
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </...
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </...
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </...
<message
   from=’juliet@book.lit/home’
   to=’romeo@book.lit’
   type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </bod...
<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’>
   <i...
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <i...
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <i...
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <i...
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 ...
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”: “....
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
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
Upcoming SlideShare
Loading in...5
×

The Real Time Web with XMPP

26,738

Published on

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

Published in: Education, Technology
3 Comments
90 Likes
Statistics
Notes
  • is there any pdf version for this...... please upload

    thank you
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cannot open the file. please upload a pdf version
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Please convert it to ppt or pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
26,738
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,064
Comments
3
Likes
90
Embeds 0
No embeds

No notes for slide


































  • types are available, unavailable, probe, error, (un)subscribe(d)
  • not intended for humans, can be away, chat, xa, or dnd
  • human readable string






































  • xml cannot be a string











  • returning true keeps the handler around



































  • The Real Time Web with XMPP

    1. 1. The Real Time Web with XMPP an Introduction to Strophe.js Jack Moffitt Collecta
    2. 2. What is XMPP?
    3. 3. eXtensible Messaging and Presence Protocol
    4. 4. Why XMPP?
    5. 5. HTTP APIs are great
    6. 6. HTTP polling sucks
    7. 7. Real time is different
    8. 8. XMPP basics
    9. 9. XMPP network
    10. 10. XMPP addressing
    11. 11. example.com
    12. 12. jack@example.com
    13. 13. jack@example.com/home
    14. 14. jack@example.com/work
    15. 15. jack@example.com/7a29d835f9c
    16. 16. XMPP protocol
    17. 17. XML
    18. 18. XML streams
    19. 19. XML stanzas
    20. 20. <message/>
    21. 21. <presence/>
    22. 22. <iq/>
    23. 23. <message/>
    24. 24. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
    25. 25. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
    26. 26. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
    27. 27. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
    28. 28. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
    29. 29. <presence/>
    30. 30. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
    31. 31. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
    32. 32. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
    33. 33. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
    34. 34. <iq/>
    35. 35. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
    36. 36. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
    37. 37. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
    38. 38. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
    39. 39. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
    40. 40. <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>
    41. 41. <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>
    42. 42. <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>
    43. 43. <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>
    44. 44. XMPP and the Web
    45. 45. Sites using XMPP on the Web
    46. 46. BOSH Bidirectional streams Over Synchronous Http
    47. 47. Long polling
    48. 48. Normal polling Long polling
    49. 49. What is Strophe?
    50. 50. XMPP client library
    51. 51. JavaScript
    52. 52. Real time Web applications
    53. 53. Fully documented
    54. 54. Highly optimized
    55. 55. Well tested
    56. 56. Built for Chesspark
    57. 57. StanzIQ and Speeqe
    58. 58. also used by Seesmic Yammer Neuros OSD
    59. 59. First steps
    60. 60. Managing connections
    61. 61. Connecting
    62. 62. var connection = new Strophe.Connection(URL);
    63. 63. connection.connect( jid, password, callback );
    64. 64. user@domain Strophe lets server assign resource
    65. 65. user@domain/resource Strophe requests a specific resource
    66. 66. domain or domain/resource Strophe will try SASL ANONYMOUS
    67. 67. The connection callback
    68. 68. Strophe reports status
    69. 69. connecting authenticating authentication failed connected disconnecting disconnected
    70. 70. function on_status(status) { if (status == Strophe.Status.CONNECTED) { // send initial presence // query for the roster } }
    71. 71. Sending data
    72. 72. connection.send(xml);
    73. 73. Disconnecting
    74. 74. connection.disconnect();
    75. 75. All about events
    76. 76. Event driven
    77. 77. Interaction events
    78. 78. Timed events
    79. 79. Stanza events
    80. 80. Examples
    81. 81. User clicks send button $(‘#send’).click(function () { // build message stanza // send message });
    82. 82. Display incoming messages
    83. 83. Add a handler connection.addHandler( on_message, null, “message”, “chat” );
    84. 84. Respond to matched stanzas function on_message(msg) { // extract message body // display text return true; }
    85. 85. Dealing with IQ stanzas
    86. 86. Answering incoming IQs connection.addHandler( on_iq_version, “jabber:iq:version”, “iq”, “get” );
    87. 87. Getting responses connection.addHandler( on_version, null, “iq”, null, “disco-1” );
    88. 88. Timed handlers connection.addTimedHandler( 100, send_flood );
    89. 89. Building stanzas
    90. 90. Strophe.Builder
    91. 91. Almost always returns Strophe.Builder
    92. 92. Allows function chaining just like jQuery
    93. 93. var stanza = new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} );
    94. 94. Chainable methods
    95. 95. Adding a child c(name, attrs)
    96. 96. Adding text content t(“some text”)
    97. 97. Adding pre-made children cnode(element)
    98. 98. Modifying attributes attrs(new_attrs)
    99. 99. Traversing the tree up()
    100. 100. Examples
    101. 101. new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} ).c(“body”).t(“Hello, World!”);
    102. 102. new Strophe.Builder( “message”, {“to”: “...”, “type”: “chat”} ).c(“body”).t(“Hi”) .up() .c(“html”, {“xmlns”: “.../xhtml-im”}) .c(“body”, ...) .c(“p”).t(“Hi”)
    103. 103. Convenience functions
    104. 104. $pres(attrs) $msg(attrs) $iq(attrs)
    105. 105. Send available presence $pres()
    106. 106. Build a message $msg({“to”: “someone@jabber.org”, “type”: “chat”}) .c(“body”).t(“XMPP rocks!”)
    107. 107. Unchainable methods
    108. 108. calling stanza.toString() produces “<message to=‘someone@jabber.org’ type=‘chat’/>”
    109. 109. stanza.tree() produces a DOM tree
    110. 110. Hello, Server! an application
    111. 111. Plugins!
    112. 112. Strophe.addNamespace( ‘XHTML_IM’, ‘http://jabber.org/protocol/xhtml-im’ );
    113. 113. Strophe.addConnectionPlugin( ‘myplugin’, { init: function (conn) { ... } } );
    114. 114. Identi.ca microblogging
    115. 115. The Future
    116. 116. XPath matching with Strophe
    117. 117. conn.addHandler( “/message[@from=‘you@foo.com’ and @type=‘chat’]”, function (elem) {...});
    118. 118. The multi-session problem
    119. 119. http://code.stanziq.com/strophe http://metajack.im jack@collecta.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×