Cómo usar eventos HTML5 Servidor-SENT

Lo primero que debe notar aquí es que llamamos al encabezamiento función en las líneas 2-3: esta es una función utilizada para enviar encabezados HTTP crudos. En este caso lo llamamos dos veces: el primero en las líneas 2 para configurar el Control de caché campo de encabezado y especificar las directivas de almacenamiento en caché (sin almacenamiento en caché de la página), el segundo en las líneas 3, para establecer el Tipo de contenido a Texto/transmisión de eventos. Esa configuración de encabezados es necesaria para que nuestro script funcione correctamente. También es importante notar que para funcionar correctamente, el encabezamiento La función siempre debe llamarse antes de crear cualquier otra salida.

Después de configurar los encabezados HTML, acabamos de usar el requerir una vez declaración en las líneas 6 para requerir el contenido del animales.php archivo, que contiene la matriz que escribimos antes. En un escenario de caso real, esto habría sido reemplazado por un Consulta SQL Para recuperar dicha información de una base de datos.

Finalmente en las líneas 9-11, enviamos nuestra respuesta al cliente: el codificado Matriz de "animales". Una cosa muy importante a tener en cuenta: el formato de eventos del lado del servidor requiere que cada respuesta enviada por el servidor sea prefijada por el datos: cuerda y seguido de dos personajes de Newline. En este caso usamos el \norte Newline personaje porque estamos ejecutando en una plataforma similar a UNIX; Para garantizar la compatibilidad multiplataforma, habríamos utilizado el Php_eol constante.

Incluso es posible romper el mensaje de respuesta en múltiples líneas: en este caso, cada línea, como se dijo anteriormente, debe comenzar con "datos:" y debe ser seguido por un solo carácter de nueva línea. La nueva línea adicional se requiere solo en la última línea.

El servidor también puede controlar con qué frecuencia el cliente debe intentar volver a conectarse (el valor predeterminado es 3 segundos), y el nombre del evento (predeterminado es "mensaje") enviado al cliente. Para personalizar el primero, debemos usar el rever Directiva seguida del intervalo de tiempo deseado, expresado en milisegundos. Por ejemplo, para configurar un intervalo de 1 segundo:

echo "Vuelve a intentarlo: 1000 \ n";

Observe que incluso aquí, se requiere una nueva línea. Para cambiar el nombre del evento, en cambio, debemos usar el evento directiva:

echo "Evento: customevent \ n";

El evento predeterminado es "mensaje": esto es importante porque el evento debe especificarse en el código JavaScript del cliente al agregar el oyente del evento, como veremos en un momento.

Después de enviar nuestra respuesta, llamamos al enjuagar Función: Esto es necesario para obtener los datos al cliente.

Código del lado del cliente

Lo primero que vamos a hacer el lado del cliente es preparar nuestro archivo HTML con la lista de animales disponibles:

Este es realmente un HTML básico con un poco de PHP para mostrar la lista de animales en el momento de la carga de la página e incluir nuestro .archivo js (script.js), pero servirá nuestro propósito. Ahora, veamos cómo podemos usar eventos del lado del servidor. Lo primero que tenemos que hacer es instanciar un Objeto de fuente de eventos. En nuestro archivo JavaScript, escriba:

Let Eventsource = New Eventsource ('Script.php '); 

Como puede ver, pasamos la ruta a nuestro script de servidor como argumento en el Eventsurce constructor de objetos. Este objeto abrirá una conexión al servidor. Ahora debemos agregar un oyente de eventos, para que podamos realizar algunas acciones cuando se recibe un mensaje del servidor:

Let Eventsource = New Eventsource ('Script.php '); eventsurce.addEventListener ("Mensaje", function (Event) Let data = json.parse (evento.datos); Let Listelements = documento.getElementsBytagName ("li"); para (deja i = 0; yo < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Cuando se recibe un mensaje, usamos el Json.analizar gramaticalmente método en la línea 4 para transformar los datos enviados por el servidor (una cadena, contenida en el datos Propiedad del objeto del evento), en una matriz de JavaScript.

Después de eso, en las líneas 7-11 a través de todos los elementos con el

eventsurce.cerca()