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 ఇవెంట్ జరగించినప్పుడు, అప్పగించిన డేటాను id అని "result" విభాగంలో ప్రసారం చేయండి

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

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

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

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

దానికి పనిచేయడానికి, మీరు డేటా అప్డేట్స్ పంపే సర్వర్స్ ఉండాలి (ఉదాహరణకు 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 పరిస్థితి అధిగమించినప్పుడు