Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

API HTML SSE


Gli eventi inviati dal server (SSE) consentono a una pagina Web di ricevere aggiornamenti da un server.


Eventi inviati dal server - Messaggistica unidirezionale

Un evento inviato dal server è quando una pagina Web riceve automaticamente gli aggiornamenti da un server.

Questo era possibile anche prima, ma la pagina web avrebbe dovuto chiedere se fossero disponibili aggiornamenti. Con gli eventi inviati dal server, gli aggiornamenti vengono automaticamente.

Esempi: aggiornamenti su Facebook/Twitter, aggiornamenti sui prezzi delle azioni, feed di notizie, risultati sportivi, ecc.


Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente gli eventi inviati dal server.

API
SSE 6.0 79.0 6.0 5.0 11.5

Ricevi notifiche di eventi inviate dal server

L'oggetto EventSource viene utilizzato per ricevere notifiche di eventi inviate dal server:

Esempio

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

Esempio spiegato:

  • Crea un nuovo oggetto EventSource e specifica l'URL della pagina che invia gli aggiornamenti (in questo esempio "demo_sse.php")
  • Ogni volta che viene ricevuto un aggiornamento, si verifica l'evento onmessage
  • Quando si verifica un evento onmessage, inserisci i dati ricevuti nell'elemento con id="result"

Controlla il supporto per gli eventi inviati dal server

Nell'esempio tryit sopra c'erano alcune righe di codice extra per controllare il supporto del browser per gli eventi inviati dal server:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}


Esempio di codice lato server

Affinché l'esempio sopra funzioni, è necessario un server in grado di inviare aggiornamenti dei dati (come PHP o ASP).

La sintassi del flusso di eventi lato server è semplice. Imposta l'intestazione "Content-Type" su "text/event-stream". Ora puoi iniziare a inviare stream di eventi.

Codice in 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();
?>

Codice in ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Codice spiegato:

  • Imposta l'intestazione "Tipo di contenuto" su "flusso di testo/evento"
  • Specifica che la pagina non deve essere memorizzata nella cache
  • Emetti i dati da inviare ( inizia sempre con "data:")
  • Risciacquare i dati di output nella pagina Web

L'oggetto EventSource

Negli esempi precedenti abbiamo utilizzato l'evento onmessage per ricevere i messaggi. Ma sono disponibili anche altri eventi:

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs