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
