AdNow
loading...
Eventos enviados por el servidor HTML5
- Obtener vínculo
- X
- Correo electrónico
- Otras apps
Eventos enviados por el servidorHTML5
Los eventos enviados por el servidor permiten que una página web obtenga actualizaciones de un servidor.
Eventos enviados por el servidor - Mensajería unidireccional
Un evento enviado por el servidor es cuando una página web recibe actualizaciones automáticamente de un servidor.
Esto también fue posible antes, pero la página web debería preguntar si había actualizaciones disponibles. Con los eventos enviados por el servidor, las actualizaciones vienen automáticamente.
Ejemplos: actualizaciones de Facebook / Twitter, actualizaciones de precios de acciones, noticias, deportes, etc.
Soporte del navegador
Los números en la tabla especifican la primera versión del navegador que admite completamente los eventos enviados por el servidor.
API | |||||
---|---|---|---|---|---|
SSE | 6.0 | Not supported | 6.0 | 5.0 | 11.5 |
Recibir notificaciones de eventos enviados por el servidor
El objeto EventSource se usa para recibir notificaciones de eventos enviados por el servidor:
Ejemplo
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Pruebelo usted mismo »
Ejemplo explicado:
- Cree un nuevo objeto EventSource y especifique la URL de la página que envía las actualizaciones (en este ejemplo, "demo_sse.php")
- Cada vez que se recibe una actualización, se produce el evento onmessage
- Cuando se produce un evento onmessage, coloque los datos recibidos en el elemento con id = "result"
Comprobar soporte de eventos enviados por el servidor
En el ejemplo de tryit anterior, había algunas líneas adicionales de código para verificar el soporte del navegador para los eventos enviados por el servidor:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support! // Some code.....} else {
// Sorry! No server-sent events support..}
Ejemplo de código del lado del servidor
Para que el ejemplo anterior funcione, necesita un servidor capaz de enviar actualizaciones de datos (como PHP o ASP).
La sintaxis de la secuencia de eventos del lado del servidor es simple. Establezca el encabezado "Content-Type" en "text / event-stream". Ahora puede comenzar a enviar secuencias de eventos.
Código en PHP (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Código en ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Código explicado:
- Establezca el encabezado "Content-Type" en "text / event-stream"
- Especifique que la página no debe almacenar en caché
- Salida de los datos a enviar ( Siempre comience con "datos:")
- Vacíe los datos de salida de vuelta a la página web
El objeto EventSource
En los ejemplos anteriores, utilizamos el evento onmessage para obtener mensajes. Pero otros eventos también están disponibles:
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |
- Obtener vínculo
- X
- Correo electrónico
- Otras apps
Formulario de contacto
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...