Aplicações Real-Time com SocketIO e Firebase

Aplicações Real-Time com SocketIO e Firebase

Eventos: GDG Tech Tour e TDC Porto Alegre

Apresentação sobre protocolos HTTP e Websockets, como funcionam aplicações real-time e como servir o seu projeto em tempo real utilizando Socket.io, Firebase e Angularjs.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

September 24, 2016
Tweet

Transcript

  1. Aplicações Real-Time Socket.io Firebase com +

  2. + Software Engineer @Labcodes + Design Gráfico @Unibratec + Web

    Apps @Unibratec + Google Maps + Offline First ❤ + Cerveja Thulio Philipe @thulioph
  3. + Software Engineer @Labcodes + Design Gráfico @Unibratec + Web

    Apps @Unibratec + Google Maps + Offline First ❤ + Cerveja Thulio Philipe @thulioph_
  4. None
  5. None
  6. https://flunearyou.org

  7. https://guardioesdasaude.org

  8. https://angrytaxis.com

  9. https://hortalivre.com.br

  10. Fernando Renato Nicolle Débora Alessandro José (estagiário)

  11. Todos estão com internet?

  12. https://goo.gl/5j2V5m

  13. Protocolos

  14. H T T P - Enviar e receber informações na

    web - Request/Response - Sua versão atual é a 2 - Uma requisição precisa ser transmitida pelo user-agent para que então o servidor responda
  15. https://nandovieira.com.br/entendendo-um-pouco-mais-sobre-o-protocolo-http H T T P

  16. - Transmissão de dados em ambos os sentidos de forma

    simultânea. - Mantém uma conexão persistente no servidor. - O servidor agora consegue enviar requisições para o navegador e vice-versa sem que ele requisite. - O handshake se parece com o HTTP, facilitando com que o servidor possa servir HTTP e WebSockets na mesma porta. WebSocket
  17. https://pt.wikipedia.org/wiki/Duplex websocket WebSocket

  18. Real-time

  19. None
  20. • Utilizava o protocolo HTTP. • Vários requests eram necessários

    utilizando setTimeOut() a cada 1s/2s. • Sobrecarga no servidor, aplicação lenta. Antes...
  21. http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html Antes...

  22. Hoje.

  23. WebSockets

  24. • É uma API que estabelece uma única conexão via

    socket entre um client e o server • Foi padronizado pelo W3C (~ 2012) • No flash player 9 já tinha implementado WebSockets (~ 2010 ) • Flash Sockets • Pode ser oferecido com SSL WebSockets
  25. • Regulamentado pelo IETF
 (internet engineering task force) • Imagine

    uma espécie de túnel entre o cliente e servidor • WebRTC 
 (web real-time communication) • ligações de voz, video, chat e transferência de arquivos sem plugin. WebSockets
  26. https://pt.wikipedia.org/wiki/Duplex WebSockets

  27. http://caniuse.com/#search=websockets WebSockets

  28. https://www.ietf.org/ WebSockets

  29. Utilização

  30. https://www.twitter.com/

  31. https://www.twitter.com/

  32. https://www.youtube.com/

  33. https://www.youtube.com/

  34. https://www.google.com/analytics/

  35. https://www.google.com/analytics/

  36. https://gameofbombs.com/

  37. https://github.com/rauchg/weplay

  38. None
  39. Socket.io

  40. http://socket.io/

  41. • Real-time, baseada em eventos de comunicação bi-direcionais • Desenvolvido

    com Javascript utilizando a especificação dos WebSockets • Funciona em qualquer tipo de dispositivo, mobile ou desktop • É necessária a implementação tanto do lado servidor como do lado cliente Socket.io
  42. como adiciono no meu projeto?

  43. • Instale o socket.io • Acople o socket ao servidor

    existente
 (que pode ser um servidor http) • Utilize listeners (emitindo e recebendo eventos). Socket.io
  44. Firebase

  45. https://firebase.google.com

  46. https://firebase.google.com/features/

  47. https://firebase.google.com/features/ vamos utilizá-lo

  48. como adiciono no meu projeto?

  49. • Crie um projeto no firebase console • Configure o

    firebase na sua aplicação, integrando o script (código fornecido pela documentação) • Envie os dados e escute as mudanças Firebase
  50. https://github.com/firebase/quickstart-js/tree/master/database

  51. None
  52. Firebase Adventures

  53. https://www.youtube.com/watch?v=2mcQ4t_M_CU

  54. Hora do código

  55. servidor cliente

  56. Instalando

  57. npm install --save socket.io

  58. Instalando

  59. <script src=“https://cdnjs.cloudflare.com/ ajax/libs/socket.io/1.4.8/ socket.io.min.js”> </script>

  60. Importando

  61. var io = require('socket.io')();

  62. Eventos emissor

  63. io.on('connection',function(socket) { io.emit(‘user:connected’, ‘a new user is connected'); });

  64. Javascript

  65. var socket = io(); socket.on('user:connected', function(data) { console.log(data); // a

    new user is connected });
  66. socket.emit(‘my_event’, ‘my favourite color is red'); var socket = io();

  67. Eventos receptor

  68. io.on('connection', function (socket) { socket.on(‘my_event', function (data) { console.log(data); //

    my favourite color is red
 
 }); }); io.emit(‘alert’, ‘socket.io is awesome!’);
  69. https://github.com/thulioph/chat-app

  70. https://github.com/thulioph/twitter-realtime

  71. Perguntas?

  72. thulioph.com Obrigado.