Post on 20-Feb-2017
transcript
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_
🕹
💈
📱
Fernando
Renato
NicolleDébora
Alessandro
José
(estagiário)
Todos estão com internet?
#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
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
Utilização
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
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
Hora do
código
servidorcliente
Instalando
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!’);
Perguntas?
thulioph.com
Obrigado.