bug: server response ends with non descript error (#30)

Problem
When the stream ends purposefully by the server ( response.end() ) a non descript error is sent to the subscriber.

Proposed Fix
Depending on the mode of the keepAlive flag the observable will either dispatch a friendly error message, or will complete() immediately.

Author: krismeister

lib/projects/ngx-sse-client/README.md

@@ -110,6 +110,10 @@ this.sseClient.stream('/subscribe', { responseType: 'text' }).subscribe((data) =
 
 ## CHANGELOG
 
+### 19.0.1
+
+- fixed server response ends with non descript error on `keepAlive` _false_.
+
 ### 19.0.0
 
 :warning: Official minimum `Angular` version support changed to **19.1.3**!

lib/projects/ngx-sse-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-sse-client",
-  "version": "19.0.0",
+  "version": "19.0.1",
   "description": "A simple SSE (Server Sent Events) client for Angular applications.",
   "keywords": [
     "angular",

lib/projects/ngx-sse-client/src/lib/sse-client-subscriber.ts

@@ -81,7 +81,12 @@ export class SseClientSubscriber {
     this.chunk = '';
     this.progress = 0;
 
-    this.dispatchStreamData(this.errorEvent(), observer);
+    if (this.sseOptions.keepAlive) {
+      const message = `Server response ended, will reconnect in ${this.sseOptions.reconnectionDelay}ms`;
+      this.dispatchStreamData(this.errorEvent({ status: 1, message }), observer);
+    } else {
+      observer.complete();
+    }
   }
 
   private parseEventData(part: string, observer: Subscriber<string>) {

lib/projects/sample/src/app/app.component.css

@@ -5,7 +5,9 @@ small {
 .events {
   display: flex;
   justify-content: space-between;
-  max-width: 1200px;
+  font-family: monospace;
+  max-width: 1800px;
+  padding-right: 10px;
 }
 
 .buttons {

lib/projects/sample/src/app/app.component.html

@@ -6,6 +6,11 @@ <h1>
     <div *ngFor="let event of sseEvents">{{ event }}</div>
   </div>
 
+  <div class="event">
+    <h1>SSE Events <small>(using <code>ngx-sse-client</code> with <code>keepAlive: false</code>):</small></h1>
+    <div *ngFor="let event of sseEventsWithoutKeepalive">{{ event }}</div>
+  </div>
+
   <div class="event">
     <h1>SOURCE Events <small>(not compatible with IE):</small></h1>
     <div *ngFor="let event of sourceEvents">{{ event }}</div>

lib/projects/sample/src/app/app.component.ts

@@ -14,16 +14,44 @@ export class AppComponent {
   private apiBaseUrl = environment?.apiBaseUrl || '';
 
   public sseEvents: string[] = [];
+  public sseEventsWithoutKeepalive: string[] = [];
   public sourceEvents: string[] = [];
 
   constructor(private httpClient: HttpClient, private sseClient: SseClient) {
-    this.sseClient.stream(`${this.apiBaseUrl}/subscribe`).subscribe((e) => {
+    this.sseClient.stream(`${this.apiBaseUrl}/subscribe`).subscribe({
+      next:(e) => {
       if (e.type === 'error') {
         const event = e as SseErrorEvent;
         this.sseEvents.push(`ERROR: ${event.message}, STATUS: ${event.status}, STATUS TEXT: ${event.statusText}`);
       } else {
         const data = (e as MessageEvent).data;
-        this.sseEvents.push(data);
+          this.sseEvents.push(data);
+        }
+      },
+      error: (e) => {
+        console.error(e);
+      },
+      complete: () => {
+        this.sseEvents.push('COMPLETE - this should never happen');
+      }
+    });
+
+
+    this.sseClient.stream(`${this.apiBaseUrl}/subscribe`, { keepAlive: false }).subscribe({
+      next:(e) => {
+      if (e.type === 'error') {
+        const event = e as SseErrorEvent;
+        this.sseEventsWithoutKeepalive.push(`ERROR: ${event.message}, STATUS: ${event.status}, STATUS TEXT: ${event.statusText}`);
+      } else {
+        const data = (e as MessageEvent).data;
+          this.sseEventsWithoutKeepalive.push(data);
+        }
+      },
+      error: (e) => {
+        console.error(e);
+      },
+      complete: () => {
+        this.sseEventsWithoutKeepalive.push('COMPLETE');
       }
     });