{"id":294,"date":"2024-05-21T10:25:50","date_gmt":"2024-05-21T08:25:50","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=294"},"modified":"2024-05-21T10:25:50","modified_gmt":"2024-05-21T08:25:50","slug":"69-api-html-sse","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/69-api-html-sse\/","title":{"rendered":"69. API HTML SSE"},"content":{"rendered":"\n

Server-Sent Events<\/strong> (SSE<\/strong>) permite que una p\u00e1gina web obtenga actualizaciones de un servidor.<\/p>\n\n\n\n

Server-Sent Events (SSE)<\/h2>\n\n\n\n

Un evento enviado por el servidor es cuando una p\u00e1gina web recibe autom\u00e1ticamente actualizaciones de un servidor. Esto tambi\u00e9n era posible antes, pero la p\u00e1gina web tendr\u00eda que preguntar si hab\u00eda actualizaciones disponibles. Con los eventos enviados por el servidor, las actualizaciones llegan autom\u00e1ticamente.<\/p>\n\n\n\n

Ejemplos: actualizaciones de Facebook\/Twitter, actualizaciones de precios de acciones, fuentes de noticias, resultados deportivos, etc.<\/p>\n\n\n\n

Notificaciones recibidas<\/h2>\n\n\n\n

El objeto EventSource<\/em> <\/strong>se utiliza para recibir notificaciones de eventos enviadas por el servidor.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<body>\n\n<h1>Getting server updates<\/h1>\n<div id=\"result\"><\/div>\n\n<script>\nif(typeof(EventSource) !== \"undefined\") {\nvar source = new EventSource(\"demo_sse.php\");\nsource.onmessage = function(event) {\ndocument.getElementById(\"result\").innerHTML += event.data + \"<br>\";\n};\n} else {\ndocument.getElementById(\"result\").innerHTML =\n \"Sorry, your browser does not support server-sent events...\";\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Ejemplo explicado<\/h2>\n\n\n\n
    \n
  • Crea un nuevo objeto EventSource<\/em> <\/strong>y especifica la URL de la p\u00e1gina que env\u00eda las actualizaciones (en este ejemplo, \u00abdemo_sse.php<\/em>\u00ab)<\/li>\n\n\n\n
  • Cada vez que se recibes una actualizaci\u00f3n, se produce el evento onmessage<\/em><\/strong><\/li>\n\n\n\n
  • Cuando ocurre un evento onmessage<\/em><\/strong>, coloca los datos recibidos en el elemento con id=\u00bbresult\u00bb<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
    En el ejemplo de prueba anterior, hab\u00eda algunas l\u00edneas adicionales de c\u00f3digo para comprobar la compatibilidad del navegador con los eventos enviados por el servidor.<\/p>\n\n\n\n
    if(typeof(EventSource) !== \"undefined\") {\n  \/\/ Yes! Server-sent events support!\n  \/\/ Some code.....<\/em>\n} else {\n  \/\/ Sorry! No server-sent events support..\n}<\/pre>\n\n\n\n
    Para que el ejemplo anterior funcione, necesitas un servidor capaz de enviar actualizaciones de datos (como PHP<\/strong> o ASP<\/strong>).<\/p>\n\n\n\n
    La sintaxis del flujo de eventos del lado del servidor es simple. Establezca el encabezado \u00abContent-gype\u00bb en \u00abtext\/event-stream\u00bb. Ahora puedes comenzar a enviar flujos de eventos.<\/p>\n\n\n\n
    C\u00f3digo en PHP (demo_sse.php).<\/p>\n\n\n\n
    C\u00f3digo para PHP (demo_sse.php):<\/strong><\/p>\n\n\n\n
    <?php\nheader('Content-Type: text\/event-stream');\nheader('Cache-Control: no-cache');\n\n$time = date('r');\necho \"data: The server time is: {$time}\\n\\n\";\nflush();\n?><\/pre>\n\n\n\n
    C\u00f3digo para ASP (demo_sse.asp):<\/strong><\/p>\n\n\n\n
    <%\nResponse.ContentType = \"text\/event-stream\"\nResponse.Expires = -1\nResponse.Write(\"data: The server time is: \" & now())\nResponse.Flush()\n%><\/pre>\n\n\n\n
    C\u00f3digo explicado<\/strong><\/p>\n\n\n\n
      \n
    • Establece el encabezado \u00abContent-type\u00bb en \u00abtext\/event-stream\u00bb<\/li>\n\n\n\n
    • Especifica que la p\u00e1gina no debe almacenarse en cach\u00e9<\/li>\n\n\n\n
    • Salida de los datos para enviar (siempre comienza con \u00abdata:\u00bb)<\/li>\n\n\n\n
    • Vac\u00eda los datos de salida de nuevo a la p\u00e1gina web<\/li>\n<\/ul>\n\n\n\n
      El objeto EventSource<\/h2>\n\n\n\n
      En los ejemplos anteriores, usamos el evento onmessage<\/em> <\/strong>para obtener mensajes. Pero otros eventos tambi\u00e9n est\u00e1n disponibles:<\/p>\n\n\n\n
      Eventos<\/th>Descripci\u00f3n<\/th><\/tr>
      onopen<\/em><\/strong><\/td>Cuando una conexi\u00f3n al servidor es abierta<\/td><\/tr>
      onmessage<\/em><\/strong><\/td>Cuando un mensaje es recibido<\/td><\/tr>
      onerror<\/em><\/strong><\/td>Cuando ocurre un error<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
      Server-Sent Events (SSE) permite que una p\u00e1gina web obtenga actualizaciones de un servidor. Server-Sent Events (SSE) Un evento enviado por […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":68,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Server-Sent Events (SSE) permite que una p\u00e1gina web obtenga actualizaciones de un servidor. Server-Sent Events (SSE) Un evento enviado por […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/294\/revisions\/296"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}