साइट पर घटनाओं के बारे में सूचनाओं की प्रणाली (वीके ऑडियो प्लेयर के उदाहरण पर)

नमस्ते।

मुझे लगता है कि बहुत से लोग जिनके पास VKontakte खाता है और संगीत सुनते हैं उन्होंने देखा है कि यदि आप एक टैब पर ट्रैक चालू करते हैं और फिर दूसरे पर दूसरा चालू करते हैं, तो पहला ट्रैक रुक जाएगा। मोटे तौर पर यही बात विभिन्न सूचनाओं के साथ होती है (नया संदेश, टिप्पणी / पोस्ट का जवाब, आदि) - यह केवल सक्रिय टैब में प्रदर्शित होता है। कोई भी इस बात में रुचि रखता है कि यह कैसे काम करता है और उनकी साइट पर ऐसा कैसे किया जाता है, तो आपका स्वागत है हब्रकैट के लिए।

सिद्धांत

और यह सब HTML5 लोकल स्टोरेज का उपयोग करके लागू किया गया है। वही ऑडियो प्लेयर ले लो। जब आप लोकल स्टोरेज में ट्रैक शुरू करते हैं, तो विंडो आइडेंटिफायर और प्लेयर स्टेटस सेव हो जाता है (उदाहरण के लिए, 'प्ले')। यदि कोई अन्य विंडो (उसी डोमेन के, निश्चित रूप से) में एक और ट्रैक शुरू होता है, तो सभी टैब अपने खिलाड़ियों को रोकते हैं। और इसी तरह।

अभ्यास

हम ईवेंट डेटा को एक कुंजी में संग्रहीत करेंगे, उदाहरण के लिए, 'नोटिफ़ायर_वेंट'। हम निम्नलिखित फॉर्म की एक निश्चित वस्तु का एक स्ट्रिंग प्रतिनिधित्व लिखेंगे:

var evt = { 'notifier_id': 'aAr63gd2', 'event': 'audiostate', 'event_data': {'state': 'play'}, 'event_ts': Math.round(new Date().getTime() / 1000) }; 

नोटिफ़ायर_ड फ़ील्ड उस टैब की आईडी है जिसमें से ईवेंट भेजा गया था; 'ईवेंट' ईवेंट का नाम है, 'ईवेंट_डेटा' ईवेंट डेटा है, क्रमशः 'ईवेंट_ट्स' यूनिक्स टाइमस्टैम्प है। घटना के समय को निर्दिष्ट किया जाना चाहिए ताकि मुख्य मूल्य को बदलने की घटना हमेशा संसाधित हो।

जब कोई घटना प्राप्त होती है, तो हम बस आवश्यक हैंडलर शुरू करते हैं और प्राप्त किए गए ईवेंट से संबंधित सभी क्रियाएं करते हैं। वह सब है :)

लिस्टिंग

इवेंट हैंडलिंग

 /** * Binds storage key change event * @return void **/ Notifier.prototype.bindEvent = function() { if (!this.isAvailable()) return false; var t = this; $(window).bind('storage', function(e) { var evt = e.originalEvent; if (evt.key == t.m_localStorageKey) //    -   ,   t.handleLsEvent(JSON.parse(evt.newValue)); }); }; /** * Handles changes for certain localStorage event * @param Object evt **/ Notifier.prototype.handleLsEvent = function(evt) { switch (evt.event) { case 'audiostate': this.handleAudioStateEvent(evt); //    play/pause  break; } }; /** * Handles audiostate event * @param Object evt * @return void **/ Notifier.prototype.handleAudioStateEvent = function(evt) { if (evt.notifier_id != this.getNotifierId()) { if (evt.event_data.state == 'play') { //  -    ,      player.pause(); } } }; 

डेमो

एक उदाहरण यहां देखा जा सकता है - ट्रैक 1 , ट्रैक 2 ।

स्रोत कोड

GitHub भंडार से स्रोत डाउनलोड किए जा सकते हैं।

डेमो में दर्ज ऑडियो को एट्रिब्यूशन-शेयरएलाइक लाइसेंस के तहत वितरित किया जाता है।