2016-12-06 40 views
5

有人可以請我提供一個春啓動服務器端事件的例子嗎?角2彈簧引導服務器端事件

基本上我需要推動服務器端事件瀏覽器。我使用角度2和彈簧引導後端。 請爲我提供1個示例示例,我無法找到好的示例。

@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; 
    } 
} 

如何從服務器連續推送數據以及如何在Angular 2中訂閱此事件?

在此先感謝

回答

8

沒有人回答,所以回答我自己的問題。

有一個彈簧安置控制器

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); 
    } 
在Angular2組件

終於做到這一點

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); 
     }); 
    } 
} 
+0

這是一個很大的幫助,謝謝! – jmw5598