如何用角度显示ServerSentEvents
如何用角度显示ServerSentEvents
提问于 2022-01-29 11:56:35
我有一个web服务(Java后端)发出ServerSentEvents (反应堆流量)。
我想用一个角度的客户端捕捉每个事件，并将其显示在一个表中。
我可以看到即将到来的事件，但它们从未被显示过。事实上，它们似乎永远达不到显示它们的功能。
我想要显示的对象是'ChronoWrapper‘类型，我已经为它创建了一个类：
export class ChronoWrapper {
className : string;
methodName : string;
durationMillis : number;
constructor(className : string, methodName : string, durationMillis : number) {
this.className = className;
this.methodName = methodName;
this.durationMillis = durationMillis;
}
isNotEmpty() : boolean {
return this.className != undefined && this.methodName != undefined && this.durationMillis != undefined;
}}
下面是显示的HTML：
<div>
<p>dashboard-view works!</p>
<table>
<tr>
<th>Class name</th>
<th>Method name</th>
<th>Duration in Milliseconds</th>
</tr>
<tr *ngFor="let event of serverSentEvents; index as i">
<td>{{ i }}</td>
<td>{{ event.className }}</td>
<td>{{ event.methodName }}</td>
<td>{{ event.durationMillis }}</td>
</tr>
</table>
</div>下面是相关的类型记录类：
import { Component, OnInit } from '@angular/core';
import { CallSseService} from "../services/connection/call-sse.service";
import { ChronoWrapper } from "../model/chrono-wrapper";
@Component({
selector: 'app-dashboard-view',
templateUrl: './dashboard-view.component.html',
styleUrls: ['./dashboard-view.component.css']
})
export class DashboardViewComponent implements OnInit {
private _url : string = 'http://localhost:8080/chrono/transmission';
serverSentEvents: ChronoWrapper[] = [];
constructor(private _sseService : CallSseService) { }
ngOnInit(): void {
this._sseService.getEvents(this._url)
.subscribe((eventData : MessageEvent) => {
console.log('Event type = ' + eventData.type);
if (eventData.data.length > 0) {
let clearedData : ChronoWrapper = JSON.parse(decodeURI(eventData.data));
console.log('DATA = ' + clearedData);
let chrono = new ChronoWrapper(clearedData.className,clearedData.methodName,clearedData.durationMillis);
if (chrono.isNotEmpty()) {
this.serverSentEvents.push(chrono);
}
} else {
console.log('Nothing to display');
}
});
}
}最后，下面是负责侦听服务器发出的事件的服务：
import { Injectable} from '@angular/core';
import { Observable } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class CallSseService {
constructor() {
}
_eventSource : EventSource | undefined;
newEventSource(path: string): EventSource {
let source = this._eventSource;
if (source == null) {
source = new EventSource(path);
console.log('EventSource connected');
this._eventSource = source;
}
return source;
}
getEvents(url : string) : Observable<MessageEvent> {
return new Observable(event => {
let eventSource = this.newEventSource(url);
eventSource.addEventListener('Chrono', event => {
console.log('Event received : ' + event);
return event;
},
false);
console.log('Listener up');
return () => eventSource.close();
})
}
}在调试中，我可以看到传入的事件及其内容：
id:148
event:Chrono
retry:1000
data:{"className":"TaskManagerImpl","methodName":"submitTask","durationMillis":"101"}有什么我明显看不见的吗？
回答 1
Stack Overflow用户
发布于 2022-01-29 12:05:58
我认为您对Observables有一些误解--正确的实现应该如下所示：
import { Injectable} from '@angular/core';
import { Observable,Subject } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class CallSseService {
constructor() {
}
_eventSource : EventSource | undefined;
_subject = new Subject<MessageEvent>();
newEventSource(path: string): EventSource {
let source = this._eventSource;
if (source == null) {
source = new EventSource(path);
console.log('EventSource connected');
this._eventSource = source;
this._eventSource.addEventListener('Chrono', event => {
console.log('Event received : ' + event);
this._subject.next(event.data);
},
}
return source;
}
getEvents(url : string) : Observable<MessageEvent> {
return this._subject.asObservable()
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70905090
复制相关文章
相似问题
腾讯云开发者
