Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Aplicações Realtime com XMPP

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Rafael Macedo Rafael Macedo
May 17, 2014
Programming
230
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
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
930
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
360
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
540
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
470
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
6
13k
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.8k
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
390
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
190
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.2k
Workers Cache を知る
Avatar for syumai syumai
0
250
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
160
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
440

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
710
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k

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