Aplicações Real-Time com SocketIO e Firebase

Slide 1

Slide 1 text

Real-time applications com Socket.io e Firebase

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Protocolos

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Real-time

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

HOJE.

Slide 15

Slide 15 text

WebSockets

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

https://www.ietf.org/

Slide 20

Slide 20 text

Utilização

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

https://www.youtube.com/

Slide 24

Slide 24 text

https://www.youtube.com/

Slide 25

Slide 25 text

https://www.twitter.com/

Slide 26

Slide 26 text

https://www.twitter.com/

Slide 27

Slide 27 text

https://gameofbombs.com/

Slide 28

Slide 28 text

https://github.com/rauchg/weplay

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Socket.io

Slide 31

Slide 31 text

http://socket.io/

Slide 32

Slide 32 text

• 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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Firebase

Slide 35

Slide 35 text

https://firebase.google.com

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Firebase Adventures

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

https://firechat.firebaseapp.com/

Slide 44

Slide 44 text

Code

Slide 45

Slide 45 text

server client

Slide 46

Slide 46 text

instalando npm install --save socket.io

Slide 47

Slide 47 text

“instalando"

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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