Event Source is a part of SSE (Server Sent Events). It pushes data to browser by providing one way communication between server to browser. Here, communication is carried out from server to browser only and browser doesn’t send any data to the server.

Example of Event Source

Auto update of Cricket score on website. Auto update of Online stock price update. Auto update of Weather information like temperature, humidity, rain forecast, etc. Twitters updating timeline.

Event Source between Angular and Java (spring boot)

Event Source or SSE Vs Web-socket

Event Source

It is a server sent communication that is carried out from server to web browser client only. It supports one way communication. It doesn’t support binary. Its use only UTF-8. It has maximum open connection limit. It has built in support for re-connect and event Id.

Web-socket

It provides two-way, a full-duplex communication over a single TCP connection. Data can be communicated from server to browser, vice versa. Online chat is the best example. It supports arbitrary binary data.

Code Discussion

Service Class (spring boot)

Here, Service class receives data from some data source and gives to controller class like below:

package com.myservice; import java.io.IOException;

import java.util.HashMap;

import java.util.Map; import org.springframework.cache.annotation.CachePut;

import org.springframework.cache.annotation.Cacheable;

import org.springframework.stereotype.Service; import com.fasterxml.jackson.databind.ObjectMapper;

import com.philips.models.WorkflowDataModel; @Service

public class StatusInProgress { public class StatusInProgress { private static Map<String, String> storeData = new HashMap<String, String>(); @Override

public void triggerEvent(MyDataModel eventData) {

System.out.println("Display To Angular App");

try { public void triggerEvent(MyDataModel eventData) {System.out.println("Display To Angular App");try { System.out.println(eventData.getPatientId());

ObjectMapper mapper = new ObjectMapper();

String jsonText = mapper.writeValueAsString(eventData);

putPatient(jsonText);

} catch (IOException e1) {

e1.printStackTrace();

}

}

public void putMyData(String myData) {

if (storeData.containsKey("mydata")) {

storeData.remove("mydata");

} @CachePut (value = "myData")public void putMyData(String myData) {if (storeData.containsKey("mydata")) {storeData.remove("mydata"); storeData.put("mydata", patientData);

}

public String getMyData() {

String myitem= "";

try {

myitem = storeData.get("mydata");

} catch (Exception e) {

} @Cacheable (value = "myData")public String getMyData() {String myitem= "";try {myitem = storeData.get("mydata");} catch (Exception e) { return myitem;

}

}

Controller Class (spring boot)

Controller class receives data from service class and emits the data by REST API. It uses SseEmitter.

package com.controller; import java.io.IOException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import com.myservice; @Controller public class MyDataController { @Autowired private StatusInProgress statusInProgress; @CrossOrigin(exposedHeaders = "Access-Control-Allow-Origin") @RequestMapping(value = "/get_mydata") public SseEmitter getMyData() throws InterruptedException { SseEmitter notifier = new SseEmitter(600L); try { String myData = statusInProgress.getMyData(); if (myData!= null && myData!= "") { notifier.send(SseEmitter.event().reconnectTime(500).data(myData)); } } catch (IOException e) { e.printStackTrace(); } return notifier; } }

Component (Angular 4)

This component TypeScript class subscribes the API from Server like below:



import {Observable} from "rxjs"; import { Component, OnInit } from ' @angular/core ';import {Observable} from "rxjs";

templateUrl: './app/home/home.html'

}) @Component ({templateUrl: './app/home/home.html'}) export class HomeListComponent{

myData: any;



constructor(private airService: AIRadiologyService) {

this.connect();

}

let source = new EventSource('

source.addEventListener('message', message => {

this.myData = JSON.parse(message.data);

});

}

} connect(): void {let source = new EventSource(' http://serverip:port/get_mydata' );source.addEventListener('message', message => {this.myData = JSON.parse(message.data);});

Conclusion

Event source is very good to update or refresh browser data with real time data. This protocol is very less complicated because it gives flexibility by not adding any external JavaScript library. JavaScript itself provides the EventSource interface to receive the real time data or message sent by server.