Aplicações Realtime com XMPP

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
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
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 macedo@taskie.org/home
26. ✴ Jabber ID (JID) Endereçamento macedo@taskie.org/home
27. ✴ Jabber ID (JID) Endereçamento macedo@taskie.org/home
28. ✴ Jabber ID (JID) Endereçamento macedo@taskie.org/home
29. XML Stanzas ✴ <message/> ✴ <presence/> ✴ <iq/>
30. <message/> <message from="macedo@taskie.org/cm42" to="rafael@taskie.org" type="chat"> <body>Hello World from XMPP!</body> </message>
31. <message from="macedo@taskie.org/cm42" to="rafael@taskie.org" type="chat"> <body>Hello World from XMPP!</body> </message> <message/>
32. <message from="macedo@taskie.org/cm42" to="rafael@taskie.org" type="chat"> <body>Hello World from XMPP!</body> </message> <message/>
33. <message from="macedo@taskie.org/cm42" to="rafael@taskie.org" type="chat"> <body>Hello World from XMPP!</body> </message> <message/> chat error normal groupchat headline
34. <message from="macedo@taskie.org/cm42" to="rafael@taskie.org" 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="macedo@taskie.org/ 43048a3c-337c-4834-b412-40a424501a8" from="conference.taskie.org" id="rooms-info"> <query xmlns="http://jabber.org/protocol/ disco#items"> <item jid="rsjs2014@conference.taskie.org" name="rsjs2014"/> </query> </iq>
45. XMPP na WEB
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="macedo@taskie.org/home" to="rsjs2014@conference.taskie.org/rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>
76. <presence from="macedo@taskie.org/home" to="rsjs2014@conference.taskie.org/ rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>
77. <presence from="macedo@taskie.org/home" to="rsjs2014@conference.taskie.org/ rafaelmacedo"> <x xmlns="http://jabber.org/protocol/muc"/> </presence>
78. <presence from="macedo@taskie.org/home" to="rsjs2014@conference.taskie.org/ 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: "rafael@taskie.org", type: "chat" } );
83. $pres(attrs) $msg(attrs) $iq(attrs)
84. new Strophe.Builder( "message", { to: "rafael@taskie.org", type: "chat" } ); $msg( { to: "rafael@taskie.org", type: "chat" });
85. c: function(name, attrs, text ) t: function(text) adicionando nó filho adicionando conteúdo
86. new Strophe.Builder( "message", { to: "rafael@taskie.org", type: "chat" } ); $msg( { to: "rafael@taskie.org", 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. rsjs2014@conference.taskie.org/rafaelmacedo resource
97. rsjs2014@conference.taskie.org/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)); } }
101. Enviando mensagens var message = $msg( { to: "rsjs2014@conference.taskie.org", 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 === "rsj2014@conference.taskie.org") { var msg = $message.children("body").text(); } return true; }
105. XMPP é a escolha certa? ✴ informação de presença ✴ notificações sem pooling ✴ custom payloads ✴ encriptação de canal
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; }