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
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
270
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
360
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
120
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
1.1k
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
420
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
270
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
9
1.8k
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
280
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
200
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
Avatar for MinoDriven minodriven
21
7.1k
Contextとはなにか
Avatar for chiroruxx chiroruxx
1
380

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
320
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
360
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
260
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
660
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
250
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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