Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Real Time Web with XMPP

31,399 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
  • 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

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

×