Your SlideShare is downloading. ×
0
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
The Real Time Web with XMPP
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Real Time Web with XMPP

26,020

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 …

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
88 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,020
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,046
Comments
3
Likes
88
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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



































  • Transcript

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

    ×