Powering your website with realtime data
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Powering your website with realtime data

on

  • 2,378 views

Presentation for PHP UK Conference

Presentation for PHP UK Conference

Statistics

Views

Total Views
2,378
Views on SlideShare
2,117
Embed Views
261

Actions

Likes
2
Downloads
37
Comments
0

5 Embeds 261

http://www.phpconference.co.uk 242
http://redstones.be.dev.becoded.be 11
http://2012.phpconference.co.uk 5
http://panamanianhouses.com.dev.becoded.be 2
http://phpconference.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Powering your website with realtime data Presentation Transcript

  • 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
  • 4. 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
  • 6. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 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
  • 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 • 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
  • 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 / 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
  • 31. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 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
  • 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 ServiceSunday 26 February 2012
  • 46. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 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
  • 51. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 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
  • 56. Overview • The old days • XMPP • Install server • Configure apache • Libraries • ExamplesSunday 26 February 2012
  • 57. Examples: setupSunday 26 February 2012
  • 58. Sunday 26 February 2012
  • 59. Examples: messages • Browser • Log • AdiumSunday 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 • 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
  • 83. Sunday 26 February 2012
  • 84. Sunday 26 February 2012
  • 85. Sunday 26 February 2012
  • 86. 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