Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aplicações Realtime com XMPP

Avatar for Rafael Macedo Rafael Macedo
May 17, 2014
Programming
220
3

Aplicações Realtime com XMPP

Avatar for Rafael Macedo

Rafael Macedo

May 17, 2014

More Decks by Rafael Macedo

See All by Rafael Macedo
Modularização de código JS
Avatar for Rafael Macedo macedorafael
0
250
TDC 2014 - Solucionando o problema de Uploads em Apps no Heroku
Avatar for Rafael Macedo macedorafael
1
170
GuruSP - Solucionando o problema de Uploads em Apps no Heroku
Avatar for Rafael Macedo macedorafael
2
120
Web in the cloud with ruby
Avatar for Rafael Macedo macedorafael
2
400

Other Decks in Programming

See All in Programming
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.8k
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
Avatar for Kato Ryo kmd2kmd
0
120
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
Avatar for MinoDriven minodriven
21
7.1k
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
5
420
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
130
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
610
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
420
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
230
JavaDoc 再入門
Avatar for nagise nagise
1
430
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
120
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
640

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
180
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.3k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
210
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
350
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
170
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k

Transcript

  1. Aplicações Realtime com XMPP

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

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

  4. backend…

  5. …com chapéu de front

  6. …com chapéu de front by @jcemer

  7. codeminer42.com

  8. Estamos contratando codeminer42.com

  9. XMPP

  10. EXtensible Messaging and Presence Protocol

  11. None

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

  13. XEP (XMPP Extension Protocol) ✴ discussões na lista de email

    ✴ reviews ✴ votação ✴ testes de interoperabilidade

  14. Um pouco de história…

  15. Um pouco de história…

  16. 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

  17. Um pouco de história… 2007 Passou a se chamar XMPP

    Standard Foundation(XSF) 2011 RFC 6121 RFC 6120 RFC 6122
  18. None

  19. Arquitetura XMPP

  20. Endereçamento

  21. XML Stanzas

  22. Arquitetura XMPP Servidor Cliente c2s

  23. Servidores

  24. Clientes

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

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

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

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

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

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

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

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

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

    chat error normal groupchat headline

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

  35. <presence/> <presence type="away"> <show>away</show> <status>@ RSJS 2014</status> </presence>

  36. <presence/> <presence type="away"> <show>away</show> <status>@ RSJS 2014</status> </presence>

  37. <presence/> <presence type="away"> <show>away</show> <status>@ RSJS 2014</status> </presence>

  38. <presence/> <presence type="away"> <show>away</show> <status>@ RSJS 2014</status> </presence>

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

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

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

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

    set result

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

  44. <iq type="result" to="[email protected]/ 43048a3c-337c-4834-b412-40a424501a8" from="conference.taskie.org" id="rooms-info"> <query xmlns="http://jabber.org/protocol/ disco#items"> <item

    jid="[email protected]" name="rsjs2014"/> </query> </iq>

  45. XMPP na WEB

  46. None
  47. None
  48. None

  49. 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.

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

  51. Multi User Chat (MUC)

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

  53. ✴ 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

  54. Primeiros passos ✴ Criar conexão ✴ Conectar

  55. Criar conexão

  56. $("#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”); } } .... }); }); !

  57. $("#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”); } } .... }); }); !

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

  59. Strophe.Connection = function(service, options ) http://strophe.im/strophejs/doc/1.1.3/files/strophe- js.html#Strophe.Connection ws:// ou wss://

    => WebSocket http:// ou https:// => BOSH

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

    \o/

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

  62. 
 BOSH ✴Bidirectional-streams Over Syncrhonous HTTP

  63. ✴push/pull ✴eficiente ✴latência baixa

  64. A B idle

  65. A B idle

  66. $("#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”); } } .... }); });

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

    callback )

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

    callback ) connecting authenticating authentication failed connected disconnecting disconnected

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

  70. $("#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”); } } .... }); });

  71. Conectado!! hora de entrar em alguma sala

  72. rsjs2014 A B C D <presence/>

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

    C

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

    D <presence/> D

  75. <presence from="[email protected]/home" to="[email protected]/rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>

  76. <presence from="[email protected]/home" to="[email protected]/ rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>

  77. <presence from="[email protected]/home" to="[email protected]/ rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>

  78. <presence from="[email protected]/home" to="[email protected]/ rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>

  79. $("#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

  80. $("#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

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

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

  83. $pres(attrs) $msg(attrs) $iq(attrs)

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

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

  85. c: function(name, attrs, text ) t: function(text) adicionando nó filho

    adicionando conteúdo

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

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

  87. $("#join").on("click", function() { var room = $("#room"), , nick =

    $("#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

  88. $("#join").on("click", function() { var room = $("#room"), , nick =

    $("#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

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

    callback ) send: function(elem)

  90. Entrei?! mas cade todo mundo????

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

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

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

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

  94. 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; };

  95. 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; };

  96. [email protected]/rafaelmacedo resource

  97. [email protected]/rafaelmacedo Bare JID

  98. 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;

  99. 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)); } }
  100. None

  101. Enviando mensagens var message = $msg( { to: "[email protected]", type:

    "groupchat" }); message.c("body").t("\o/"); connection.send(message);

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

  103. 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; }
  104. None

  105. XMPP é a escolha certa? ✴ informação de presença ✴

    notificações sem pooling ✴ custom payloads ✴ encriptação de canal
  106. None

  107. Obrigado Rafael Macedo @macedorafael rafaelmacedo.com

  108. Obrigado Rafael Macedo @macedorafael rafaelmacedo.com ?

  109. Referencias Professinal XMPP- Programming with JavaScript and jQuery XMPP -

    The Definitive Guide

  110. 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>

  111. 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);

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

  113. 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; }
  114. None