3

I couldn't help myself searching the interwebs for an answer, so I will just ask straight away.

I'm running a frontend using angular2 and typescript, receiving data from a server.

Is there a way to setup a connection sending pings in specific intervals to get the server response time? I then want to display them in a chart using PrimeNG.

Faigjaz
  • 818
  • 3
  • 15
  • 30
  • 2
    What have you tried? Where is the problem? Store the current time, send a request, when the response arrives compare the current time with the stored time. – Günter Zöchbauer Jul 19 '16 at 08:51
  • I've used the Date.now() methode and did exactly what you suggested. But this was only within one of my services, performing a specific action (getting Data). I actually want to "ping" the server without any requests, if that's even possible. I don't know if that's understandable. I'm rly a newbe on this topic. – Faigjaz Jul 19 '16 at 09:15
  • http://stackoverflow.com/questions/26206979/ping-from-browser – Günter Zöchbauer Jul 19 '16 at 09:16
  • I actually could'nt see any of this working for me, sorry. I'm now sending a http.get request to the "srv_name:port". The response will be a 404, but I guess a response is a response. I'm still working with Date.now(). I guess there isn't any "ping" methode in Typescript, is it? – Faigjaz Jul 19 '16 at 09:31
  • 1
    There is no `ping` this is why they provided other solutions in the question I linked in my previous comment. This might help http://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute especially http://stackoverflow.com/a/1975103/217408 – Günter Zöchbauer Jul 19 '16 at 09:34
  • Alright, thanks to you. I will try working with that. Also, thanks for your patience! – Faigjaz Jul 19 '16 at 09:41

1 Answers1

10

You could try this PingService - just set the url to your url.

@Injectable()
export class PingService {
  pingStream: Subject<number> = new Subject<number>();
  ping: number = 0;
  url: string = "https://cors-test.appspot.com/test";

  constructor(private _http: Http) {
    Observable.interval(5000)
      .subscribe((data) => {
        let timeStart: number = performance.now();

        this._http.get(this.url)
          .subscribe((data) => {
            let timeEnd: number = performance.now();

            let ping: number = timeEnd - timeStart;
            this.ping = ping;
            this.pingStream.next(ping);
          });
      });
  }
}

Use it in your component's constructor like so:

this._pingService.pingStream.subscribe(ping => {
  this.ping = ping;
})

And in your template just add this where you want to show the current ping:

{{ping | number:'1.0-0'}}ms

Working Plunker for example usage

Maximilian Riegler
  • 22,720
  • 4
  • 62
  • 71
  • Where are "Subject" and "Observable" from? Edit: Whups, sorry. Got it from Plunker – Faigjaz Jul 19 '16 at 10:05
  • `rxjs`, which is part of the Angular dependencies. You can import them with `import {Observable, Subject} from 'rxjs/Rx'`. – Maximilian Riegler Jul 19 '16 at 10:07
  • Would you mind explaining what happens step by step? I want to understand before using it. – Faigjaz Jul 19 '16 at 10:08
  • Well, you're already using Observables when using `http`. You can subscribe to them, which means you want to execute code, when they have data ready. Subject is pretty much the same, but it combines Observer and Observable, so you can push data into it and also subscribe. So in the constructor we're creating a new Observable which runs every 5 seconds. We're not interested into any data there yet, we just abuse it to get a timer. So every 5 seconds the callback in the subscribe is called where we make the http request which in turn calls the callback to push the calculated ping into the stream – Maximilian Riegler Jul 19 '16 at 10:14
  • The ping is just like `get milliseconds before request` and then when the request comes back with a response `get milliseconds in response` and then substract them. – Maximilian Riegler Jul 19 '16 at 10:15