Fix closing of connection, address various minor issues and code smells, improve options and overall usability (#27)

* Fix timeout option camelCase

* Improve config descriptions in Readme

* Align config options order in code with Readme

* Change || to ?? for all numeric config options

* Move logging to dedicated _logDebug function

* Disable reconnections if pollingInterval is 0

* Fix set ERROR status on error

* Put event in single line when dispatching timeout

* Fix whitespace

* Remove pointless check for xhr.readyState UNSENT
Note that readyState can only be DONE or LOADING at this point anyway

* Prevent activity after connection is closed
Always leave xhr change/error handlers immediately when status is CLOSED
Fixes #24

* Align config options order in type def with Readme

* Add withCredentials option

* Fix syntax of example options object

Author: EmilJunker

README.md

@@ -185,13 +185,14 @@ new EventSource(url: string | URL, options?: EventSourceOptions);
 
 ```typescript
 const options: EventSourceOptions = {
-  method: 'GET'; // Request method. Default: GET
-  timeout: 0; // Time after which the connection will expire without any activity: Default: 0 (no timeout)
-  timeoutBeforeConnection: 500; // Time to wait before initial connection is made: Default: 500ms
-  headers: {}; // Your request headers. Default: {}
-  body: undefined; // Your request body sent on connection: Default: undefined
-  debug: false; // Show console.debug messages for debugging purpose. Default: false
-  pollingInterval: 5000; // Time (ms) between reconnections. Default: 5000
+  method: 'GET', // Request method. Default: GET
+  timeout: 0, // Time (ms) after which the connection will expire without any activity. Default: 0 (no timeout)
+  timeoutBeforeConnection: 500, // Time (ms) to wait before initial connection is made. Default: 500
+  withCredentials: false, // Include credentials in cross-site Access-Control requests. Default: false
+  headers: {}, // Your request headers. Default: {}
+  body: undefined, // Your request body sent on connection. Default: undefined
+  debug: false, // Show console.debug messages for debugging purpose. Default: false
+  pollingInterval: 5000, // Time (ms) between reconnections. If set to 0, reconnections will be disabled. Default: 5000
 }
 ```
 

index.d.ts

@@ -46,11 +46,12 @@ export interface ExceptionEvent {
 export interface EventSourceOptions {
   method?: string;
   timeout?: number;
+  timeoutBeforeConnection?: number;
+  withCredentials?: boolean;
   headers?: Record<string, any>;
   body?: any;
   debug?: boolean;
   pollingInterval?: number;
-  timeoutBeforeConnection?: number;
 }
 
 export type EventSourceEvent = MessageEvent | OpenEvent | CloseEvent | TimeoutEvent | ErrorEvent | ExceptionEvent;

src/EventSource.js

@@ -5,7 +5,6 @@ class EventSource {
   CLOSED = 2;
 
   constructor(url, options = {}) {
-    this.interval = options.pollingInterval || 5000;
     this.lastEventId = null;
     this.lastIndexProcessed = 0;
     this.eventType = undefined;
@@ -19,11 +18,13 @@ class EventSource {
     };
 
     this.method = options.method || 'GET';
-    this.timeout = options.timeOut || 0;
+    this.timeout = options.timeout ?? 0;
+    this.timeoutBeforeConnection = options.timeoutBeforeConnection ?? 500;
+    this.withCredentials = options.withCredentials || false;
     this.headers = options.headers || {};
     this.body = options.body || undefined;
     this.debug = options.debug || false;
-    this.timeoutBeforeConnection = options.timeoutBeforeConnection ?? 500;
+    this.interval = options.pollingInterval ?? 5000;
 
     this._xhr = null;
     this._pollTimer = null;
@@ -38,13 +39,16 @@ class EventSource {
       this.url = url;
     }
 
-    this._pollAgain(this.timeoutBeforeConnection);
+    this._pollAgain(this.timeoutBeforeConnection, true);
   }
 
-  _pollAgain(time) {
-    this._pollTimer = setTimeout(() => {
-      this.open();
-    }, time);
+  _pollAgain(time, allowZero) {
+    if (time > 0 || allowZero) {
+      this._logDebug(`[EventSource] Will open new connection in ${time} ms.`);
+      this._pollTimer = setTimeout(() => {
+        this.open();
+      }, time);
+    }
   }
 
   open() {
@@ -55,6 +59,10 @@ class EventSource {
       this._xhr = new XMLHttpRequest();
       this._xhr.open(this.method, this.url, true);
 
+      if (this.withCredentials) {
+        this._xhr.withCredentials = true;
+      }
+
       if (this.headers) {
         for (const [key, value] of Object.entries(this.headers)) {
           this._xhr.setRequestHeader(key, value);
@@ -72,13 +80,13 @@ class EventSource {
       this._xhr.timeout = this.timeout;
 
       this._xhr.onreadystatechange = () => {
+        if (this.status === this.CLOSED) {
+          return;
+        }
+
         const xhr = this._xhr;
 
-        if (this.debug) {
-          console.debug(
-            `[EventSource][onreadystatechange] ReadyState: ${xhr.readyState}, status: ${xhr.status}`
-          );
-        }
+        this._logDebug(`[EventSource][onreadystatechange] ReadyState: ${xhr.readyState}, status: ${xhr.status}`);
 
         if (![XMLHttpRequest.DONE, XMLHttpRequest.LOADING].includes(xhr.readyState)) {
           return;
@@ -93,38 +101,31 @@ class EventSource {
           this._handleEvent(xhr.responseText || '');
 
           if (xhr.readyState === XMLHttpRequest.DONE) {
-            if (this.debug) {
-              console.debug(
-                '[EventSource][onreadystatechange][DONE] Operation done. Reconnecting...'
-              );
-            }
-            this._pollAgain(this.interval);
-          }
-        } else if (this.status !== this.CLOSED) {
-          if (this._xhr.status !== 0) {
-            this.dispatch('error', {
-              type: 'error',
-              message: xhr.responseText,
-              xhrStatus: xhr.status,
-              xhrState: xhr.readyState,
-            });
+            this._logDebug('[EventSource][onreadystatechange][DONE] Operation done.');
+            this._pollAgain(this.interval, false);
           }
+        } else if (xhr.status !== 0) {
+          this.status = this.ERROR;
+          this.dispatch('error', {
+            type: 'error',
+            message: xhr.responseText,
+            xhrStatus: xhr.status,
+            xhrState: xhr.readyState,
+          });
 
-          if ([XMLHttpRequest.DONE, XMLHttpRequest.UNSENT].includes(xhr.readyState)) {
-            if (this.debug) {
-              console.debug(
-                '[EventSource][onreadystatechange][ERROR] Response status error. Reconnecting...'
-              );
-            }
-
-            this._pollAgain(this.interval);
+          if (xhr.readyState === XMLHttpRequest.DONE) {
+            this._logDebug('[EventSource][onreadystatechange][ERROR] Response status error.');
+            this._pollAgain(this.interval, false);
           }
         }
       };
 
-      this._xhr.onerror = (e) => {
-        this.status === this.ERROR;
+      this._xhr.onerror = () => {
+        if (this.status === this.CLOSED) {
+          return;
+        }
 
+        this.status = this.ERROR;
         this.dispatch('error', {
           type: 'error',
           message: this._xhr.responseText,
@@ -142,10 +143,7 @@ class EventSource {
       if (this.timeout > 0) {
         setTimeout(() => {
           if (this._xhr.readyState === XMLHttpRequest.LOADING) {
-            this.dispatch('error', {
-              type: 'timeout',
-            });
-
+            this.dispatch('error', { type: 'timeout' });
             this.close();
           }
         }, this.timeout);
@@ -160,6 +158,12 @@ class EventSource {
     }
   }
 
+  _logDebug(...msg) {
+    if (this.debug) {
+      console.debug(...msg);
+    }
+  }
+
   _handleEvent(response) {
     const parts = response.substr(this.lastIndexProcessed).split('\n');
     this.lastIndexProcessed = response.lastIndexOf('\n\n') + 2;
@@ -205,7 +209,7 @@ class EventSource {
     if (this.eventHandlers[type] === undefined) {
       this.eventHandlers[type] = [];
     }
-    
+
     this.eventHandlers[type].push(listener);
   }