Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aplicações Real-Time com SocketIO e Firebase

Aplicações Real-Time com SocketIO e Firebase

Evento: Meetup - GDG Recife

Apresentação sobre protocolos HTTP e Websockets, como funcionam aplicações real-time e como servir o seu projeto em tempo real utilizando Socket.io, Firebase e Angularjs.

Thulio Philipe

September 14, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. + Software Engineer @Labcodes + Design Gráfico @Unibratec + Web

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

    Apps @Unibratec + Google Maps + Offline First ❤ + Cerveja Thulio Philipe @thulioph_
  3. 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.
  4. 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.
  5. • É 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
  6. • 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
  7. • Instale o socket.io. • Acople o socket ao servidor

    existente (que pode ser um servidor http). • Utilize listeners (emitindo e recebendo eventos). baby steps..
  8. • 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..
  9. 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!’);