English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Eventos enviados por el servidor (server-El evento enviado (sent event) permite que la página web obtenga los datos más recientes del servidor sin recargar la página, obteniendo datos más recientes de manera dinámica.
Server-Los eventos enviados (sent event) permiten que la página web obtenga los datos más recientes del servidor sin recargar la página, obteniendo datos más recientes de manera dinámica.
Los métodos tradicionales de obtención de los datos más recientes del servidor, mediante actualizaciones o mediante temporizadores para activar, para obtener los datos más recientes. Ahora, a través de eventos enviados por el servidor Server-Al enviar eventos, se puede lograr la obtención automática de los datos más recientes.
Ejemplo: Facebook/Actualizaciones de Twitter, cotizaciones bursátiles, microblogs, resultados de eventos deportivos, mensajes dinámicos, comentarios, etc.
Todos los navegadores principales admiten eventos enviados por el servidor, excepto Internet Explorer.
El objeto EventSource se utiliza para recibir notificaciones de eventos enviados por el servidor:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础教程网(oldtoolbag.com)</title>
</head>
<body>
<h1>Obtener los datos más recientes del servidor</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo-sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="Disculpa, tu navegador no admite server-sent eventos...";
}
</script>
</body>
</html>Prueba aquí ‹/›Análisis del ejemplo:
Crear un nuevo objeto EventSource, luego especificar la URL de la página que envía las actualizaciones (en este ejemplo, "demo_sse.php")
Se produce el evento onmessage cada vez que se recibe una actualización
Cuando ocurre el evento onmessage, se empuja los datos recibidos al elemento con id "result"
En el siguiente ejemplo, escribimos un código adicional para detectar la compatibilidad del navegador con los eventos de envío del servidor:
if(typeof(EventSource)!=="undefined")
{
// El navegador admite Server-Enviado
// Algunos códigos.....
}
else
{
// El navegador no admite Server-Enviado..
}Para que el ejemplo anterior pueda ejecutarse, también necesitas un servidor que pueda enviar actualizaciones de datos (por ejemplo, PHP y ASP).
La sintaxis de los eventos de flujo en el servidor es muy simple. "Content-Type" encabezado configurado como "text/event-stream". Ahora, puedes comenzar a enviar eventos de flujo.
<?php
header(&39;Content-Type: text/event-stream&39;);
header(&39;Cache-Control: no-cache&39;);
$time = date(&39;r&39;);
echo "data: The server current time: {$time}\n\n";
flush();
?>Código ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>Explicación del código:
Establecer la cabecera "Content-Type" configurado como "text/event-stream"
No almacenar la página
Enviar fecha de envío (siempre comienza con "data: ")
Enviar datos de actualización de página web
En el ejemplo anterior, utilizamos el evento onmessage para obtener mensajes. Sin embargo, también se pueden usar otros eventos:
| Evento | Descripción |
| onopen | Cuando se abre la conexión hacia el servidor |
| onmessage | Cuando se recibe un mensaje |
| onerror | Cuando ocurre un error |