Aplicações Real- Time

Socket.io

Firebase

com

+

+ Software Engineer @Labcodes

+ Design Gráfico @Unibratec

+ Web Apps @Unibratec

+ Google Maps

+ Offline First

❤

+ Cerveja 🍺

📶

Thulio Philipe @thulioph

🕹

💈

📱

+ Software Engineer @Labcodes

+ Design Gráfico @Unibratec

+ Web Apps @Unibratec

+ Google Maps

+ Offline First

❤

+ Cerveja 🍺

📶

Thulio Philipe @thulioph_

🕹

💈

📱

https://flunearyou.org

https://guardioesdasaude.org

https://angrytaxis.com

https://hortalivre.com.br

Fernando

Renato

NicolleDébora

Alessandro

José

(estagiário)

Todos estão com internet?

https://goo.gl/5j2V5m

#tdcpoa#TheDevConf

Protocolos

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

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

H T T P

- 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

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

websocket

WebSocket

Real-time

• Utilizava o protocolo HTTP.

• Vários requests eram necessários utilizando setTimeOut() a cada 1s/2s.

• Sobrecarga no servidor, aplicação lenta.

Antes...

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

Antes...

Hoje.

WebSockets

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

• 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

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

WebSockets

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

WebSockets

https://www.ietf.org/

WebSockets

Utilização

https://www.twitter.com/

https://www.twitter.com/

https://www.youtube.com/

https://www.youtube.com/

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

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

https://gameofbombs.com/

https://github.com/rauchg/weplay

Socket.io

http://socket.io/

• 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

comoadiciono

no meuprojeto?

• Instale o socket.io

• Acople o socket ao servidor existente (que pode ser um servidor http)

• Utilize listeners (emitindo e recebendo eventos).

Socket.io

Firebase

https://firebase.google.com

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

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

vamos utilizá-lo

comoadiciono

no meuprojeto?

• 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

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

Firebase Adventures

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

Hora do

código

servidorcliente

Instalando

npm install --save socket.io

Instalando

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

</script>

Importando

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

Eventos

emissor

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

Javascript

var socket = io();

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

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

var socket = io();

Eventos

receptor

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

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

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

Perguntas?

thulioph.com

Obrigado.