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.
1.
Powering your website with
realtime data
Bert Van Hauwaert
bert@becoded.be - @tbotwit
Sunday 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 sites
Sunday 26 February 2012
3.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
Sunday 26 February 2012
4.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
Sunday 26 February 2012
5.
The old days
• <meta http-equiv=”refresh” content=”5” />
• <script >
• AJAX
Sunday 26 February 2012
6.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
Sunday 26 February 2012
7.
Websockets
Source: http://caniuse.com/#feat=websockets
Sunday 26 February 2012
8.
XMPP: what
• Extensible Messaging and Presence Protocol
• Jabber
• XML
• Client - Server - Component
Sunday 26 February 2012
31.
Overview
• The old days
• XMPP
• Install server
• Configure apache
• Libraries
• Examples
Sunday 26 February 2012
32.
Install server: starting point
• Debian
• web server
• SQL database
• SSH server
Sunday 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 all
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
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