Aplicações Web 
Realtime
Gabriel Gularte 
@gabrielfgularte 
Web Developer at Mentis 
Diretor de Tecnologia (CTO) at EVIN
Mentis Dating 
contato@mentisdating.com 
mentisdating.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
amoremcristo.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
novasemocoes.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
flertou.com
EVIN 
contato@evin.net.br 
evin.net.br
EVIN 
contato@evin.net.br 
evin.net.br 
evin.net.br
Mas o que é 
Realtime?
Mas o que é 
Realtime? 
● Experiência inovadora
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação 
● Coisas reagem de forma instantânea
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação 
● Coisas reagem de forma instantânea 
● Sensação
Realtime é uma 
Sensação 
are depicted as occurring entirely within the 
span of, and at the same rate as the 
depiction. “ 
A narrative technique, whereby events 
Pedia, The 
Wiki
Aplicações 
Realtime
Aplicações 
Realtime 
Mobile
Aplicações 
Realtime 
Mobile 
Desktop
Aplicações 
Realtime 
Mobile 
Desktop 
SmartTVs
Aplicações 
Realtime 
Mobile 
Desktop 
SmartTVs 
Videogames
Aplicações 
Realtime 
Desktop 
Mobile 
Web 
SmartTVs 
Videogames
Aplicações 
Web Realtime 
Websockets, Polling e Long Polling
Web Realtime 
Websockets 
● HTML5 API
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos 
● Não oferece suporte a todos navegadores mobile
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos 
● Não oferece suporte a todos navegadores mobile 
Se você não precisa se preocupar com 
navegadores antigos, use a vontade.
Can I Use 
Websockets? 
caniuse.com/#feat=websockets
Showcase 
Websockets 
trello.com
Showcase 
Websockets 
zendesk.com.br
Frameworks 
Websockets 
socket.io
Frameworks 
Websockets 
ws4py.readthedocs.org
Frameworks 
Websockets 
socketo.me
Web Realtime 
Polling
Web Realtime 
Polling 
● Loop que consome dados periodicamente
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop 
● Funciona em todos os browsers
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop 
● Funciona em todos os browsers 
Péssima escolha para construir uma 
aplicação web realtime
Web Realtime 
Polling 
Client #1 Server 
Timeline 
Request #1 
Response #1 - No data 
Request #2 
Response #1 - New 
data! 
Client #2 
Request #1 - New data 
Response #1 - Ok
Web Realtime 
Long Polling
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum 
● Funciona em todos os browsers
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum 
● Funciona em todos os browsers 
A melhor forma de garantir que sua aplicação 
atenda o maior número de usuários
Web Realtime 
Long Polling 
Client #1 Server 
Timeline 
Request #1 
Client #2 
Request #1 - New data 
Blocking 
Response #1 - New Response #1 - Ok 
data!
Exemplos de Apps Realtime
Facebook 
Messenge 
r
Google 
Hangouts
Slack
Aplicações Web Realtime 
Resumo
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar?
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling 
● Falamos do Websockets como uma API nativa do HTML
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling 
● Falamos do Websockets como uma API nativa do HTML 
● A maior inteligência do realtime acontece no lado do server
Muito obrigado! 
https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45

Aplicações Web Realtime