In this post, we will tell you how this API was called in Angular (to refresh inbox when a new mail arrives or a mail is sent to trash in another device, etc.)
Firstly, install event-source-polyfill from npm:
npm i event-source-polyfill
EventSourcePolyfill enables you to send header parameters. Below is the service implementation:
import{Injectable} from'@angular/core';
import{Observable} from'rxjs/Observable';
import{EventSourcePolyfill} from'event-source-polyfill';
import{environment} from'@environments/environment';
import{DeviceDetectorService} from'ngx-device-detector';
@Injectable()
export class EventStreamService{
eventSource: EventSourcePolyfill;
constructor(private deviceDetectorService: DeviceDetectorService){}
getSocketEvents(): Observable<any>
{
return new Observable((observer)=>
{
this.eventSource = new EventSourcePolyfill
(environment.sse_url,
{
headers:
{
'Authorization': 'Bearer '+localStorage.getItem('your-
app@userToken'),
'Device-Language': navigator.language,
'Device-Name': this.deviceDetectorService.os+' -
'+this.deviceDetectorService.browser+'
'+this.deviceDetectorService.browser_version,
'Device-OS': 'WEB'
}
});
this.eventSource.onmessage=(event)=>
{
observer.next(event.data);
};
this.eventSource.onerror=(error)=>
{
this.closeEventSource();
};
});
}
closeEventSource(): void
{
if(localStorage.getItem('your-app@userToken')===undefined)
{
this.eventSource.close();
}
}
}
You should call āclose()ā method if you want to end your event-stream connection. You may have created a Subscription and have āunsubscribedā it in your ngOnDestroy method but this will not close the connection. In your case, āifā condition in ācloseEventSourceā method may differ but do not forget to call āclose()ā when you no longer need data from SSE (you can maybe check error reason to close or try to reconnect).
Source: Medium - SeƱorita Developer
The Tech Platform
Comments