एचटीएमएल 5 - सर्वर ने ईवेंट भेजे
पारंपरिक वेब एप्लिकेशन उन घटनाओं को उत्पन्न करते हैं जो वेब सर्वर को भेजे जाते हैं। उदाहरण के लिए, लिंक पर एक साधारण क्लिक सर्वर से एक नए पृष्ठ का अनुरोध करता है।
वेब ब्राउजर से वेब सर्वर पर आने वाली घटनाओं के प्रकार को क्लाइंट द्वारा भेजे गए इवेंट कहा जा सकता है।
HTML5 के साथ, WHATWG वेब एप्लिकेशन 1.0 उन घटनाओं को प्रस्तुत करता है जो वेब सर्वर से वेब ब्राउज़र में प्रवाहित होती हैं और उन्हें सर्वर-सेंटेड इवेंट (SSE) कहा जाता है। SSE का उपयोग करके आप अपने वेब सर्वर से विज़िटर के ब्राउज़र पर लगातार DOM ईवेंट्स को पुश कर सकते हैं।
ईवेंट स्ट्रीमिंग दृष्टिकोण सर्वर के लिए एक सतत कनेक्शन खोलता है, क्लाइंट को डेटा भेजता है जब नई जानकारी उपलब्ध होती है, जिससे निरंतर मतदान की आवश्यकता समाप्त हो जाती है।
सर्वर द्वारा भेजी गई घटनाएं मानकीकृत करती हैं कि कैसे हम सर्वर से क्लाइंट तक डेटा स्ट्रीम करते हैं।
SSE के लिए वेब एप्लिकेशन
किसी वेब एप्लिकेशन में सर्वर-सेंटेड ईवेंट का उपयोग करने के लिए, आपको दस्तावेज़ में एक <इवेंटसोर्स> तत्व जोड़ना होगा।
src <इवेंटसोर्स> एलीमेंट की विशेषता एक ऐसे URL की ओर इशारा करती है, जो लगातार HTTP कनेक्शन प्रदान करता है जो घटनाओं से युक्त डेटा स्ट्रीम भेजता है।
URL एक PHP, PERL या किसी पायथन स्क्रिप्ट की ओर इशारा करता है जो लगातार इवेंट डेटा भेजने का ध्यान रखेगा। निम्नलिखित वेब अनुप्रयोग का एक सरल उदाहरण है जो सर्वर समय की अपेक्षा करेगा।
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>SSE के लिए सर्वर साइड स्क्रिप्ट
एक सर्वर साइड स्क्रिप्ट भेजनी चाहिए Content-typeहेडर इस प्रकार पाठ / घटना-धारा निर्दिष्ट करता है।
print "Content-Type: text/event-stream\n\n";कंटेंट-टाइप सेट करने के बाद, सर्वर साइड स्क्रिप्ट भेजेगा Event: घटना के नाम के बाद टैग। उदाहरण के बाद एक नई पंक्ति वर्ण द्वारा समाप्त किए गए ईवेंट नाम के रूप में सर्वर-टाइम भेजेगा।
print "Event: server-time\n";अंतिम चरण ईवेंट डेटा का उपयोग करके भेजना है Data: टैग जो एक नई पंक्ति वर्ण द्वारा समाप्त स्ट्रिंग मान के पूर्णांक द्वारा निम्नानुसार होगा -
$time = localtime();
print "Data: $time\n";अंत में, निम्नलिखित पूर्ण ticker.cgi पर्ल में लिखा है -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}सर्वर-भेजे गए ईवेंट्स को हैंडल करें
सर्वर द्वारा भेजी गई घटनाओं को संभालने के लिए अपने वेब एप्लिकेशन को संशोधित करें। निम्नलिखित अंतिम उदाहरण है।
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>सर्वर-भेजे गए घटनाओं का परीक्षण करने से पहले, मैं आपको सुझाव दूंगा कि आप सुनिश्चित करें कि आपका वेब ब्राउज़र इस अवधारणा का समर्थन करता है।