JavaScript Çorbası: EventSource Sınıfı

Giriş

Tarayıcı tarafında EventSource nesnesi kullanılır. constructor(), close(), onopen (), onerror(), onmessage(), addEventListener() metodları vardır

addEventListener metodu

Örnek
Şöyle yaparız

// Handler for events of type 'eventType' only
eventSource.addEventListener('eventType', (e) => {
   // Do something - event data will be in e.data,
   // message will be of type 'eventType'
});

onerror metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

onmessage metodu

Örnek
Şöyle yaparız

// Declare an EventSource
const eventSource = new EventSource('http://some.url');

// Handler for events without an event type specified
eventSource.onmessage = (e) => {
   // Do something - event data etc will be in e.data
};

Örnek

Şöyle yaparız

<body>
  <script type="application/javascript">
    var subscribeEvents = function() {
      var key = $("#key").val();
      var eventSource = new EventSource('/sse/receive');
      eventSource.onmessage = function(e) {
        var notification = JSON.parse(e.data);
        if(key == notification.key){
          ...
        }
      };
    }
    window.onload = subscribeEvents;
    window.onbeforeunload = function() {
      eventSource.close();
    }
  </script>
</body>

onopen metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onopen = () => {
  console.info("SSE : Connection OPEN");
  ...
};

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

JavaScript Çorbası

14 Haziran 2021 Pazartesi

EventSource Sınıfı

Hiç yorum yok:

Yorum Gönder