Angular 2 spring 引导服务器端事件
Angular 2 spring boot server side events
有人可以给我提供一个 spring 引导服务器端事件的示例吗?
基本上我需要将服务器端事件推送到浏览器。我正在使用 angular 2 和 spring 引导后端。
请提供 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;
}
}
Angular2如何从服务器持续推送数据以及如何订阅这个事件?
有一个Spring休息控制器
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);
});
}
}
以上回答帮了大忙
还有..
接收推送的实际数据..
代码应该是
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);
});
很棒。但是为了让它更干净一点,您应该创建一个实现接口的 NotificationService。像这样:
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();
}
}
现在使用 Spring Webflux 可以更轻松地完成该任务,只需使用如下媒体类型:
@GetMapping(value = "/queue/events", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<EventNotification> streamEvents() {
return managerService.streamEvents();
}
因此您可以创建如下架构:
您还可以使用 RSocket 示例检查 https://github.com/htenjo/vqueue 中的工作实现。
有人可以给我提供一个 spring 引导服务器端事件的示例吗?
基本上我需要将服务器端事件推送到浏览器。我正在使用 angular 2 和 spring 引导后端。 请提供 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;
}
}
Angular2如何从服务器持续推送数据以及如何订阅这个事件?
有一个Spring休息控制器
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);
});
}
}
以上回答帮了大忙
还有..
接收推送的实际数据..
代码应该是
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);
});
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();
}
}
现在使用 Spring Webflux 可以更轻松地完成该任务,只需使用如下媒体类型:
@GetMapping(value = "/queue/events", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<EventNotification> streamEvents() {
return managerService.streamEvents();
}
因此您可以创建如下架构:
您还可以使用 RSocket 示例检查 https://github.com/htenjo/vqueue 中的工作实现。