Ultimele tutoriale de dezvoltare web

HTML Evenimente trimise de server


Trimis-Server Evenimente permit o pagină web pentru a obține actualizări de la un server.


Trimis-Server Evenimente - One Way Messaging

Un eveniment a trimis-server este atunci când o pagină web devine în mod automat actualizări de la un server.

Acest lucru a fost, de asemenea, posibil, înainte, dar pagina de web ar trebui să întreb dacă există actualizări disponibile. Cu evenimente trimise de server, actualizările vin automat.

Exemple: Facebook/Twitter actualizări, actualizări de preț stoc, fluxuri de știri, rezultate sportive, etc.


Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă complet evenimentele trimise de server.

API-ul
SSE 6 Nu sunt acceptate 6 5 11.5

Primi notificări de evenimente trimise de server

EventSource obiectul este utilizat pentru a primi notificări de evenimente trimise de server:

Exemplu

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
Încearcă - l singur »

Exemplu explicat:

  • Crearea unui nou EventSource obiect, și specificați adresa URL a paginii trimiterea actualizări (in this example "demo_sse.php")
  • De fiecare dată când se primește o actualizare, onmessage are loc evenimentul
  • Atunci când un onmessage are loc evenimentul, a pus datele primite în elementul cu id="result"

Verificați-Server Sent Evenimente Suport

În tryit exemplul de mai sus au existat unele linii suplimentare de cod pentru a verifica sprijin browser - ul pentru evenimente trimise de server:

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Server-side Cod Exemplu

Pentru exemplul de mai sus pentru a lucra, aveți nevoie de un server capabil de a trimite actualizări de date (cum ar fi PHP sau ASP).

Sintaxa flux eveniment server-side este simplu. Setați "Content-Type" antet pentru a "text/event-stream" . Acum puteți începe să trimiteți fluxurile de evenimente.

Codul în 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();
?>

Cod în ASP (VB) (demo_sse.asp) :

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

Cod explicat:

  • Setați "Content-Type" antet pentru a "text/event-stream"
  • Se specifică faptul că pagina nu ar trebui să cache
  • Datele de ieșire pentru a trimite ( Always start with "data: ")
  • Flush datele de ieșire înapoi la pagina de web

EventSource Obiectul

În exemplele de mai sus, am folosit evenimentul onmessage pentru a primi mesaje. Dar alte evenimente sunt de asemenea disponibile:

Evenimente Descriere
onopen Atunci când se deschide o conexiune la server
onmessage Atunci când un mesaj este primit
onerror Atunci când apare o eroare