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
180
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
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
610
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
Avatar for nogu nogu66
0
130
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
600
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
800
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
130
FDEとは、何者なのか？
Avatar for Masapyon masapyon1212
0
110
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
2
930
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
1.1k
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
550
新人はどこまで自力でやり、どこからAIに頼るべきか／エンジニア育成に向き合う_先輩たちの悩みと知見共有会
Avatar for TOPPAN ict toppan_digital_dev
1
450
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
180

Featured

See All Featured
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
440
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.1k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
700
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
810

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