Powering your website with realtime data

3,302 views
3,174 views

Published on

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.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,302
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
113
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Powering your website with realtime data

  1. 1. October 2011Powering your website with realtime data Bert Van Hauwaertbert@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 daServer d ata w ne dataClient - 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 ruleProxyRequests OffProxyPass /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.jsvar 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: statisticsthis.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? ? ? ?

×