HTTP- सर्वर इवेंट्स का उपयोग करके HTTP सर्वर पुश को लागू करना

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

सर्वर-सेंटेड-ईवेंट कैसे काम करता है?

एक सरल उदाहरण:
(new EventSource('/events')).addEventListener('message', function (e) {
document.getElementById('body').innerHTML += e.data + '
';
}, false);
ब्राउज़र एक http कनेक्शन स्थापित करता है, और सर्वर से प्रत्येक संदेश के लिए एक घटना शुरू होती है, जिसके हैंडलर में हम संदेश पाठ प्राप्त कर सकते हैं। उसी समय, सर्वर साइड से कनेक्शन को डिस्कनेक्ट करने के लिए आवश्यक नहीं है, क्योंकि XMLHTTPRequest की आवश्यकता होती है। इसलिए, कनेक्शन स्थापित होने के बाद, हम सर्वर से संदेश प्राप्त कर सकते हैं।

सर्वर द्वारा भेजे गए घटनाओं का एक अन्य लाभ यह है कि नवीनतम विनिर्देश अब क्रोम, ओपेरा 11+ ब्राउज़रों द्वारा समर्थित है, समर्थन फ़ायरफ़ॉक्स ऑरोरा में घोषित किया गया है, और ब्राउज़र IE8 +, फ़ायरफ़ॉक्स 3.5+ के लिए जावास्क्रिप्ट में पॉलीफ़िल को लागू करना संभव है, पुराने ब्राउज़रों के लिए पॉलीफ़िल का उपयोग कर सकते हैं लंबे समय से मतदान। इस प्रकार, WebSockets की तुलना में EventSource बेहतर समर्थित है। (हम यहां मूल समर्थन की तलाश करते हैं - http://caniuse.com/#search=eventsource )

उसी समय, सर्वर पक्ष पर काम करने के लिए पॉलीफाइल के लिए, किसी भी लाइब्रेरी को कनेक्ट करना आवश्यक नहीं है, यह सर्वर-भेजे गए घटनाओं के साथ काम को लागू करने के लिए पर्याप्त है, जैसा कि मानक की आवश्यकता होती है, और प्रत्येक अजाक्स परिवहन के लिए कोड नहीं लिखना चाहिए (जैसा कि सॉकेट में किया जाता है। बहुत जटिल हो जाता है, अधिक परिवहन - अधिक सूक्ष्मता)

और इसलिए, IE8 XDomainRequest का समर्थन करता है, जो सर्वर-पुश तकनीक पर काम कर सकता है, अर्थात। हम http कनेक्शन को बाधित किए बिना भी संदेश प्राप्त कर सकते हैं।
दुर्भाग्य से, XDomainRequest को प्रतिक्रिया शरीर की शुरुआत में पैडिंग - 2 किलोबाइट की आवश्यकता होती है, लेकिन यह कोई समस्या नहीं है। इसके अलावा, XDomainRequest अनुरोध हेडर स्थापित करने का समर्थन नहीं करता है, इसलिए अंतिम-इवेंट-आईडी को अनुरोध निकाय (POST) में प्रेषित करना होगा।

XDomainRequest और इसकी विशेषताओं के बारे में यहाँ और पढ़ें - http://blogs.msdn.com/b/ieinternals/archive/2010/04/06/comet-streaming-in-internet-explorer-with-xxhttprequest-and-xdomainrequest.aspx ? पेजइंडेक्स = 1 )

फ़ायरफ़ॉक्स ब्राउज़र आपको सर्वर से संदेशों को संसाधित करने की अनुमति देता है क्योंकि वे मानक XMLHttpRequest ( javascript.ru/ajax/comet/xmlhttprequest-interactive लेख देखें) के माध्यम से पहुंचते हैं
इसलिए, यह सर्वर-पुश का भी समर्थन करता है।

बाकी ब्राउज़रों के लिए, XMLHttpRequest (यानी, प्रत्येक भेजे गए संदेश के बाद ऐसे ब्राउज़रों के लिए कनेक्शन को डिस्कनेक्ट करने की आवश्यकता होती है) का उपयोग करके लंबी-मतदान योजना के अनुसार संदेश प्राप्त करना संभव है।
तो, ब्राउज़र के लिए समाप्त EventSource जिसमें इसका मूल समर्थन नहीं है, वह है https://github.com/Yaffle/EventSource ।
कोई पुस्तकालय निर्भरता नहीं हैं, काम करने के लिए सभी आवश्यक हैं:
<script type="text/javascript" src="eventsource.js"></script>

सर्वर-पुश और लंबे समय से मतदान का उपयोग कर समस्याएं

ब्राउज़र एक साथ कनेक्शन की संख्या को सीमित करते हैं, जो कई ब्राउज़र टैब में साइट खोलते समय समस्याएं पैदा कर सकता है। बेशक, आधुनिक ब्राउज़रों में, कनेक्शन की संख्या कम से कम छह तक सीमित है, लेकिन अगर आपकी साइट के साथ प्रत्येक टैब 2 या उससे अधिक समय तक http कनेक्शन का उपयोग करता है, तो यह सीमा जल्दी से पहुंच जाती है।
SharedWorker इस समस्या को हल करने के लिए सबसे उपयुक्त है। SharedWorker बनाने के बाद, हम इसके अंदर एक EventSource बना सकते हैं और EventSource से सभी कनेक्टेड स्क्रिप्ट में सभी ईवेंट भेज सकते हैं:

उदाहरण, shareworker.js:
var es = new self.EventSource('events'),
history = [];
es.addEventListener('message', function (e) {
history.push(e.data);
}, false);
self.onconnect = function onConnect(event) {
var port = event.ports[0]; //
history.forEach(function (data) {
port.postMessage(data);
});
es.addEventListener('message', function (e) {
port.postMessage(e.data);
}, false);
}

लेकिन, दुर्भाग्य से, SharedWorker केवल ओपेरा 10.6+ और क्रोम (सफारी) द्वारा समर्थित है। उसी समय, ओपेरा के पास एक इवेंटसॉर्स ऑब्जेक्ट "इनसाइड" शेयर्डवॉकर (जो कि शेयरडॉर्करग्लोस्कोस्कोप में नहीं है) नहीं है। इसलिए, एकाधिक कनेक्शन से बचने का यह तरीका केवल वेबकिट ब्राउज़रों पर लागू होता है। अन्य सभी ब्राउज़रों के लिए, हमें एक अलग डोमेन बनाना होगा। क्योंकि EventSource क्रॉस-डोमेन अनुरोधों का समर्थन नहीं करता है, मैं EventSource डोमेन पर स्थित एक iframe html पृष्ठ के माध्यम से कनेक्ट करने का सुझाव देता हूं, जो EventSource को "ट्रिगर" करेगा और "पोस्टमेसेज" के माध्यम से संदेश भेजेगा (इस विषय पर एक हालिया लेख था - http: // habrahabr। com / ब्लॉग्स / जावास्क्रिप्ट / 120336 / , जो कि easyxdm लाइब्रेरी के उपयोग का वर्णन करता है, लेकिन "window.postMessage" को आधुनिक ब्राउज़रों ( http://caniuse.com/#search=postmessage ) द्वारा काफी समर्थन दिया गया है।

अंतिम-घटना-आईडी

जब सर्वर के साथ कनेक्शन काट दिया जाता है (या तो सर्वर कनेक्शन बंद कर देता है या कुछ नेटवर्क त्रुटि उत्पन्न हुई है), EventSource एक निश्चित समय के बाद फिर से जुड़ता है (यह समय नियंत्रित किया जा सकता है)। इस स्थिति में, नया कनेक्शन हेडर लास्ट-इवेंट-आईडी में होगा - प्राप्त अंतिम संदेश का पहचानकर्ता।
एक उदाहरण सर्वर प्रतिक्रिया - इवेंट स्ट्रीम पर विचार करें:
पुनः प्रयास करें: 1000 \ n
आईडी: 123
डेटा: हैलो वर्ल्ड \ n \ n

` रिट्री` फ़ील्ड सर्वर को बताता है कि डिस्कनेक्शन की स्थिति में कितने मिलीसेकंड को फिर से कनेक्ट करना है। पुन: कनेक्ट करने पर ` आईडी` फ़ील्ड को लास्ट-इवेंट-आईडी हेडर में पास किया जाएगा। इसलिए, सर्वर साइड पर, हम उपयोगकर्ता द्वारा प्राप्त अंतिम संदेश के पहचानकर्ता को आसानी से निर्धारित कर सकते हैं और उसके बाद जमा हुई सभी चीजों को स्थानांतरित कर सकते हैं। उपयोगकर्ता को कुछ भी याद किए बिना सभी संदेश प्राप्त होंगे। उदाहरण में सादगी के लिए, CSRF के खिलाफ प्रमाणीकरण और सुरक्षा के बिना GET पद्धति का उपयोग करके संदेश भेजा जाता है। चैट समय सर्वर के लिए स्थानीय है, क्षमा करें।

चैट उदाहरण: http://hostel6.ru:8002

चैट स्रोतों को यहां डाउनलोड किया जा सकता है: https://github.com/Yaffle/EventSource
आपका ध्यान देने के लिए आप सभी का धन्यवाद!

UPD: IE8 +, FF4-5 के लिए CORS समर्थन जोड़ा गया