Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

HTML5 - Server-Sent Events

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

 

Tags:

Follow the Discussion

  • Leandro AlencarLeandro 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.!

  • Carolina SilvaCarolina Silva

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

  • 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
    
    %>

     

  • augustowebdaugustowebd

    isto abre um mundo de possibildades!

  • AlexandreAlexandre

    Nada será impossível!

  • JonatasJonatas

    Muito interessante!

  • Thadeu EstevesThadeu Esteves

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

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.