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
240
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
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
190
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
Avatar for ioki ioki
0
160
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
130
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
630
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
3
1.2k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.6k
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
120
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210
oxlintはeslint/typescript-eslintを置き換えられるのか
Avatar for shoma-fujita shomafujita
2
320
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
140
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
240
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
4.5k

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
220
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
250
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
200
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
190
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
380

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