Realtime applications com Socket.io

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

2. +SoftwareEngineer@Labcodes
+DesignGráfico@Unibratec
+WebApps@Unibratec
+GoogleMaps
+OfflineFirst
❤
+Cerveja 🍺
📶
ThulioPhilipe
@thulioph
🕹
💈
📱

3. +SoftwareEngineer@Labcodes
+DesignGráfico@Unibratec
+WebApps@Unibratec
+GoogleMaps
+OfflineFirst
❤
+Cerveja 🍺
📶
ThulioPhilipe
@thulioph_
🕹
💈
📱

7. https://flunearyou.org

8. https://guardioesdasaude.org

9. https://angrytaxis.com

10. https://hortalivre.com.br

11. Fernando
Renato
NicolleDébora
Alessandro
José
(estagiário)

12. Todos estão
com internet?

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

14. #tdcpoa
#TheDevConf

15. Protocolos

16. 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

17. https://nandovieira.com.br/entendendo-um-pouco-mais-sobre-o-protocolo-http
H T T P

18. - 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

19. https://pt.wikipedia.org/wiki/Duplex
websocket
WebSocket

20. Real-time

22. • Utilizava o protocolo HTTP.
• Vários requests eram necessários utilizando
setTimeOut() a cada 1s/2s.
• Sobrecarga no servidor, aplicação lenta.
Antes...

23. http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html
Antes...

24. Hoje.

25. WebSockets

26. • É 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

27. • 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

28. https://pt.wikipedia.org/wiki/Duplex
WebSockets

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

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

31. Utilização

32. https://www.twitter.com/

33. https://www.twitter.com/

34. https://www.youtube.com/

35. https://www.youtube.com/

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

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

38. https://gameofbombs.com/

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

41. Socket.io

42. http://socket.io/

43. • 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

44. como
adiciono
no meu
projeto?

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

46. Firebase

47. https://firebase.google.com

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

49. https://firebase.google.com/features/
vamosutilizá-lo

50. como
adiciono
no meu
projeto?

51. • 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

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

54. Firebase
Adventures

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

56. Hora
do
código

57. servidorcliente

58. Instalando

59. npm install --save socket.io

60. Instalando

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

62. Importando

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

64. Eventos
emissor

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

66. Javascript

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

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

69. Eventos
receptor

70. 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!’);

71. https://github.com/thulioph/chat-app

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

73. Perguntas?

74. thulioph.com
Obrigado.