How to use Angular with Axon Subscription-Query

Axon Framework
1

I am implementing a web-application with angular and I have would like to get some data from the backend via axon subscription query (like server-send events). I already implemented the subscription query and the rest api on the backend. The backend provides the data as application/stream+json and it works. I can connect with the browers to the rest api and I get the data push if there are changing. But I found no examples how to use angular to get the data from the backend pushed. I tried to connect to the backend via angular HttpClient. But it doesn’t work. Has anyone tried this before and can give me an example how to use connect angular with the backend which provides the data as subscription query?

2

You need to create an EventSource. For example have an abstract service (I used text stream media type, for json you might not need to parse it explicitly):

export class SseService {
  constructor(protected http: HttpClient, protected zone: NgZone) {}

  protected sseRequest<T>(url: string): Observable<T> {
    const eventSource = new EventSource(url);
    return new Observable(observer => {
      eventSource.onmessage = event => this.zone.run(() => observer.next(JSON.parse(event.data)));
      eventSource.onerror = error => this.zone.run(() => observer.error(error));
    });
  }
}

and use it in your specific service by subscribing to stream():

@Injectable({
  providedIn: 'root',
})
export class YourService extends SseService {

  constructor(protected http: HttpClient, protected zone: NgZone) {
    super(http, zone);
  }

  stream(): Observable<HttpResponse<any>> {
    return this.sseRequest(`/api/sse`);
  }
}
3

Thanks vaelyr. Thats what I am looking for. I am currently try it. But at event sources you can not configure the http header to set additional properties like access token.

4

Official implementation does not support it, for now you would need to use polyfill for that, for example: GitHub - Yaffle/EventSource: a polyfill for http://www.w3.org/TR/eventsource/

Also there is a lot of talk about EventSource already being legacy api and no one is developing it for further support, but there is no good alternative either. Just the fetch stream api, but it is not that well supported either it seems.

As for tokens, it would best practice to use cookies for authorization concerns instead of custom headers, at least in public facing api-s.

5

Thanks. That works. I get my date pushed from the backend. But their is one more problem. If the server does not send data over 45 seconds the connection is closed and the event source will reconnect. With each reconnect all the data are send again. Do you have an idea how to keep the connection alive? Some stackoverflow entries says the server should send null bytes to keep the connection alive. But to implemented this on the server side. Also this solution seems not really good, what do you mean about this?

6

Connection timeouts should usually be configured from application gateway or proxy side, from nginx for example.

Also you assume that reconnects will happen regardless of timeouts, for whatever reason. For sending data again after reconnect you must be using the wrong implementation of subscription query. You maybe interested in updates only, in this case you can only subscribe to updates or initial data + updates.

Axon Reactor Extensions have implemented more versions of subscription queries for query gateway which eliminates some of the boilerplate code.