SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
1.
October 2011
Powering your website with
realtime data
Bert Van Hauwaert
bert@becoded.be - @tbotwit
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.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
4.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
5.
The old days
• <meta http-equiv=”refresh” content=”5” />
• <script >
• AJAX
6.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
7.
XMPP: what
• Extensible Messaging and Presence Protocol
• Jabber
• XML
• Client - Server - Component
30.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
31.
Install server: starting point
• Debian
• web server
• SQL database
• SSH server
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
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.
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.
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.
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.
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.
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.
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.
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.
Example: prebind BOSH (1)
• SID - RID
• Security
• User friendly
• Performance
• Persisting
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);
});
};