我正在尝试在 Angular 2/RxJs应用程序中显示服务器发送的事件发出的值。
后端通过服务器发送的事件定期将各个字符串发送到客户端。
我不确定如何处理 Angular 2/RxJs侧的检索值。
这是我的客户(一个ng组件):
import {Component, OnInit} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'my-app',
template: `<h1>My second Angular 2 App</h1>
<ul>
<li *ngFor="#s of someStrings | async">
a string: {{ s }}
</li>
</ul>
`
})
export class AppComponent implements OnInit {
constructor(private http:Http) {
}
errorMessage:string;
someStrings:string[];
ngOnInit() {
this.getSomeStrings()
.subscribe(
aString => this.someStrings.push(aString),
error => this.errorMessage = <any>error);
}
private getSomeStrings():Observable<string> {
return this.http.get('interval-sse-observable')
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res:Response) {
if (res.status < 200 || res.status >= 300) {
throw new Error('Bad response status: ' + res.status);
}
let body = res.json();
return body || {};
}
private handleError(error:any) {
// In a real world app, we might send the error to remote logging infrastructure
let errMsg = error.message || 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}
后端方法如下(并使用RxJava):
@ResponseStatus(HttpStatus.OK)
@RequestMapping(method = RequestMethod.GET, path = "interval-sse-observable")
public SseEmitter tickSseObservable() {
return RxResponse.sse(
Observable.interval(5, TimeUnit.SECONDS, Schedulers.io())
.map(tick -> randomUUID().toString())
);
}
我只是注意到该应用程序卡在请求上,并且页面上没有任何显示。
我怀疑使用map方法即
.map(this.extractData)
时出现问题。我只想将传入的字符串添加到数组中,并在模板中显示该数组,该模板会随着字符串的输入而更新。
谁能帮忙吗?
编辑:这是一个可行的解决方案(感谢Thierry在下面的回答):
import {Component, OnInit} from 'angular2/core';
import 'rxjs/Rx';
@Component({
selector: 'my-app',
template: `<h1>My second Angular 2 App</h1>
<ul>
<li *ngFor="#s of someStrings">
a string: {{ s }}
</li>
</ul>
`
})
export class AppComponent implements OnInit {
someStrings:string[] = [];
ngOnInit() {
let source = new EventSource('/interval-sse-observable');
source.addEventListener('message', aString => this.someStrings.push(aString.data), false);
}
}
最佳答案
您不能使用Angular2的Http类来处理服务器端事件,因为它基于XHR对象。
您可以利用EventSource对象:
var source = new EventSource('/...');
source.addListener('message', (event) => {
(...)
});
请参阅以下文章: