एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल एसएसई एपीआई


सर्वर से भेजे गए ईवेंट (SSE) वेब पेज को सर्वर से अपडेट प्राप्त करने की अनुमति देते हैं।


सर्वर से भेजे गए इवेंट - एक तरह से मैसेजिंग

सर्वर द्वारा भेजी गई घटना तब होती है जब एक वेब पेज स्वचालित रूप से सर्वर से अपडेट प्राप्त करता है।

यह पहले भी संभव था, लेकिन वेब पेज को यह पूछना होगा कि क्या कोई अपडेट उपलब्ध था। सर्वर द्वारा भेजे गए ईवेंट के साथ, अपडेट स्वचालित रूप से आते हैं।

उदाहरण: फेसबुक/ट्विटर अपडेट, स्टॉक मूल्य अपडेट, समाचार फ़ीड, खेल परिणाम आदि।


ब्राउज़र समर्थन

तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो सर्वर द्वारा भेजे गए ईवेंट का पूर्ण समर्थन करता है।

API
SSE 6.0 79.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 ऑब्जेक्ट बनाएं, और अपडेट भेजने वाले पृष्ठ का URL निर्दिष्ट करें (इस उदाहरण में "demo_sse.php")
  • हर बार जब कोई अपडेट प्राप्त होता है, तो ऑनमेसेज इवेंट होता है
  • जब कोई ऑनमेसेज घटना होती है, तो प्राप्त डेटा को आईडी = "परिणाम" के साथ तत्व में डालें

सर्वर-भेजे गए ईवेंट समर्थन की जाँच करें

ऊपर दिए गए उदाहरण में सर्वर द्वारा भेजे गए ईवेंट के लिए ब्राउज़र समर्थन की जाँच करने के लिए कोड की कुछ अतिरिक्त पंक्तियाँ थीं:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}


सर्वर-साइड कोड उदाहरण

काम करने के लिए ऊपर के उदाहरण के लिए, आपको डेटा अपडेट (जैसे PHP या ASP) भेजने में सक्षम सर्वर की आवश्यकता है।

सर्वर-साइड इवेंट स्ट्रीम सिंटैक्स सरल है। "सामग्री-प्रकार" शीर्षलेख को "पाठ/ईवेंट-स्ट्रीम" पर सेट करें। अब आप इवेंट स्ट्रीम भेजना शुरू कर सकते हैं।

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

एएसपी (वीबी) में कोड (demo_sse.asp):

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

कोड समझाया:

  • "सामग्री-प्रकार" शीर्षलेख को "पाठ/ईवेंट-स्ट्रीम" पर सेट करें
  • निर्दिष्ट करें कि पृष्ठ को कैश नहीं करना चाहिए
  • भेजने के लिए डेटा आउटपुट करें ( हमेशा "डेटा:" से शुरू करें)
  • आउटपुट डेटा को वेब पेज पर वापस फ्लश करें

इवेंटसोर्स ऑब्जेक्ट

ऊपर के उदाहरणों में हमने संदेश प्राप्त करने के लिए ऑनमेसेज ईवेंट का उपयोग किया है। लेकिन अन्य कार्यक्रम भी उपलब्ध हैं:

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs