$30 off During Our Annual Pro Sale. View Details »

Aplicações Real-Time com SocketIO e Firebase

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.

Thulio Philipe

September 14, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

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