Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

The Real Time Web with XMPP

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 123 Anzeige

The Real Time Web with XMPP

Herunterladen, um offline zu lesen

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie The Real Time Web with XMPP (20)

Aktuellste (20)

Anzeige

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

Hinweis der Redaktion



































  • 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



































×