Powering your website with realtime data

Powering your website with
realtime data

Bert Van Hauwaert
bert@becoded.be - @tbotwit
Sunday 26 February 2012

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


Overview

• The old days

• XMPP

• Install server

• Configure apache

• Libraries

• Examples


The old days

• <meta http-equiv=”refresh” content=”5” />

• <script >

• AJAX


Websockets

Source: http://caniuse.com/#feat=websockets

XMPP: what

• Extensible Messaging and Presence Protocol

• Jabber

• XML

• Client - Server - Component


XMPP: stanzas

• <presence>

• <message>

• <iq>


XMPP: addressing

• JID (Jabber Identifier)

• Three main parts

• [ node "@" ] domain [ "/" resource ]


XMPP: extensions

• XMPP Extension Protocol - XEP

• http://xmpp.org/xmpp-protocols/xmpp-extensions/


XMPP: advantages

• Open

• Decentralized

• Secure

• Extensible


XMPP: disadvantages

• Statefulness

• Overhead


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>


XMPP: example
<stream:stream>
</iq>
<presence />
type="chat">
<body>
</body>
</message>
<presence>
<show>dnd</show>
</presence>
</stream:stream>


XMPP: example
<stream:stream>
</iq>

<presence />
<message
to="attendees@phpukconference.com"
type="chat">
<body>
</body>
</message>
<presence>
<show>dnd</show>
</presence>
</stream:stream>


XMPP: example
<stream:stream>
</iq>

<presence />
type="chat">
<body>
</body>
</message>
<presence>
<show>dnd</show>
<status>
Giving a talk @ PHP UK conference
</status>
</presence>
</stream:stream>


XMPP: XEP-0060 (1)

• PubSub (Publish / Subscribe)

• Bandwidth / resources


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>


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>


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>


XMPP: XEP-0045 (1)

• MUC / Multi-User Chat

• “Multiplier”


XMPP: XEP-0045 (2)

<presence
from="user@domain.com/resource"
to="room@conference.muc.com/nickname">
<x xmlns=
"http://jabber.org/protocol/muc"/>
</presence>


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>


Install server: starting point

• Debian

• web server

• SQL database

• SSH server


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


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


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


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



• http://[server-ip]:9090/



• Plugins

• User Service

• Monitoring Service


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


Configure apache: why (2)

• BOSH (Bidirectional streams Over Synchronous HTTP)


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


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>


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


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();


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();
}


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);
}
});


Examples: setup


Examples: messages

• Browser

• Log

• Adium


Example: IQ ping pong (1)
this.statusHandler = function (status) {
var me = this;
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));
}
};



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);
};


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


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);
}
});
};

this.statusHandler = function (status)
{
var me = this;
me.logStatus(status);
me.connection.addHandler(
function(msg) { //(Function) handler.
return me.handleChatMessage(msg);
},
null, //(String) ns
'message', //(String) name
'chat'); //(String) type
}
};



this.handleChatMessage = function (msg)
{
var me = this;

var from = objMsg.attr('from');
var nick = Strophe.getNodeFromJid(from);
var body = objMsg.children('body').text();

me.addMessageToChat(nick, body);

return true;
};


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);
}
};


Example: statistics

this.handleHighChartData = function (msg)
{
var me = this;

var body = objMsg.children('body').text();

me.chart.series[0].setData(jQuery.parseJSON(body));
return true;
};


Example: prebind BOSH (1)

• SID - RID

• Security

• User friendly

• Performance

• Persisting


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);
});
};


Books


Thank you

• bert@becoded.be

• Code: https://github.com/becoded/talk-xmpp-demo

• Slides: Slideshare

• Rate / comments: http://joind.in


http://joind.in/4945

http://joind.in/4977

Questions

? ? ? ?


Powering your website with realtime data

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

En vedette

En vedette (12)

Similaire à Powering your website with realtime data

Similaire à Powering your website with realtime data (20)

Dernier

Dernier (20)

Powering your website with realtime data