DEV Community

loading...

SSE Server Sent Events Eventos enviados pelo servidor

Uriel dos Santos Souza
・4 min read

server sent events image

Eventos enviados pelo servidor?
Hoje basicamente tudo é envio de dados!
Mas envio de dados tem custos!

Seja por:

Polling(e tempos em tempos o navegador pergunta ao servidor se tem algo novo)

WebSocket o queridinho(é um long polling, o cliente se conecta ao servidor e uma conexão fica aberta entre ambos, as vezes o cliente pede alguma info ao servidor)

Tanto polling como websocket são bons e servem bem ao seus propósitos.

Polling, pedir informações de tempos em tempos custa banda e conexões do servidor. Se o número de clientes for pequeno, tudo bem!? E se o número for bizarramente grande? Se seu servidor não aguentar o número de conexões vai cair(senhor obvio).

Websocket é ótimo, para um chat, onde cliente sempre ou quase sempre fala com o servidor. Eu creio que seja perfeito para chats e aplicações onde a comunicação constante entre clientes e servidores seja constante. Ele economiza um pouco de banda, mas não conexões, embora seja uma conexão diferente da http(websocket é um padrão próprio) ele é full-duplex(parece algo tão legal, uma geladeira gigante rsrs)
https://pt.wikipedia.org/wiki/WebSocket

Mas se você não precisa de um chat! - Eu só quero atualizar um gráfico! Não quero ter que implementar um protocolo(websocket) só pra isso!

Vamos a uma explicação mais séria:

Ajax Polling:
Um cliente solicita uma página da Web a partir de um servidor usando HTTP regular.
O cliente recebe a página web solicitada e executa o JavaScript na página que solicita um arquivo do servidor em intervalos regulares (por exemplo, 0,5 segundos).
O servidor calcula cada resposta e o envia de volta, assim como o tráfego HTTP normal.

Ajax Long-Polling:
Um cliente solicita uma página da Web a partir de um servidor usando HTTP regular.
O cliente recebe a página web solicitada e executa o JavaScript na página que solicita um arquivo do servidor.
O servidor não responde imediatamente com as informações solicitadas, mas aguarda até que haja novas informações disponíveis.
Quando há novas informações disponíveis, o servidor responde com as novas informações.
O cliente recebe as novas informações e imediatamente envia outra solicitação para o servidor, reiniciando o processo.

Eventos enviados pelo servidor HTML5 (SSE) / EventSource:
Um cliente solicita uma página da Web a partir de um servidor usando HTTP regular.
O cliente recebe a página web solicitada e executa o JavaScript na página que abre uma conexão com o servidor.
O servidor envia um evento ao cliente quando há novas informações disponíveis.

Você quer usar um servidor que tenha um loop de events
Não é possível conectar-se a um servidor de outro domínio

Websockets HTML5:
Um cliente solicita uma página da Web de um servidor usando http regular (veja HTTP acima).
O cliente recebe a página web solicitada e executa o JavaScript na página que abre uma conexão com o servidor.
O servidor e o cliente agora podem enviar-se mutuamente mensagens quando novos dados (de cada lado) estão disponíveis.

Tráfego em tempo real do servidor para o cliente e do cliente para o servidor
Você quer usar um servidor que tenha um loop de events
Com o WebSockets é possível conectar-se a um servidor de outro domínio.
Também é possível usar um servidor de websocket hospedado de terceiros, por exemplo, Pusher ou outros . Desta forma, você só terá que implementar o lado do cliente, o que é muito fácil!

Vamos usar o SSE!

SSE eventos enviados pelo servidor!
Ele é unidirecional

O LinkedIn usa SSE para seu serviço de mensagens, o Mapbox usa SSE para exibir dados de mapa ao vivo.
Da pra fazer CHAT em tempo real com SSE.

  • Mas parece bom demais para ser verdade, como implementar isso?

Irei utilizar um exemplo do meu tutorial que esta no youtube.
Nele, que fiz antes de escrever(e sem pensar em escrever sobre isso) eu falo um pouco mais sobre, mas vou deixar uns trechos de código aqui:

OBS: isso é um tutorial simples. SSE é mais que isso, este tutorial serve para te iniciar sobre o assunto SSE. Mas para começar este funciona!

Utilizando express e nodejs é bastante simples!
Mas primeiro temos que saber, todos os navegadores aceitam!
Você vai precisar da API eventSource fornecida pelos navegadores, implementar ela é complicadíssimo, veja o código abaixo:

//https://developer.mozilla.org/pt-BR/docs/Web/API/EventSource

const source = new EventSource('/eventos');
//colocamos em source a instancia eventSouce
//('/eventos') é a URL do meu servidor express que aceita as conexões 

source.addEventListener('message', message => {
//neste caso estou adicionando um evento, assim que
// chegar uma mensagem pela API eventSource, print no console //tudo
console.log('Serve sent', message);


document.querySelector(".content").innerHTML = message.data;
//aqui é simples, só estou mostrando na tela uma parte do que veio na mensagem do servidor! 

})
Enter fullscreen mode Exit fullscreen mode

Complicadíssimo como eu disse!

Agora no servidor express:

app.get('/eventos', (req, res) => {

  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Access-Control-Allow-Origin': '*',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',

  });



res.write('retry: 10000\n\n');

  //https://docs.mongodb.com/manual/changeStreams
  //usando o mongo que emite uma mudança na coleção

user.SenhaUSer.watch().on('change', (mudanca)=>{


  const {operationType} = mudanca; 


 res.write(`data:${operationType}\n\n`)
//server events só funciona com texto

 res.flushHeaders()

});
})
Enter fullscreen mode Exit fullscreen mode

O que tudo isso faz? Quando um usuário se cadastra no site, o mongo lança um evento, e o express passa pra gente e o vemos no navegador! Um exemplo simples.

Para entender melhor o app completo esta aqui > https://github.com/Uriel29/ServerSentEvents

Aqui o vídeo e mais um pouco de explicações:

Para se aprofundar:
https://dev.to/4shub/building-with-server-sent-events-13j
https://medium.com/conectric-networks/a-look-at-server-sent-events-54a77f8d6ff7
https://ably.com/topic/server-sent-events
https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app
https://moinism.medium.com/using-nodejs-for-uni-directional-event-streaming-sse-c80538e6e82e
https://developer.mozilla.org/pt-BR/docs/Web/API/Server-sent_events/Using_server-sent_events
https://www.ibm.com/docs/pt-br/was-liberty/base?topic=liberty-starting-server-sent-events

Espero que isso te ajude! Abraços

Discussion (1)

Collapse
alvescaio profile image
Caio Alves

Muito bom. Ótima leitura.