HTML5 Server-sent events in Hindi ( SSE API )

Posted on by

आज के इस HTML Tutorial in Hindi में हम जानेंगे की Server-sent events क्या है |

Contents hide
1 Server-sent events kya hai ( What is Server-Sent Event? )
2 Server script ke saath message send karna
3 Web page me messages processing karna

Server-sent events kya hai ( What is Server-Sent Event? )

HTML5 server-sent events web pages के लिए server से communicate करने का एक नया तरीका है | यह XMLHttpRequest object के साथ भी संभव है जो आपके javascript code को web server से अनुरोध ( request ) करने देता है , लेकिन यह one-for-one-exchange है – इसका मतलब है की एक बार जब web server अपनी प्रतिक्रिया ( response ) प्रदान करता है , तो communitation समाप्त हो जाता है |

XMLHttpRequest object सभी Ajax operations ( संचालन ) का मूल है |

हालांकि, ऐसी कुछ स्थितियां है जहा web pages को web server से long-term connection की आवश्यकता होती है |

जैसे की आपको एक उदहारण दू तो finance websites पर stock quotes की कीमत अपने आप update हो जाती है | अन्य एक उदहारण , विभिन्न media websites पर चने वाले news ticker है |

आप HTML server-sent event के साथ ऐसी चीजें बना सकते है | यह web page को web server से open connection hold करने की अनुमति देता है , ताकि web server किसी भी समय automatically new response को भेज सके |

इसमें आपको बार-बार same script को चलाने और server को reconnect करने की आवश्यकता नहीं होती है |

Note :- Server-sent Events ( SSE API ) unidirectional है , इसका मतलब है की data server से client तक एक ही दिशा में deliver किया तजा है | यहाँ client आमतौर पर web browser है |

Server script ke saath message send karna

चलिए एक server-time.php नाम की file बनाये और उसमे निम्न script type करे | यह script web server की build-in clock के मुताबिक वर्तमान समय की report देगा |

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current time on server
$currentTime = date("h:i:s", time());
 
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>

PHP की पहली दो line important header को set करती है | सबसे पहले , यह text/event-stream के जरिये MIME Type को set करता है , जो server-side event standard के लिए आवश्यक है | दूसरी लाइन के जरिये web server को caching बंद करने के लिए कहा गया है अन्यथा आपकी script का output cache किया जा सकता है |

HTML5 server-sent event के माध्यम से भेजे जाने वाले प्रत्येक message text data से start होने चाहिए : इसके बाद actual message और new line character ( \n \n ) आता है |

और अंत में, हमने PHP flush (); function का उपयोग किया है – यह सुनिश्चित करने के लिए की data तुरंत भेजा जाता है , बजाय इसके की PHP code पूरा होने तक buffer किया जाये |

Web page me messages processing karna

EventSource object का उपयोग server-sent event message को प्राप्त करने के लिए किया जाता है |

अब आप एक demo-sse.html नाम का HTML document बनाये और इसे उसी project directory में रखे जहा server-time.php file रखी गयी है |

यह HTML Document simply web server द्वारा current time report को received करेगा और user को display करेगा |

<!DOCTYPE html>
<html lang="en">
<head>
<title>Server-Sent Events Example</title>
<script>
    window.onload = function() {
        var a = new EventSource("server_time.php");
        a.onmessage = function(event) {
            document.getElementById("result").innerHTML += "Current time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>

यह भी पढ़े :-