एचटीएमएल 5 इवेंटसोर्स श्रोता?

Question

मेरे पास EventSource का उपयोग करके मेरे जावास्क्रिप्ट क्लाइंट ऐप में पुश सूचनाएं हैं I मैं इस तरह घटना श्रोताओं संलग्न कर सकते हैं:

source.addEventListener('my_custom_event_type', function(e) { 
    console.log(e.data); 
}, false); 

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

मैं इस तरह से कुछ करने की उम्मीद करेंगे: यदि यह संभव है या नहीं

source.addEventListener('*', function(e) { 
    console.debug('Event with no listener attached: ', e); 
}, false); 

लेकिन विनिर्देश और html5rocks में से एक की तरह ट्यूटोरियल निर्दिष्ट नहीं करते।

दूसरी तरफ, यह कुछ फ़ायरफ़ॉक्स/क्रोम एक्सटेंशन हो सकता है जो सभी सर्वर घटनाओं या किसी चीज़ की निगरानी करने की अनुमति देता है। उन चीजों को वास्तव में पुश सूचनाओं को विकसित करने में मदद मिलेगी।

धन्यवाद!

Answer 1

मुझे अपने आप को एक समाधान पता चला है, जो इवेंटसोर्स इंटरफ़ेस में भी काफी सुधार करता है।

सर्वर पक्ष: ईवेंट प्रकार न भेजें, बस एक अतिरिक्त डेटा फ़ील्ड शामिल करें (जिसमें मैं हमेशा जेसन का उपयोग करता हूं)। तो

event: eventName 
data: {mykey: 'myvalue'} 

के बजाय मैं बजाय सर्वर से इस पते पर भेजें:

data: {mykey: 'myvalue', eventName: 'eventName'} 

क्लाइंट साइड: अब मैं EventSource onmessage कॉलबैक का उपयोग कर सकते हैं, कि है कि एक घटना नहीं है हर संदेश को निकाल दिया गया है प्रकार।

और बाइंड इवेंट श्रोताओं के लिए, मैं बैकबोन.इवेंट कार्यक्षमता के साथ एक रैपर क्लास बना देता हूं। परिणाम:

// Server Sent Events (Event Source wrapper class) 
var MyEventSource = (function() { 

    function MyEventSource(url) { 
    var self = this; 
    _.extend(this, Backbone.Events); 

    this.source = new EventSource(url); 
    this.source.onmessage = function(event) { 
     var data, eventName; 
     var data = JSON.parse(event.data); 
     var eventName = data.eventName; delete data.eventName; 

     // Now we can monitor all server sent events 
     console.log('app.server.on ', eventName, '. Data: ', data); 

     self.trigger(eventName, data); 
    }; 
    } 

    return MyEventSource; 
})(); 

अब इस आवरण वर्ग के साथ, मैं आसानी से कार्यक्षमता का विस्तार कर सकते हैं, और सभी सर्वर भेजा घटनाओं को आसानी से नजर रखी जा सकती है और विस्तार Backbone.Events करने के लिए धन्यवाद घटना इस वर्ग में से निपटने में अधिक शक्तिशाली है।

प्रयोग उदाहरण:

var source = new MyEventSource('url/of/source'); 

// Add event listener 
source.on('eventName', function(data) { 
    console.log(data); 
}); 

// Fire a event (also very useful for testing and debugging!!) 
source.trigger('eventName', { mykey: 'myvalue' }); 

// Unbind event listener (very important for complex applications) 
source.off('eventName'); 

अब मैं एक घटक, संभाल का विस्तार, डिबग और परीक्षण करने के लिए आसान है कि है।

Answer 2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
    <script> 
    var content = ''; 
    if(typeof(EventSource)!=="undefined") 
    { 
     var source = new EventSource("demo_sse.php"); 
     source.onmessage = function(event) 
     { 
     content+=event.data + "<br>"; 
     $("#result").html(content); 
     }; 
    } 
    else 
    { 
     $("#result").html("Sorry, your browser does not support server-sent events..."); 
    } 
    </script> 

Answer 3

मैं जानता हूँ कि यह एक EventSource नहीं है, लेकिन मैं एक ही बात (अपने प्रकार जानने के बिना सभी आने वाली घटनाओं को पकड़ने के लिए एक तरह से) के लिए देख रहा था। सर्वर इन घटनाओं को भेजने पर कोई नियंत्रण के बिना, मैं तो बस एक एक्सएचआर साथ इसे लिखने को समाप्त, मामले में किसी और को इस भर आता है:

function eventStream(path, callback){ 
    //Create XHR object 
    var xhr = new XMLHttpRequest(); 

    //initialize storage for previously fetched information 
    var fetched=''; 

    //Set readystatechange handler 
    xhr.onreadystatechange=function(){ 

     //If the connection has been made and we have 200, process the data 
     if(xhr.readyState>2 && xhr.status==200){ 
      //save the current response text 
      var newFetched=xhr.responseText; 

      //this is a stream, so responseText always contains everything 
      //from the start of the stream, we only want the latest 
      var lastFetch=xhr.responseText.replace(fetched, ''); 

      //Set the complete response text to be removed next time 
      var fetched=newFetched; 

      //callback to allow parsing of the fetched data 
      callback(lastFetch); 
     } 
    }; 

    //open and send to begin the stream; 
    xhr.open('GET', path, true); 
    xhr.send(); 
} 

parseEvents=function(response){ 
    var events=[]; 
    //split out by line break 
    var lines=response.split("\n"); 

    //loop through the lines 
    for(var i=0;i<lines.length;i++){ 

     //each event consists of 2 lines, one begins with 
     //"name:", the other with "data" 
     //if we hit data, process it and the previous line 
     if(lines[i].substr(0, lines[i].indexOf(':'))=='data'){ 

      //add this event to our list for return 
      events.push({ 

       //get the event name 
       name: lines[i-1].split(':')[1].trim(), 
       //parse the event data 
       data: $.parseJSON(lines[i].substr(lines[i].indexOf(':')+1).trim()) 
      }); 
     } 
    } 
    //return the parsed events 
    return events; 
}; 

evenStream('http://example.com/myEventPath', function(response){ 
    var events=parseEvents(response); 
});