Angular 2 spring events on the server side of the boot

Question

Can someone please provide me an example for w760> server side events?

Basically I need to move the server side events to the browser. I am using angular 2 and spring boot. Please provide me one example example, I can not find good examples.

@Controller public class SSEController { private final List<SseEmitter> emitters = new ArrayList<>(); @RequestMapping(path = "/stream", method = RequestMethod.GET) public SseEmitter stream() throws IOException { SseEmitter emitter = new SseEmitter(); emitters.add(emitter); emitter.onCompletion(() -> emitters.remove(emitter)); return emitter; } } 

How to continuously transmit data from the server and how to subscribe to this event in angular 2?

Thank you in advance

Answer 1

No one answered, therefore answering my own question.

You have spring rest

SseController.java

 import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.List; @RestController public class SSEController { public static final List<SseEmitter> emitters = Collections.synchronizedList( new ArrayList<>()); @RequestMapping(path = "/stream", method = RequestMethod.GET) public SseEmitter stream() throws IOException { SseEmitter emitter = new SseEmitter(); emitters.add(emitter); emitter.onCompletion(() -> emitters.remove(emitter)); return emitter; } } 

ServiceClass.java

 public void sendSseEventsToUI(Notification notification) { //your model class List<SseEmitter> sseEmitterListToRemove = new ArrayList<>(); SSEController.emitters.forEach((SseEmitter emitter) -> { try { emitter.send(notification, MediaType.APPLICATION_JSON); } catch (IOException e) { emitter.complete(); sseEmitterListToRemove.add(emitter); e.printStackTrace(); } }); SSEController.emitters.removeAll(sseEmitterListToRemove); } 

finally in angular2 component do this

notification.component.ts

 import {Component, OnInit} from '@angular/core'; declare let EventSource:any; @Component({ selector: 'notification-cmp', templateUrl: 'notification.component.html' }) export class NotificationComponent implements OnInit { connect(): void { let source = new EventSource('http://localhost:8080/stream'); source.addEventListener('message', message => { let n: Notification; //need to have this Notification model class in angular2 n = JSON.parse(message.data); console.log(message.data); }); } } 

Answer 2

The above answer really helped.

AND..

To get real data clicked ..

the code should be

 source.onmessage = (message)=>{ let n:Notification = JSON.parse(message.data); } source.addEventListener('message', message => { // There is no data property available on 'message' here let n: Notification; n = JSON.parse(message.data); console.log(message.data); }); 

Answer 3

Reply from Pratap A.K. great. But to keep it a little cleaner, you have to create a NotificationService that implements the interface. Like this:

NotificationServiceImpl.java

 public class NotificationServiceImpl implements NotificationService { public static final List<SseEmitter> emitters = Collections.synchronizedList(new ArrayList<>()); @Override public SseEmitter initSseEmitters() { SseEmitter emitter = new SseEmitter(); emitters.add(emitter); emitter.onCompletion(() -> emitters.remove(emitter)); return emitter; } @Override public void sendSseEventsToUI(WebSource notification) { List<SseEmitter> sseEmitterListToRemove = new ArrayList<>(); this.emitters.forEach((SseEmitter emitter) -> { try { emitter.send(notification, MediaType.APPLICATION_JSON); } catch (IOException e) { emitter.complete(); sseEmitterListToRemove.add(emitter); e.printStackTrace(); } }); this.emitters.removeAll(sseEmitterListToRemove); } } 

NotificationService.java

 public interface NotificationService { public SseEmitter initSseEmitters(); public void sendSseEventsToUI(WebSource notification); } 

SSEController.java

 @RestController @RequestMapping("/mystream") public class SSEController { @Autowired NotificationServiceImpl INotificationServiceImpl; @CrossOrigin @RequestMapping(path = "/streamsource", method = RequestMethod.GET) public SseEmitter stream() throws IOException { return INotificationServiceImpl.initSseEmitters(); } } 

Best wishes