<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

Eventos de servidor HTML – API SSE

O tópico em questão é HTML serversentevents . As páginas da Web podem receber atualizações do servidor por meio de eventos enviados pelo servidor (SSE).



Eventos enviados pelo servidor – Mensagens unidirecionais:

Os eventos enviados pelo servidor Html ocorrem quando uma atualização automática de um servidor é enviada para uma página da web.

Isso também era possível no passado; no entanto, a página da web teria que verificar se alguma versão mais recente está disponível. Ao usar eventos enviados pelo servidor, as atualizações aparecem por conta própria sem qualquer intervenção.

Exemplos da vida diária :

Atualizações no Instagram, Facebook e Twitter , atualizações de preços de ações, feeds de notícias, placares esportivos e assim por diante.


Compatibilidade do navegador :

A primeira versão do navegador para lidar totalmente com eventos enviados pelo servidor é mostrada pelos números na tabela.

API
SSE 6.0 79,0 6.0 5,0 11.5

Obtenha notificações de eventos enviadas pelo servidor:

Em Html serversentevents , o objeto EventSource recebe notificações de eventos enviadas pelo servidor:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h1>Getting server updates</h1><br><div id="result"></div><br><br><script><br>if(typeof(EventSource) !== "undefined") {<br> var source = new EventSource("demo_sse.php");<br> source.onmessage = function(event) {<br> document.getElementById("result").innerHTML += event.data + "<br>";<br> };<br>} else {<br> document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events…";<br>}<br></script><br><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Explicação do exemplo:

  1. Crie um novo objeto EventSource e indique a URL da página que está fornecendo as atualizações (neste caso, “demo-sse.php”)
  2. Cada vez que uma atualização é recebida, o evento onmessage ocorre
  3. Assim que um evento onmessage é disparado, os dados obtidos devem ser colocados no elemento com o id “resultado”.

Verificação de suporte a eventos enviados pelo servidor

Algumas linhas de código foram adicionadas ao exemplo abaixo para garantir que o navegador aceite eventos enviados pelo servidor quando se trata de Html serversentevents :

if(typeof(EventSource) !== “undefined”) {
// Certainly! The event sends from servers are permitted!
// Some code…..
}
else {
// We’re sorry! It does not support server-sent events…
}<!–

Advertisement

–><!–

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

–>


Código de exemplo do lado do servidor

Quando falamos de eventos de servidores Html, é necessário ter um servidor capaz de transmitir atualizações de dados (como PHP ou ASP) para que o exemplo anterior funcione.

Um formato fácil é usado no lado do servidor para fluxos de eventos. Altere o cabeçalho “Tipo de conteúdo” para “texto/fluxo de eventos”. A transmissão de fluxos de eventos é tornada acessível.

Código PHP (demo-sse.php):

<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);$time = date(‘r’);
echo “data: The server time is: {$time}”;
flush();
?>
Code in ASP (VB) (demo-sse.asp):
<%
Response.ContentType = “text/event-stream”
Response.Expires = -1
Response.Write(“data: The server time is: ” & now())
Response.Flush()
%>

Explicação do código:

  1. Substitua o cabeçalho “Content-Type” por “text/event-stream”
  2. Verifique se a página não está em cache
  3. Coloque os dados a serem transmitidos ( certifique-se de começar com "dados:")
  4. Envie os dados finais de volta para a página da web

Objeto EventSource:

As mensagens foram recebidas por meio do evento onmessage nos exemplos anteriores . No entanto, existem outros eventos oferecidos também:

Eventos Visão geral
na mensagem Ao receber uma mensagem.
ao abrir No momento em que uma conexão é feita com o servidor.
um erro Em caso de erro.

API HTML Server-Sent Events (SSE): Benefícios e limitações

Aqui estão os benefícios e limitações do uso da API HTML Server-Sent Events (SSE):

Benefícios:

  • Atualizações em tempo real: a API SSE permite que o servidor envie atualizações em tempo real para o cliente sem a necessidade de o cliente solicitar dados repetidamente.
  • Eficiência: o SSE é mais eficiente do que as técnicas tradicionais de polling ou long-polling, pois reduz o número de solicitações feitas ao servidor.
  • Leve: as mensagens SSE são leves e podem ser enviadas em formato de texto simples, reduzindo a carga do servidor e o tráfego de rede.
  • Fácil de usar: a API SSE é fácil de usar e requer configuração mínima tanto no cliente quanto no servidor.
  • Compatibilidade: a API SSE é suportada pela maioria dos navegadores modernos e pode ser usada com tecnologias existentes da web, como HTML, CSS e JavaScript.

Limitações:

  • Suporte limitado ao navegador: a API SSE não é suportada por alguns navegadores mais antigos, como o Internet Explorer 11 e versões mais antigas do Safari.
  • Comunicação unidirecional: a API SSE permite apenas a comunicação servidor-cliente, e não o contrário.
  • Compatibilidade do servidor: a API SSE requer suporte do lado do servidor, que pode não estar disponível em algumas plataformas ou servidores de hospedagem na web.
  • Limites de conexão: as conexões SSE podem estar sujeitas a limites impostos pelo servidor, o que pode afetar o número de clientes que podem ser conectados simultaneamente.
  • Segurança: as mensagens SSE são enviadas por HTTP, que não é um protocolo seguro. Para garantir a segurança, HTTPS deve ser usado, o que requer instalação e configuração adicionais.
Subscreva a nossa Newsletter abaixo, de forma a ficar a par das informações técnicas deste site.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone