HTML సర్వర్-సెండ్ ఇవెంట్స్

Server-Sent ఇవెంట్స్ వెబ్సైట్ను సర్వర్ నుండి అప్డేట్స్ పొందేందుకు అనుమతిస్తుంది.

Server-Sent ఇవెంట్స్ - ఒక మార్గం మాత్రమే సందేశాలు పంపడం

Server-Sent ఇవెంట్స్ అనేది వెబ్సైట్ స్వయంచాలకంగా సర్వర్ నుండి అప్డేట్స్ పొందే విధం.

ఈ విధంగా క్రితం కూడా ఇదే విధంగా చేయవచ్చు, కానీ వెబ్సైట్కు అప్డేట్స్ అందుకునేందుకు ముందు మీరు అప్డేట్స్ అందుకునేందుకు అడగవలసి ఉండేది. Server-Sent ఇవెంట్స్ ద్వారా, అప్డేట్స్ స్వయంచాలకంగా అందుతాయి.

ఉదాహరణకు: Facebook/Twitter అప్డేట్స్, స్టాక్ ప్రైస్ అప్డేట్స్, కొత్త బ్లాగులు, ప్రత్యయం ఫలితాలు మొదలైనవి.

బ్రౌజర్ మద్దతు

పట్టికలో విద్యుత్తులు పూర్తిగా server-sent ఇవెంట్స్ మద్దతు కలిగిన మొదటి బ్రౌజర్ను సూచిస్తాయి.

API
SSE 6.0 మద్దతు లేదు 6.0 5.0 11.5

సర్వర్-సెండ్ ఇవెంట్స్ నోటిఫికేషన్స్ అందుకోవడం

EventSource ఆబ్జెక్ట్ సర్వర్ సెండ్ ఇవెంట్స్ నోటిఫికేషన్స్ అందుకునేది:

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ:

  • కొత్త EventSource ఆబ్జెక్ట్ సృష్టించండి, ఆపై అప్డేట్స్ పంపే పేజీ యూరిస్ నిర్వచించండి (ఈ ఉదాహరణలో "demo_sse.php")
  • అప్డేట్స్ అందుకున్నప్పుడు ప్రతిసారి onmessage ఇవెంట్ జరుగుతుంది
  • onmessage ఇవెంట్ జరగించినప్పుడు, అందుకున్న డేటాను "result" ఐడి వాల్యూమ్లో పుంజుకుపెట్టుము

సర్వర్-సెండ్ ఇవెంట్స్ మద్దతు పరిశీలన

TIY ఉదాహరణలో, మేము సర్వర్ సెండ్ ఇవెంట్స్ బ్రౌజర్ మద్దతుని పరిశీలించడానికి అదనపు కోడ్ని రాయాము:

if(typeof(EventSource) !== "undefined") {
    // అవును! సర్వర్ సెండ్ ఇవెంట్స్ నిర్వహించబడింది!
    // కొన్ని కోడ్లు.....
}
    // క్షమించండి! సర్వర్ సెండ్ ఇవెంట్స్ నిర్వహించబడలేదు!
}

సర్వర్ సైడ్ కోడ్ ఉదాహరణ

ఈ ఉదాహరణను నడపడానికి, మీరు డేటా అప్డేట్స్ పంపే సర్వర్ను కలిగి ఉండాలి (ఉదాహరణకు PHP లేదా ASP).

సర్వర్ సైడ్ ఇవెంట్ స్ట్రీమ్ సంకేతం చాలా సరళం. "Content-Type" హెడర్ ను "text/event-stream" గా అమర్చండి. ఇప్పుడు, మీరు ఇవెంట్ స్ట్రీమ్ పంపడానికి ప్రారంభించవచ్చు.

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

ASP లో కోడ్ (VB) (demo_sse.asp):

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

కోడ్ వివరణం:

  • హెడర్ "Content-Type" ను "text/event-stream" గా అమర్చండి
  • పేజీని క్యాచ్ చేయకూడదు
  • పంపించవలసిన తేదీను పేర్కొనండి (ఎప్పటికీ "data: " ముందు ఉంచండి)
  • పేజీని తాజాకరించే కంటెంట్ నిర్వహించు

EventSource ఆబ్జెక్ట్

పై ఉదాహరణలో, మేము onmessage ఇవెంట్ ఉపయోగించి సందేశాన్ని పొందుతాము. అయితే, ఇతర ఇవెంట్లను కూడా ఉపయోగించవచ్చు:

ఇవెంట్ వివరణ
onopen సర్వర్కు కనెక్షన్ తెరవబడినప్పుడు
onmessage సందేశాన్ని అందుకున్నప్పుడు
onerror తప్పు జరిగినప్పుడు