Powering your website with realtime data

1. Powering your website with realtime data Bert Van Hauwaert bert@becoded.be - @tbotwitSunday 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 sitesSunday 26 February 2012

3. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 26 February 2012

5. The old days • <meta http-equiv=”refresh” content=”5” /> • <script > • AJAXSunday 26 February 2012

7. Websockets Source: http://caniuse.com/#feat=websocketsSunday 26 February 2012

8. XMPP: what • Extensible Messaging and Presence Protocol • Jabber • XML • Client - Server - ComponentSunday 26 February 2012

9. 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 • ExtensibleSunday 26 February 2012

16. XMPP: disadvantages • Statefulness • OverheadSunday 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

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 / resourcesSunday 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

32. Install server: starting point • Debian • web server • SQL database • SSH serverSunday 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 allSunday 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 ident2Sunday 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 & userSunday 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.debSunday 26 February 2012

37. Install server: Openfire (2) • http://[server-ip]:9090/Sunday 26 February 2012

38. Sunday 26 February 2012

45. Install server: Openfire (3) • Plugins • User Service • Monitoring ServiceSunday 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 dataSunday 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.loadSunday 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

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.imSunday 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

57. Examples: setupSunday 26 February 2012

59. Examples: messages • Browser • Log • AdiumSunday 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

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

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

81. Example: prebind BOSH (1) • SID - RID • Security • User friendly • Performance • PersistingSunday 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

87. BooksSunday 26 February 2012

88. Thank you • bert@becoded.be • Code: https://github.com/becoded/talk-xmpp-demo • Slides: Slideshare • Rate / comments: http://joind.inSunday 26 February 2012

89. http://joind.in/4945Sunday 26 February 2012

90. http://joind.in/4977Sunday 26 February 2012

91. Questions ? ? ? ?Sunday 26 February 2012