Blog Post

HTML5 - Server-Sent Events

Sign in to queue

Description

Generic Episode Image

SERVER-SENT EVENTS

EventSource

A Server-Sent Events API é uma maneira de inverter o fluxo das aplicações Ajax, fazendo com que o servidor possa disparar o envio de dados ao agente de usuário. Para isso, cria-se, no agente de usuário, um objeto EventSource:

es=new EventSource('comm.php')

Isso vai abrir uma conexão HTTP para "comm.php" e mantê-la escutando. Cada vez que o servidor enviar eventos para esse cliente, será disparado o evento message do objeto EventSource. Veja um exemplo:

es.onmessage=function(e){ alert("Chegaram dados: "+e.data) }

Isso pode ser usado, por exemplo, para implementar uma interface de chat ou um monitor de status de alguma operação demorada ocorrendo no servidor.

O protocolo de comunicação

Em nosso exemplo acima, a página comm.php envia eventos para o agente de usuário. Você não precisa se preocupar em saber como isso funciona do lado do cliente, uma vez que o agente de usuário faz todo o trabalho. Mas é importante que saiba como isso deve funcionar do lado do servidor. A URL de comunicação deve devolver ao cliente um header Content-type: text/event-stream. Em seguida, envia as mensagens, que são blocos de texto separados um do outro por uma linha em branco:

data: mensagem 1

data: a mensagem 2 tem

data: mais de uma linha

data: mensagem 3

O prefixo data: indica que o que segue são os dados da mensagem. Você também pode usar o prefixo id:

data: mensagem 1

id: 1

data: a mensagem 2 tem

data: mais de uma linha

id: 2

data: mensagem 3

 id: 3

Se você enviar prefixos id em suas mensagens e o agente de usuário perder a conexão, ao tentar reconectar ele vai enviar o valor do último id no header HTTP Last-Event-ID. Com isso você pode, por exemplo, enviar as mensagens do chat do ponto em que parou.

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

 

The Discussion

  • User profile image
    Leandro Alencar

    Excelente!

    Muito bom saber destes detalhas. Mas, tenho uma pergunta:
    Como ficaria este cenário trabalhando com uma página .aspx !?

    Abraços, Até mais.!

  • User profile image
    Carolina Silva

    Gostei. Mas também trabalho com asp.net e fiquei em dúvida de como utilizar.

  • User profile image
    alexafunder​ground

    Pessoal,

    abaixo meu código de exemplo

    Página HTML:

    <!DOCTYPE html>
    
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Server-sent Events</title>
        </head>
        
        <body>
            <p>
                <button id="btnStart" onclick="startSSE();">Start Server-sent Event</button>
                <br>
                <button id="btnCancel" onclick="closeSSE();">Cancel Server-sent Event</button>
            </p>
    
            <script type="text/javascript">
                var es = null;
    
                function startSSE() {
                    document.body.innerHTML += 'Start<br>';
                    es = new EventSource('Page.asp');
                    es.onmessage = handleSSE;
                }
    
                function handleSSE(e) {
                    document.body.innerHTML += e.data + '<br>';
                }
    
                function closeSSE() {
                    es.close();
                    document.body.innerHTML += 'Close<br>';
                }
            </script>
    
        </body>
    
    </html>
    

    Página ASP - "Page.asp":

    <%@ Language="VBScript" %>
    
    <%
    
        Response.ContentType = "text/event-stream"
        Response.Expires = 0
        Response.Expiresabsolute = Now() - 1 
        Response.AddHeader "pragma","no-cache" 
        Response.AddHeader "cache-control","private" 
        Response.CacheControl = "no-cache" 
        
        Response.Write "id: " & Now() & vbCrLf
        Response.Write "data: " & Now() & vbCrLf
    
    %>

     

  • User profile image
    augustowebd

    isto abre um mundo de possibildades!

  • User profile image
    Alexandre

    Nada será impossível!

  • User profile image
    Jonatas

    Muito interessante!

  • User profile image
    Thadeu Esteves

    Muito show!
    esses novos eventos vem pra mudar muita coisa!!!

Add Your 2 Cents