The Real Time Web with XMPP

28,569 views
28,572 views

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
93 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
28,569
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,094
Comments
3
Likes
93
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

    ×