¿Estás buscando una manera de mejorar la interactividad de tu sitio web? Los eventos enviados por el servidor HTML5 podrían ser la solución que estás buscando. Con estos eventos, podrás enviar información en tiempo real a tus usuarios, lo que les permitirá interactuar con tu sitio web de una manera más dinámica. En este artículo de TIEngranaje, te explicamos todo lo que necesitas saber sobre los eventos enviados por el servidor en HTML5 y cómo podrían mejorar la experiencia de usuario en tu sitio web. ¡Sigue leyendo para descubrirlo!
Para la mayoría de los desarrolladores web, la comunicación con un servidor web depende de que el navegador del cliente inicie un HTTP. pedido. Con este modelo, el cliente envía la solicitud HTTP y espera hasta que el Respuesta HTTP Esta recibido.
El servidor no puede iniciar comunicación con el cliente a menos que se solicite. Esto dificulta el desarrollo de aplicaciones web que se comporten como clientes de escritorio tradicionales.
Por ejemplo, desarrollar una aplicación web para monitorear un estado en tiempo real es muy desafiante. HTML5 está diseñado con un componente conocido como Eventos enviados por el servidor. HTML 5 define una interfaz de programación de aplicaciones (API) para abrir una conexión HTTP para recibir notificaciones automáticas del servidor web.
Usando Eventos enviados por el servidoruna página web obtiene automáticamente actualizaciones de un servidor sin que el cliente tenga que solicitar la información.
Compatibilidad con navegador
Los eventos enviados por el servidor son compatible con todos los principales navegadores, como Firefox, Chrome, Safari y Opera. Los eventos enviados por el servidor son No soportado por Internet Explorer.
API de JavaScript del lado del cliente
Eventos enviados por el servidor se envían a través del protocolo HTTP. No se requieren protocolos o puertos especiales para que esto funcione. Sin embargo, necesitamos la ayuda de secuencias de comandos del lado del cliente y del lado del servidor para que el navegador del cliente pueda interactuar con el servidor web.
A suscribir a un flujo de eventos, cree un EventSource objeto y pásele la URL de su transmisión. También debe considerar verificar para asegurarse de que el navegador sea compatible con los eventos enviados por el servidor.
<script>
if (typeof (EventSource) !== "undefined") {
var source = new EventSource('html5sse.php');
source.onmessage = function (e) {
document.getElementById("sseResult").innerHTML += e.data + '<br />';
};
} else {
document.getElementById("sseResult").innerHTML = "Your browser does not support Server Sent Events.";
}
<script>El script primero comprueba si el el navegador es compatible Eventos enviados por el servidor. si no, se proporciona retroalimentación al usuario en su lugar. Si el navegador admite la función, comenzarán los eventos enviados por el servidor.
El script crea un objeto de la EventSource class, pasándole la URL del script del lado del servidor que proporcionará las actualizaciones de datos transmitidos. Luego, el script configura un función de escucha de eventos para ejecutar cuando el EventSource objeto recibe una actualización del servidor.
Cuando esto pasa, el script simplemente obtiene una referencia al elemento de la página de actualización y escribe los nuevos datos en él. En este ejemplo, solo usamos el onmessage evento. Sin embargo, hay otros eventos que puede utilizar.
| Evento | Descripción |
|---|---|
onerror |
Este evento se activa cuando se produce un error. |
onmessage |
Este evento se activa cuando se recibe un mensaje del servidor web |
onopen |
Este evento se activa cuando se abre una conexión con el servidor. |
Scripts del lado del servidor
En el lado del servidor, deberá tener el servidor web capaz de enviar actualizaciones de datos. Esto es imposible solo con código HTML. Deberá incorporar un lenguaje de secuencias de comandos del lado del servidor, como ASP.NET, ASP clásico o PHP.
La sintaxis del flujo de eventos que proviene del servidor web es bastante simple. Debe tener en cuenta que tendrá que configurar el Content-Type encabezado a text/event-stream. En el siguiente PHP ejemplo, transmita de vuelta al cliente web, la hora configurada en el servidor.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
function sendMsg($id, $msg) {
echo "id: $id" . PHP_EOL;
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>
Conclusión
En este tutorial, hemos cubierto los conceptos básicos del uso Eventos enviados por el servidor con HTML5, JavaScript y PHP.
En nuestro ejemplo, usamos nuestro secuencia de comandos del lado del servidor para generar la hora en el servidor web. Por supuesto, aunque no es muy útil, le brinda un punto de partida que puede incorporar a sus propios proyectos.
