HTML5 - Server-Sent Events
- Posted: May 08, 2012 at 12:02 PM
- 4,152 Views
- 7 Comments
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
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.
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
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.!
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 %>isto abre um mundo de possibildades!
Nada será impossível!
Muito interessante!
Muito show!
esses novos eventos vem pra mudar muita coisa!!!
Remove this comment
Remove this thread
close