使用RxJ和Angular 2来处理服务器发送的事件 [英] Using RxJs and Angular 2 in order to deal with server-sent events
问题描述
我正在尝试在angular 2/RxJs应用程序中显示服务器发送的事件发出的值.
I am trying to display server-sent events emitted values in an angular 2 /RxJs app.
后端定期通过服务器发送的事件将各个字符串发送到客户端.
The backend regularly sends individual strings to the client through server-sent events.
我不确定如何处理角度2/RxJs侧的检索值.
I am not sure how to deal with the retrieved values on the angular 2/RxJs side.
这是我的客户(一个ng组件):
Here is my client (a ng component):
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):
The backend method is as follows (and uses 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())
);
}
我刚刚注意到该应用程序挂起了请求，页面上没有任何显示.
I just noticed that the app hangs on the request and that nothing is displayed on the page.
我怀疑使用map方法(即.map(this.extractData))存在问题.
I suspect there is an issue with my use of the map method i.e. .map(this.extractData).
我只想将传入的字符串添加到数组中，并在模板中显示该数组，该模板会随着字符串的输入而更新.
I would just like to add the incoming strings to the array and display that array in the template which would update as the strings come in.
任何人都可以帮忙吗?
编辑:这是一个可行的解决方案(感谢Thierry在下面的回答):
edit: Here is a working solution (thanks to Thierry's answer below):
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基于XHR对象，因此无法使用Angular2的Http类来处理服务器端事件.
You can't use the Http class of Angular2 to handle server side events since it's based on the XHR object.
您可以利用EventSource对象:
You could leverage the EventSource object:
var source = new EventSource('/...');
source.addListener('message', (event) => {
(...)
});
请参阅以下文章:
- https://dzone.com/articles/html5-server-sent-events
- http://www.nurkiewicz.com/2015/07/server-sent-events-with-rxjava-and.html?m=1
- https://dzone.com/articles/html5-server-sent-events
- http://www.nurkiewicz.com/2015/07/server-sent-events-with-rxjava-and.html?m=1
这篇关于使用RxJ和Angular 2来处理服务器发送的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
