Aplicações Realtime com XMPP

Rafael Macedo @macedorafael http://github.com/rafaelmacedo

backend…

…com chapéu de front

…com chapéu de front by @jcemer

codeminer42.com

Estamos contratando codeminer42.com

EXtensible Messaging and Presence Protocol

~ 300 extensões registrados na XSF (XMPP Standards Foundation) http://xmpp.org/xmpp-protocols/xmpp-extensions/

XEP (XMPP Extension Protocol) ✴ discussões na lista de email
✴ reviews ✴ votação ✴ testes de interoperabilidade

Um pouco de história…

Um pouco de história… 1999 Projeto Jabber iniciado por Jeremie
Miller 2001 Fundação da Jabber Software Foundation (JSF) 2004 Publicação XMPP_1.0 RFC3920 RFC3921 RFC3922 RFC3923

Um pouco de história… 2007 Passou a se chamar XMPP
Standard Foundation(XSF) 2011 RFC 6121 RFC 6120 RFC 6122

Arquitetura XMPP

Endereçamento

XML Stanzas

Arquitetura XMPP Servidor Cliente c2s

Servidores

Clientes

✴ Jabber ID (JID) Endereçamento [email protected]/home

XML Stanzas ✴ <message/> ✴ <presence/> ✴ <iq/>

<message/> <message from="[email protected]/cm42" to="[email protected]" type="chat"> <body>Hello World from XMPP!</body> </message>

<message from="[email protected]/cm42" to="[email protected]" type="chat"> <body>Hello World from XMPP!</body> </message> <message/>

chat error normal groupchat headline

<iq/> <iq to="conference.taskie.org" id="rooms-info" type="get"> <query xmlns="http://jabber.org/protocol/ disco#items"/> </iq> get
set result

XMPP na WEB

http://strophe.im/strophejs/ Strophe.js An XMPP library for JavaScript Strophe.js is an
XMPP library for JavaScript. It is primary purpose is to enable web-based, real-time XMPP applications that run in any browser.

✴ Documentada ✴ Otimizada ✴ Testada ✴ Chesspark, Seesmic, Yammer

Multi User Chat (MUC)

https://github.com/rafaelmacedo/xmpp-chat-rsjs2014

✴ XEP-0045: Multi-User Chat ✴ troca de mensagens no contexto
de uma sala ✴ banir usuários ✴ moderação ✴ … http://xmpp.org/extensions/xep-0045.html

Primeiros passos ✴ Criar conexão ✴ Conectar

Criar conexão

$("#login").on("click", function() { var connection = new Strophe.Connection( "http://taskie.org:5280/http-bind"); !
var jid = $("#jid").val() , passwd = $("#passwd").val(); ! connection.connect(jid, passwd, function(status) { if (status === Strophe.Status.CONNECTED) { alert("ihuuu connected!!!"); } else { if (status === Strophe.Status.AUTHFAIL) { alert("wrong passwd”); } } .... }); }); !

$("#login").on("click", function() { var connection = new Strophe.Connection( "http://taskie.org:5280/http- bind");
! var jid = $("#jid").val() , passwd = $("#passwd").val(); ! connection.connect(jid, passwd, function(status) { if (status === Strophe.Status.CONNECTED) { alert("ihuuu connected!!!"); } else { if (status === Strophe.Status.AUTHFAIL) { alert("wrong passwd”); } } .... }); }); !

Strophe.Connection = function(service, options ) http://strophe.im/strophejs/doc/1.1.3/files/strophejs.html#Strophe.Connection

Strophe.Connection = function(service, options ) http://strophe.im/strophejs/doc/1.1.3/files/strophejs.html#Strophe.Connection ws:// ou wss://
=> WebSocket http:// ou https:// => BOSH

  WEBSockets A B Iniciar conexão TCP GET /socket HTTP/1.1
\o/

✴xmpp over websocket ✴draft (http://tools.ietf.org/html/ draft-ietf-xmpp-websocket-06) ✴versão 6 (22/04/2014)

  BOSH ✴Bidirectional-streams Over Syncrhonous HTTP

✴push/pull ✴eficiente ✴latência baixa

A B idle

Strophe.Connection = function(service, options ) http://strophe.im/strophejs/doc/1.1.3/files/strophejs.html#Strophe.Connection connect: function(jid, passwd,
callback )

callback ) connecting authenticating authentication failed connected disconnecting disconnected

Strophe.Status .CONNECTING .AUTHENTICATING .CONNECTED .DISCONNECTING .DISCONNECTED .CONNFAIL .AUTHFAIL ! !

Conectado!! hora de entrar em alguma sala

rsjs2014 A B C D <presence/>

rsjs2014 A B C D <presence/> A <presence/> B <presence/>
C

rsjs2014 A B C D <presence/> D <presence/> D <presence/>
D <presence/> D

$("#join").on("click", function() { var room = $("#room"), , nick =
$("#nick"); ! var presence = new Strophe.Builder(“presence”, { to: room + “@conference.taskie.org/” + nickname }) .c("x", {xmlns: "http://jabber.org/protocol/muc"}); ! connection.send(presence); }); Enviando informação de presença

$("#nick"); ! var presence = new Strophe.Builder(“presence”, { to: room + “@conference.taskie.org/” + nickname }) .c("x", {xmlns: "http://jabber.org/protocol/ muc"}); ! connection.send(presence); }); Enviando informação de presença

Strophe.Builder = function(name, attrs ) http://strophe.im/strophejs/doc/1.1.3/files/strophejs.html#Strophe.Builder

new Strophe.Builder( "message", { to: "[email protected]", type: "chat" } );

$pres(attrs) $msg(attrs) $iq(attrs)

$msg( { to: "[email protected]", type: "chat" });

c: function(name, attrs, text ) t: function(text) adicionando nó filho
adicionando conteúdo

$msg( { to: "[email protected]", type: "chat" }) .c("body") .t("Hello World!");

$("#nick"); ! var presence = $pres( { to: room + “@conference.taskie.org/” + nickname }) .c("x", {xmlns: "http://jabber.org/protocol/muc"}); ! connection.send(presence); }); Enviando informação de presença

callback ) send: function(elem)

Entrei?! mas cade todo mundo????

Recebendo informação de presença connection.addHandler(onPresence, null, "presence");

callback ) send: function(elem) addHandler: function (handler, ns, name, type, id, from, options )

addTimedHandler: function(period, handler ) deleteTimedHandler: function( handRef) deleteHandler: function(handRef)

onPresence: function(presence) { var $presence = $(presence) , presenceType =
$presence.attr("type"); var from = $presence.attr("from") , room = Strophe.getBareJidFromJid(from); , nick = Strophe.getResourceFromJid(from); if (presenceType === "error") { connection.disconnect(); } else if (presenceType !== "unavailable") { participants.push({ nickname: nick }); } if (presenceType !== "error") { if ($presence.find("status[code='110']").length > 0) { if ($presence.find("status[code='210']").length > 0) { nick = Strophe.getResourceFromJid(from)); } } } return true; };

[email protected]/rafaelmacedo resource

[email protected]/rafaelmacedo Bare JID

onPresence: function(presence) { var $presence = $(presence) , presenceType =
$presence.attr("type"); var from = $presence.attr("from") , room = Strophe.getBareJidFromJid(from); , nick = Strophe.getResourceFromJid(from); if (presenceType === "error") { connection.disconnect(); } else if (presenceType !== "unavailable") { participants.push({ nickname: nick }); } if (presenceType !== "error") { if ($presence.find("status[code='110']").length > 0) { if ($presence.find("status[code='210']").length > 0) { nick = Strophe.getResourceFromJid(from)); } } } return true;

Enviando mensagens var message = $msg( { to: "[email protected]", type:
"groupchat" }); message.c("body").t("\o/"); connection.send(message);

Ouvindo mensagens connection.addHandler( onPublicMessage, null, "message", "groupchat");

onPublicMessage: function(message) { var $message = $(message); var from =
$message.attr("from") , room = Strophe.getBareJidFromJid(from) , nick = Strophe.getResourceFromJid(from); if (room === "[email protected]") { var msg = $message.children("body").text(); } return true; }

XMPP é a escolha certa? ✴ informação de presença ✴
notificações sem pooling ✴ custom payloads ✴ encriptação de canal

Obrigado Rafael Macedo @macedorafael rafaelmacedo.com

Obrigado Rafael Macedo @macedorafael rafaelmacedo.com ?

Referencias Professinal XMPP- Programming with JavaScript and jQuery XMPP -
The Definitive Guide

Procurando por salas ✴ iq stanza ✴ disco#items protocol <iq
to="conference.taskie.org" id="rooms-info" type="get"> <query xmlns="http://jabber.org/protocol/disco#items"/> </iq>

var iq = $iq( { to: "conference.taskie.org", type: "get", id:
"rooms-info" }); ! iq.c("query", { xmlns: "http://jabber.org/protocol/ disco#items" }); connection.send(iq);

connection.addHandler( onRoomsInfo, null, "iq", "result", "rooms-info");

onRoomsInfo: function(iq) { var $IQ = $(iq); var items =
$IQ.find("item") , rooms; ! rooms = _.map(items, function(item) { var $item = $(item); ! return { jid: $item.attr("jid"), name: $item.attr("name") }; }); ! return true; }

Aplicações Realtime com XMPP

Aplicações Realtime com XMPP

More Decks by Rafael Macedo

Other Decks in Programming

Featured

Transcript