Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

Powering your website with realtime data

  1. Powering your website with realtime data Bert Van Hauwaert bert@becoded.be - @tbotwit Sunday 26 February 2012
  2. Bert Van Hauwaert • Live in Belgium • Founder of be.coded • Freelance web application developer & consultant • ZCE 5.0 • Working on portal sites and realtime auction sites Sunday 26 February 2012
  3. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  4. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  5. The old days • <meta http-equiv=”refresh” content=”5” /> • <script > • AJAX Sunday 26 February 2012
  6. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  7. Websockets Source: http://caniuse.com/#feat=websockets Sunday 26 February 2012
  8. XMPP: what • Extensible Messaging and Presence Protocol • Jabber • XML • Client - Server - Component Sunday 26 February 2012
  9. XMPP: stanzas • <presence> • <message> • <iq> Sunday 26 February 2012
  10. XMPP: stanzas • <presence> • <message> • <iq> Sunday 26 February 2012
  11. XMPP: stanzas • <presence> • <message> • <iq> Sunday 26 February 2012
  12. XMPP: stanzas • <presence> • <message> • <iq> Sunday 26 February 2012
  13. XMPP: addressing • JID (Jabber Identifier) • Three main parts • [ node "@" ] domain [ "/" resource ] Sunday 26 February 2012
  14. XMPP: extensions • XMPP Extension Protocol - XEP • http://xmpp.org/xmpp-protocols/xmpp-extensions/ Sunday 26 February 2012
  15. XMPP: advantages • Open • Decentralized • Secure • Extensible Sunday 26 February 2012
  16. XMPP: disadvantages • Statefulness • Overhead Sunday 26 February 2012
  17. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status>Giving a talk @ PHP UK conference</status> </presence> </stream:stream> Sunday 26 February 2012
  18. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status>Giving a talk @ PHP UK conference</status> </presence> </stream:stream> Sunday 26 February 2012
  19. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status>Giving a talk @ PHP UK conference</status> </presence> </stream:stream> Sunday 26 February 2012
  20. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status>Giving a talk @ PHP UK conference</status> </presence> </stream:stream> Sunday 26 February 2012
  21. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status>Giving a talk @ PHP UK conference</status> </presence> </stream:stream> Sunday 26 February 2012
  22. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status> Giving a talk @ PHP UK conference </status> </presence> </stream:stream> Sunday 26 February 2012
  23. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@phpukconference.com" from="bert@becoded.be/speakerroom" type="chat"> <body> I hope you will enjoy this talk </body> </message> <presence> <show>dnd</show> <status> Giving a talk @ PHP UK conference </status> </presence> </stream:stream> Sunday 26 February 2012
  24. XMPP: XEP-0060 (1) • PubSub (Publish / Subscribe) • Bandwidth / resources Sunday 26 February 2012
  25. XMPP: XEP-0060 (2) <iq from="child@holiday.com/car" id="ams9nz78" to="pubsub.holiday.com" type="set"> <pubsub xmlns="http://jabber.org/ protocol/pubsub"> <subscribe node="are-we-there-yet" jid="child@holiday.com"/> </pubsub> </iq> Sunday 26 February 2012
  26. XMPP: XEP-0060 (3) <iq from="adult@holiday.com/car" id="wmn78e45a" to="pubsub.holiday.com" type="set"> <pubsub xmlns="http://jabber.org/protocol/pubsub"> <publish node="are-we-there-yet"> <item> <there xmlns="http://holiday.com/there-yet" status="true"/> </item> </publish> </pubsub> </iq> Sunday 26 February 2012
  27. XMPP: XEP-0060 (4) <message from="pubsub.holiday.com" to="child@holiday.com"> <event xmlns="http://jabber.org/protocol/pubsub#event"> <items node="are-we-there-yet"> <item id="ax78ui789q"> <there xmlns="http://holiday.com/there-yet" status="true"/> </item> </items> </event> </message> Sunday 26 February 2012
  28. XMPP: XEP-0045 (1) • MUC / Multi-User Chat • “Multiplier” Sunday 26 February 2012
  29. XMPP: XEP-0045 (2) <presence from="user@domain.com/resource" to="room@conference.muc.com/nickname"> <x xmlns= "http://jabber.org/protocol/muc"/> </presence> Sunday 26 February 2012
  30. XMPP: XEP-0045 (3) <message to="room@conference.muc.com" from="user@domain.com/resource" type="groupchat "> <body>Lorem Ipsum</body> </message> <message to="otherUser@domain.com/resource" from="room@conference.muc.com/nickname" type="groupchat "> <body>Lorem Ipsum</body> </message> Sunday 26 February 2012
  31. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  32. Install server: starting point • Debian • web server • SQL database • SSH server Sunday 26 February 2012
  33. Install server: apt sources • apt-get install vim • vim /etc/apt/sources.list • deb http://ftp.belnet.be/debian/ squeeze main non-free deb-src http://ftp.belnet.be/debian/ squeeze main deb http://security.debian.org/ squeeze/updates main non-free deb-src http://security.debian.org/ squeeze/updates main deb http://packages.dotdeb.org stable all deb-src http://packages.dotdeb.org stable all Sunday 26 February 2012
  34. Install server: prerequisites (1) • wget http://www.dotdeb.org/dotdeb.gpg • cat dotdeb.gpg | apt-key add - • apt-get update • apt-get install sun-java6-jre sun-java6-fonts ident2 Sunday 26 February 2012
  35. Install server: prerequisites (2) • apt-get install mysql-server mysql-client • apt-get install php5 php5-cli php5-common php5-dev php5-mysql php5-curl php-pear • Database & user Sunday 26 February 2012
  36. Install server: Openfire (1) • Openfire 3.7.1 • http://www.igniterealtime.org/projects/openfire/ • wget -O openfire_3.7.1_all.deb http://www.igniterealtime.org/downloadServlet? filename=openfire/openfire_3.7.1_all.deb • dpkg -i openfire_3.7.1_all.deb Sunday 26 February 2012
  37. Install server: Openfire (2) • http://[server-ip]:9090/ Sunday 26 February 2012
  38. Sunday 26 February 2012
  39. Sunday 26 February 2012
  40. Sunday 26 February 2012
  41. Sunday 26 February 2012
  42. Sunday 26 February 2012
  43. Sunday 26 February 2012
  44. Sunday 26 February 2012
  45. Install server: Openfire (3) • Plugins • User Service • Monitoring Service Sunday 26 February 2012
  46. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  47. Configure apache: why (1) Client - polling ta ta ta data no da no da no da Server d ata w ne Client - long polling data Sunday 26 February 2012
  48. Configure apache: why (2) • BOSH (Bidirectional streams Over Synchronous HTTP) Sunday 26 February 2012
  49. Configure apache: proxy (1) • cd /etc/apache2/mods-enabled/ • ln -s ../mods-available/proxy.load • ln -s ../mods-available/proxy_http.load • ln -s ../mods-available/rewrite.load Sunday 26 February 2012
  50. Configure apache: proxy (2) <VirtualHost *:80> Options FollowSymLinks ServerAdmin bert@becoded.be ServerName xmpp.dev.becoded.be ServerAlias static.xmpp.dev.becoded.be # Indexes + Directory Root. DirectoryIndex index.php DocumentRoot /var/www/vhost/xmpp.dev.becoded.be/htdocs/public/ php_admin_value open_basedir ".:/var/www/vhost/xmpp.dev.becoded.be/htdocs:/var/www/library/Zend-latest/ library:../:/usr/share/php:/tmp" php_value include_path ".:/var/www/vhost/xmpp.dev.becoded.be/htdocs:/var/www/library/Zend-latest/library:/usr/ share/php" php_admin_value upload_tmp_dir "/tmp" SetEnv APPLICATION_ENV development # Logfiles ErrorLog /var/www/vhost/xmpp.dev.becoded.be/logs/error.log CustomLog /var/www/vhost/xmpp.dev.becoded.be/logs/access.log combined # XMPP proxy rule ProxyRequests Off ProxyPass /bind http://127.0.0.1:7070/http-bind/ ProxyPassReverse /bind http://127.0.0.1:7070/http-bind/ </VirtualHost> Sunday 26 February 2012
  51. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  52. Libraries • ZF - http://framework.zend.com • jQuery - http://jquery.com/ • jQuery UI - http://jqueryui.com/ • XMPPHP - http://code.google.com/p/xmpphp • Jaxl - http://jaxl.net • Strophe.js - http://strophe.im Sunday 26 February 2012
  53. Libraries: XMPPHP $connection = new XMPPHP_XMPP( $host, $port, $identifier->node, $identifier->password, $identifier->resource, $domain, $printlog, $loglevel); $connection->connect(); $connection->processUntil('session_start'); $connection->message('support@demo', 'Hello world'); $connection->disconnect(); Sunday 26 February 2012
  54. Libraries: Jaxl $connection = new JAXL(array( 'user' => $identifier->node, 'pass' => $identifier->password, 'host' => $host, 'domain' => $domain, 'port' => $port, 'authType' => 'PLAIN', 'logLevel' => $loglevel )); $connection->addPlugin('jaxl_post_auth', '_postAuthHook'); $connection->startCore("stream"); public function _postAuthHook ($payload, $jaxl) { $jaxl->sendMessage('support@demo', 'Hello world'); $jaxl->shutdown(); } Sunday 26 February 2012
  55. Libraries: Strophe.js var connection = new Strophe.Connection('/bind'); connection.connect( jid, password, function (status) { if (status == Strophe.Status.CONNECTED) { var msg = $msg({ to : 'support@demo', type : "chat" }).c('body').t('Hello world'); connection.send(msg); setTimeout(function () { connection.disconnect(); }, 500); } }); Sunday 26 February 2012
  56. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples Sunday 26 February 2012
  57. Examples: setup Sunday 26 February 2012
  58. Sunday 26 February 2012
  59. Examples: messages • Browser • Log • Adium Sunday 26 February 2012
  60. Sunday 26 February 2012
  61. Sunday 26 February 2012
  62. Sunday 26 February 2012
  63. Sunday 26 February 2012
  64. Example: IQ ping pong (1) this.statusHandler = function (status) { var me = this; if (status == Strophe.Status.CONNECTED) { me.connection.addHandler( function(msg) { //(Function) handler return me.handlePong(msg); }, null, //(String) ns 'iq', //(String) name null, //(String) type 'pingPong'); //(String) id me.sendPing(Strophe.getDomainFromJid(me.connection.jid)); } }; Sunday 26 February 2012
  65. Example: IQ ping pong (2) this.sendPing = function (to) { var me = this; <iq to='demo' type='get' var iq = $iq({ id='pingPong' to to, : xmlns='jabber:client'> type : 'get', <ping id : 'pingPong' xmlns='urn:xmpp:ping'/> }).c('ping', </iq> {xmlns: 'urn:xmpp:ping'}); me.connection.send(iq); }; Sunday 26 February 2012
  66. Example: IQ ping pong (3) this.handlePong = function (msg) { var me = this; var objMsg = $(msg); var from = objMsg.attr('from'); me.log('Receiving ' + objMsg.attr('type') + ' from "' + objMsg.attr('from') + '" with id "' + objMsg.attr('id') + '"'); me.connection.disconnect(); }; <iq xmlns="jabber:client" type="result" id="pingPong" from="demo" to="demo1@demo/eeffca60"/> Sunday 26 February 2012
  67. Sunday 26 February 2012
  68. Sunday 26 February 2012
  69. Sunday 26 February 2012
  70. Example: support chat (1) this.bindSendMessage = function () { var me = this; var chatMsg = $('#message'); $('#sendMessage').bind('click', function() { me.sendChatMessage(chatMsg.val()); me.resetTextarea(chatMsg); }); chatMsg.keyup(function(event) { if (event.keyCode == 13 && event.shiftKey) { me.sendChatMessage(chatMsg.val()); me.resetTextarea(chatMsg); } }); }; Sunday 26 February 2012
  71. Example: support chat (2) this.statusHandler = function (status) { var me = this; me.logStatus(status); if (status == Strophe.Status.CONNECTED) { me.connection.addHandler( function(msg) { //(Function) handler. return me.handleChatMessage(msg); }, null, //(String) ns 'message', //(String) name 'chat'); //(String) type } }; Sunday 26 February 2012
  72. Example: support chat (3) this.handleChatMessage = function (msg) { var me = this; var objMsg = $(msg); var from = objMsg.attr('from'); var nick = Strophe.getNodeFromJid(from); var body = objMsg.children('body').text(); me.addMessageToChat(nick, body); return true; }; Sunday 26 February 2012
  73. Example: support chat (4) this.addMessageToChat = function (nick, body) { var me = this; var container = $('#chat'); var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height(); container.append('<dt>'+ nick +'</dt><dd>'+ me.nl2br(body, true) +'</dd>'); if (atBottom) { container.scrollTop(container[0].scrollHeight); } }; Sunday 26 February 2012
  74. Sunday 26 February 2012
  75. Sunday 26 February 2012
  76. Example: statistics this.handleHighChartData = function (msg) { var me = this; var objMsg = $(msg); var body = objMsg.children('body').text(); me.chart.series[0].setData(jQuery.parseJSON(body)); return true; }; Sunday 26 February 2012
  77. Sunday 26 February 2012
  78. Sunday 26 February 2012
  79. Sunday 26 February 2012
  80. Sunday 26 February 2012
  81. Example: prebind BOSH (1) • SID - RID • Security • User friendly • Performance • Persisting Sunday 26 February 2012
  82. Example: prebind BOSH(2) this.initConnection = function () { var me = this; me.connection = new Strophe.Connection(me.httpBindUrl); me.connection.attach( me.options.service.jid, me.options.service.sid, me.options.service.rid, function (status) { me.statusHandler(status); }); }; Sunday 26 February 2012
  83. Sunday 26 February 2012
  84. Sunday 26 February 2012
  85. Sunday 26 February 2012
  86. Sunday 26 February 2012
  87. Books Sunday 26 February 2012
  88. Thank you • bert@becoded.be • Code: https://github.com/becoded/talk-xmpp-demo • Slides: Slideshare • Rate / comments: http://joind.in Sunday 26 February 2012
  89. http://joind.in/4945 Sunday 26 February 2012
  90. http://joind.in/4977 Sunday 26 February 2012
  91. Questions ? ? ? ? Sunday 26 February 2012
Advertisement