The document provides information on using XMPP (Extensible Messaging and Presence Protocol) to power a website with real-time data. It discusses older methods using meta refresh and AJAX polling. It then covers key aspects of XMPP including using XMPP servers, addressing with JIDs, common stanzas like presence and message, and extensions like pubsub and MUC for publishing and chat. It also lists libraries for connecting to XMPP like XMPPHP, Jaxl and Strophe.js. Examples demonstrate sending messages, IQ ping pong, and a support chat application.
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
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
61. 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));
}
};
62. 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);
};
63. 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"/>
64.
65. 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);
}
});
};
66. 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
}
};
67. 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;
};
68. 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);
}
};
69.
70. 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;
};
71.
72.
73. Example: prebind BOSH (1)
• SID - RID
• Security
• User friendly
• Performance
• Persisting
74. 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);
});
};
