Successfully reported this slideshow.

Powering your website with realtime data

3

Share

Loading in …3
×
1 of 79
1 of 79

Powering your website with realtime data

3

Share

Download to read offline

We live in a very fast world. We want to know everything as soon as possible. We want realtime data! With XMPP you can power your website with realtime data. I will demonstrate a full setup with an Openfire XMPP server exchanging data with a PHP application. I will also explain the required JavaScript functions in order to send/receive messages through XMPP over BOSH.

We live in a very fast world. We want to know everything as soon as possible. We want realtime data! With XMPP you can power your website with realtime data. I will demonstrate a full setup with an Openfire XMPP server exchanging data with a PHP application. I will also explain the required JavaScript functions in order to send/receive messages through XMPP over BOSH.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Powering your website with realtime data

  1. 1. October 2011 Powering your website with realtime data Bert Van Hauwaert bert@becoded.be - @tbotwit
  2. 2. Bert Van Hauwaert • Live in Belgium • Founder of be.coded • Freelance web application developer & consultant • ZCE 5.0 • Working on realtime auction sites
  3. 3. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  4. 4. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  5. 5. The old days • <meta http-equiv=”refresh” content=”5” /> • <script > • AJAX
  6. 6. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  7. 7. XMPP: what • Extensible Messaging and Presence Protocol • Jabber • XML • Client - Server - Component
  8. 8. XMPP: stanzas • <presence> • <message> • <iq>
  9. 9. XMPP: stanzas • <presence> • <message> • <iq>
  10. 10. XMPP: stanzas • <presence> • <message> • <iq>
  11. 11. XMPP: stanzas • <presence> • <message> • <iq>
  12. 12. XMPP: addressing • JID (Jabber Identifier) • Three main parts • [ node "@" ] domain [ "/" resource ]
  13. 13. XMPP: extensions • XMPP Extension Protocol - XEP • http://xmpp.org/xmpp-protocols/xmpp-extensions/
  14. 14. XMPP: advantages • Open • Decentralized • Secure • Extensible
  15. 15. XMPP: disadvantages • Statefulness • Overhead
  16. 16. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon</status> </presence> </stream:stream>
  17. 17. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon</status> </presence> </stream:stream>
  18. 18. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon</status> </presence> </stream:stream>
  19. 19. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon</status> </presence> </stream:stream>
  20. 20. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon</status> </presence> </stream:stream>
  21. 21. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon </status> </presence> </stream:stream>
  22. 22. XMPP: example <stream:stream> <iq type="get" id="roster1"> <query xmlns:"jabber:iq:roster" /> </iq> <presence /> <message to="attendees@zendcon.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 @ ZendCon </status> </presence> </stream:stream>
  23. 23. XMPP: XEP-0060 (1) • PubSub (Publish / Subscribe) • Bandwidth / resources
  24. 24. 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>
  25. 25. 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>
  26. 26. 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>
  27. 27. XMPP: XEP-0045 (1) • MUC / Multi-User Chat • “Multiplier”
  28. 28. XMPP: XEP-0045 (2) <presence from="user@domain.com/resource" to="room@conference.muc.com/nickname"> <x xmlns= "http://jabber.org/protocol/muc"/> </presence>
  29. 29. 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>
  30. 30. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  31. 31. Install server: starting point • Debian • web server • SQL database • SSH server
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Install server: Openfire (1) • Openfire 3.7.0 • http://www.igniterealtime.org/projects/openfire/ • wget -O openfire_3.7.0_all.deb http://www.igniterealtime.org/downloadServlet? filename=openfire/openfire_3.7.0_all.deb • dpkg -i openfire_3.7.0_all.deb
  36. 36. Install server: Openfire (2) • http://[server-ip]:9090/
  37. 37. Install server: Openfire (3) • Plugins • User Service • Monitoring Service
  38. 38. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  39. 39. Configure apache: why (1) Client - polling ta ta ta data no da no da no da Server d ata w ne data Client - long polling
  40. 40. Configure apache: why (2) • BOSH (Bidirectional streams Over Synchronous HTTP)
  41. 41. 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
  42. 42. 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>
  43. 43. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  44. 44. 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
  45. 45. 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();
  46. 46. 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(); }
  47. 47. 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); } });
  48. 48. Overview • The old days • XMPP • Install server • Configure apache • Libraries • Examples
  49. 49. Examples: setup
  50. 50. Examples: messages • Browser • Log • Adium
  51. 51. 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)); } };
  52. 52. 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); };
  53. 53. 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"/>
  54. 54. 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); } }); };
  55. 55. 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 } };
  56. 56. 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; };
  57. 57. 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); } };
  58. 58. 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; };
  59. 59. Example: prebind BOSH (1) • SID - RID • Security • User friendly • Performance • Persisting
  60. 60. 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); }); };
  61. 61. Books
  62. 62. Thank you • bert@becoded.be • Code: https://github.com/becoded/talk-xmpp-demo • Slides: Slideshare • Rate / comments: http://joind.in/3778
  63. 63. Questions ? ? ? ?

×