O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TDC2016POA | Trilha Web - Realtime applications com Socket.io

129 visualizações

Publicada em

Realtime applications com Socket.io

Publicada em: Educação
  • Seja o primeiro a comentar

TDC2016POA | Trilha Web - Realtime applications com Socket.io

  1. 1. Aplicações Real-Time Socket.io Firebase com +
  2. 2. +SoftwareEngineer@Labcodes +DesignGráfico@Unibratec +WebApps@Unibratec +GoogleMaps +OfflineFirst ❤ +Cerveja 🍺 📶 ThulioPhilipe @thulioph 🕹 💈 📱
  3. 3. +SoftwareEngineer@Labcodes +DesignGráfico@Unibratec +WebApps@Unibratec +GoogleMaps +OfflineFirst ❤ +Cerveja 🍺 📶 ThulioPhilipe @thulioph_ 🕹 💈 📱
  4. 4. https://flunearyou.org
  5. 5. https://guardioesdasaude.org
  6. 6. https://angrytaxis.com
  7. 7. https://hortalivre.com.br
  8. 8. Fernando Renato NicolleDébora Alessandro José (estagiário)
  9. 9. Todos estão com internet?
  10. 10. https://goo.gl/5j2V5m
  11. 11. #tdcpoa #TheDevConf
  12. 12. Protocolos
  13. 13. 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
  14. 14. https://nandovieira.com.br/entendendo-um-pouco-mais-sobre-o-protocolo-http H T T P
  15. 15. - 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
  16. 16. https://pt.wikipedia.org/wiki/Duplex websocket WebSocket
  17. 17. Real-time
  18. 18. • Utilizava o protocolo HTTP. • Vários requests eram necessários utilizando setTimeOut() a cada 1s/2s. • Sobrecarga no servidor, aplicação lenta. Antes...
  19. 19. http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html Antes...
  20. 20. Hoje.
  21. 21. WebSockets
  22. 22. • É 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
  23. 23. • 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
  24. 24. https://pt.wikipedia.org/wiki/Duplex WebSockets
  25. 25. http://caniuse.com/#search=websockets WebSockets
  26. 26. https://www.ietf.org/ WebSockets
  27. 27. Utilização
  28. 28. https://www.twitter.com/
  29. 29. https://www.twitter.com/
  30. 30. https://www.youtube.com/
  31. 31. https://www.youtube.com/
  32. 32. https://www.google.com/analytics/
  33. 33. https://www.google.com/analytics/
  34. 34. https://gameofbombs.com/
  35. 35. https://github.com/rauchg/weplay
  36. 36. Socket.io
  37. 37. http://socket.io/
  38. 38. • 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
  39. 39. como adiciono no meu projeto?
  40. 40. • Instale o socket.io • Acople o socket ao servidor existente
 (que pode ser um servidor http) • Utilize listeners (emitindo e recebendo eventos). Socket.io
  41. 41. Firebase
  42. 42. https://firebase.google.com
  43. 43. https://firebase.google.com/features/
  44. 44. https://firebase.google.com/features/ vamosutilizá-lo
  45. 45. como adiciono no meu projeto?
  46. 46. • 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
  47. 47. https://github.com/firebase/quickstart-js/tree/master/database
  48. 48. Firebase Adventures
  49. 49. https://www.youtube.com/watch?v=2mcQ4t_M_CU
  50. 50. Hora do código
  51. 51. servidorcliente
  52. 52. Instalando
  53. 53. npm install --save socket.io
  54. 54. Instalando
  55. 55. <script src=“https://cdnjs.cloudflare.com/ ajax/libs/socket.io/1.4.8/ socket.io.min.js”> </script>
  56. 56. Importando
  57. 57. var io = require('socket.io')();
  58. 58. Eventos emissor
  59. 59. io.on('connection',function(socket) { io.emit(‘user:connected’, ‘a new user is connected'); });
  60. 60. Javascript
  61. 61. var socket = io(); socket.on('user:connected', function(data) { console.log(data); // a new user is connected });
  62. 62. socket.emit(‘my_event’, ‘my favourite color is red'); var socket = io();
  63. 63. Eventos receptor
  64. 64. 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!’);
  65. 65. https://github.com/thulioph/chat-app
  66. 66. https://github.com/thulioph/twitter-realtime
  67. 67. Perguntas?
  68. 68. thulioph.com Obrigado.

×