How to remove a specific socket.io listener on the client?

Question

Angular

Socket (on the client) is initialized on multiple pages: What do I need to write in ngOnDestroy(){} or in ionViewDidLeave() {} to unsubscribe the listener only on this page I'm leaving? I'll describe the problem in detail: There is a page, request.page.ts , which is used multiple times. The data displayed on it depends on the id, for example: "/home/request;id=24" and "/home/request;id=175". When leaving the page, I need to destroy it. I'm trying to do this in several ways:
this.socket.on('server-response', data => { })

goBack(){
    this.navCtrl.navigateRoot('/home');
    this.router.navigate(['/home'], {replaceUrl: true})
    this.location.back();
}

Let's say I'm leaving the page "/home/request;id=24". After such an exit, the history of url movements is sort of deleted, I cannot return to it by pressing the "back" button, but the sockets on it and various functions continue to work. If I open the same page, "/home/request;id=24" or a new one "/home/request;id=175", the component is re-initialized, and it turns out that that closed page exists in the background and the functions on it continue to be processed ..
Accordingly, if the page is not destroyed, you need to unsubscribe from events on it (Googling about unsubscribe).
socket.io on the client has this:
this.socket.removeListener('server-response');
But it unsubscribes not a specific page, but all these 'server-response' listeners, including those on other pages. Accordingly, what should be written in ngOnDestroy(){} or in ionViewDidLeave() {} to unsubscribe from the listener only on this page that I'm leaving?

Answer 1

Chet you have porridge.
Subscribing to a socket is not a matter of a specific page, it is a task for logic at the level of the entire application. If the business task is such that you need to open a subscription when you open the page, then the page should notify the service about its activity.

Let's say I'm leaving the page "/home/request;id=24". After such an exit, the history of url-movements is, as it were, deleted, I cannot return to it by clicking on the "back" button

router.navigate keeps the navigation history if no additional options are specified. location should not be touched at all.

Socket (on the client) is initialized in multiple pages:
this.socket.on('server-response', data => { })

Would do it in some service

serverResponse = new Observable(observer => {
  this.socket.on('server-response', data => ovserver.next(data));
  return () =>  this.socket.removeListener('server-response');
}).pipe(share());

And then on the page you simply subscribe to this stream, and in ngOnDestroy() you unsubscribe.
There is no handling of connection or disconnect errors, I advise you to deal with everything yourself. Might be useful fromEvent or fromEventPattern

Answer 2

As Anton Shvets already answered , it is enough justsocket.removeListener('server-response')