Aplicações Real-Time com SocketIO e Firebase

Evento: Meetup - GDG Recife

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.

Transcript

1. Real-time applications com
   Socket.io e Firebase
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Protocolos
   

   View Slide

6. HTTP
   + Request/Response.
   + Enviar e receber informações na web.
   + Sua versão atual é a 2.
   + Necessita que uma requisição seja disparada da parte do user-agent
   para que então tenha uma resposta do servidor.
   

   View Slide

7. HTTP
   https://nandovieira.com.br/entendendo-um-pouco-mais-sobre-o-protocolo-http
   

   View Slide

8. WEBSOCKET
   + 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.
   + Comunicação de dados Full-duplex.
   + O handshake se parece com o HTTP, facilitando com que o servidor possa
   servir HTTP e WebSockets na mesma porta.
   

   View Slide

9. WEBSOCKET
   https://pt.wikipedia.org/wiki/Duplex
   websocket
   

   View Slide

10. Real-time
    

    View Slide

11. View Slide

12. ANTES...
    • Utilizava o protocolo HTTP.
    • setTimeOut().
    • Sobrecarga no servidor, aplicação lenta.
    

    View Slide

13. ANTES...
    http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html
    

    View Slide

14. HOJE.
    

    View Slide

15. WebSockets
    

    View Slide

16. • É 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 )
    • Pode ser oferecido com SSL
    • WebRTC
    • Regulamentado pelo IETF
    

    View Slide

17. WEBSOCKET
    https://pt.wikipedia.org/wiki/Duplex
    

    View Slide

18. http://caniuse.com/#search=websockets
    

    View Slide

19. https://www.ietf.org/
    

    View Slide

20. Utilização
    

    View Slide

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

    View Slide

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

    View Slide

23. https://www.youtube.com/
    

    View Slide

24. https://www.youtube.com/
    

    View Slide

25. https://www.twitter.com/
    

    View Slide

26. https://www.twitter.com/
    

    View Slide

27. https://gameofbombs.com/
    

    View Slide

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

    View Slide

29. View Slide

30. Socket.io
    

    View Slide

31. http://socket.io/
    

    View Slide

32. • Biblioteca para implementação de 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 server como do lado
    client.
    SOCKET.IO
    

    View Slide

33. • Instale o socket.io.
    • Acople o socket ao servidor existente (que pode ser um servidor http).
    • Utilize listeners (emitindo e recebendo eventos).
    baby steps..
    

    View Slide

34. Firebase
    

    View Slide

35. https://firebase.google.com
    

    View Slide

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

    View Slide

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

    View Slide

38. • 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.
    baby steps..
    

    View Slide

39. https://github.com/firebase/quickstart-js/tree/master/database
    

    View Slide

40. View Slide

41. Firebase
    Adventures
    

    View Slide

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

    View Slide

43. https://firechat.firebaseapp.com/
    

    View Slide

44. Code
    

    View Slide

45. server
    client
    

    View Slide

46. instalando
    npm install --save socket.io
    

    View Slide

47. socket.io/1.4.8/socket.io.min.js”>
    “instalando"
    

    View Slide

48. importando
    var io = require('socket.io')();
    

    View Slide

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

    View Slide

50. var socket = io();
    JS
    socket.on('user:connected', function(data) {
    console.log(data); // a new user is connected
    });
    

    View Slide

51. JS
    socket.emit(‘my_event’, ‘my favourite color is red');
    var socket = io();
    

    View Slide

52. recebendo eventos
    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!’);
    

    View Slide

53. https://github.com/thulioph/realtime-chatapp
    

    View Slide

54. #TCHAUQUERIDO.
    thulioph.com
    

    View Slide