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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

September 14, 2016
Tweet

Transcript

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

  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. Fernando Renato Nicolle Débora Alessandro José (estagiário)

  5. Protocolos

  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.
  7. HTTP https://nandovieira.com.br/entendendo-um-pouco-mais-sobre-o-protocolo-http

  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.
  9. WEBSOCKET https://pt.wikipedia.org/wiki/Duplex websocket

  10. Real-time

  11. None
  12. ANTES... • Utilizava o protocolo HTTP. • setTimeOut(). • Sobrecarga

    no servidor, aplicação lenta.
  13. ANTES... http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html

  14. HOJE.

  15. WebSockets

  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
  17. WEBSOCKET https://pt.wikipedia.org/wiki/Duplex

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

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

  20. Utilização

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

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

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

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

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

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

  27. https://gameofbombs.com/

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

  29. None
  30. Socket.io

  31. http://socket.io/

  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
  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..
  34. Firebase

  35. https://firebase.google.com

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

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

  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..
  39. https://github.com/firebase/quickstart-js/tree/master/database

  40. None
  41. Firebase Adventures

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

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

  44. Code

  45. server client

  46. instalando npm install --save socket.io

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

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

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

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

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

    io();
  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!’);
  53. https://github.com/thulioph/realtime-chatapp

  54. #TCHAUQUERIDO. thulioph.com