Как удалить конкретный слушатель socket.io на клиенте?

Question

[Денис Щербина]

Socket (на клиенте) инициализируется на нескольких страницах:
this.socket.on('server-response', data => { })
Что нужно написать в ngOnDestroy(){} или в ionViewDidLeave() {}, чтобы отписаться от слушателя только на этой странице, которую покидаю?

Опишу проблему подробно: Есть страница, request.page.ts , которая используется многократно. Отображаемые на ней данные зависят от id, например: "/home/request;id=24" и "/home/request;id=175".
При выходе со страницы мне нужно уничтожить её. Пытаюсь сделать это несколькими вариантами:

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

Допустим я выхожу со страницы "/home/request;id=24". После такого выхода история url-перемещений как бы удаляется, я не могу вернуться на неё путём нажатия на кнопку "назад", но сокеты на ней и разные функции продолжают работать. Если я открою эту же страницу, "/home/request;id=24" или новую "/home/request;id=175", компонент инициализируется заново, и получается, что та закрытая страница существует в фоне и функции на ней продолжают отрабатываться..
Соответственно, если страница не уничтожается, от событий на ней нужно отписаться (Нагуглиг про unsubscribe).
У socket.io на клиенте есть это:
this.socket.removeListener('server-response');
Но она отписывает не конкретную страницу, а все эти слушатели 'server-response', в том числе на других страницах.. Соответственно, что нужно написать в ngOnDestroy(){} или в ionViewDidLeave() {}, чтобы отписаться от слушателя только на этой странице, которую покидаю?

Comments

[Евгений]

// отписаться от всех слушателей
this.socket.off('server-response');

// от определенного
this.socket.off('server-response', listener);

Answer 1

[Антон Швец]

Чет у вас каша.
Подписка на сокет это не дело конкретной страницы, это задача для логики на уровне всего приложения. Если бизнес-задача такова что нужно открыть подписку при открытии страницы, то страничка должна извещать сервис о своей активности.

Допустим я выхожу со страницы "/home/request;id=24". После такого выхода история url-перемещений как бы удаляется, я не могу вернуться на неё путём нажатия на кнопку "назад"

router.navigate оставляет историю перемещений, если не указано дополнительных опций. location трогать не надо вообще.

Socket (на клиенте) инициализируется на нескольких страницах:
this.socket.on('server-response', data => { })

Сделовало бы сделать в каком-нибудь сервисе

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

И потом на странице просто подписываешься на этот поток, а в ngOnDestroy() отписываешься.

Тут нет обработки ошибок соединения или дисконнекта, советую разобраться со всем самому. Возможно пригодится fromEvent или fromEventPattern

Comments

[Антон Швец]

upd
Согласно https://socket.io/docs/v3/listening-to-events/

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

[Денис Щербина]

Антон Швец, Антон, спасибо большое за развёрнутый ответ. Думаю, что Вы всё правильно подсказали) У меня в проекте есть feed.service.ts , где я включаю сокеты и слушаю их:

async open_socket(user_id) {
      this.socket.connect()
      this.socket.emit('new-user', user_id)
      this.socket.on('server-response', data => {
        // Жду сообщения от сервера
      })
}

Осталось разобраться, как подписаться и отписаться на сокет с другой страницы..
this.feedService.open_socket()....
Этот момент разберу, чтобы вопросов не было, и поставлю Вам галочку на ответ)

[Антон Швец]

Денис Щербина, коннет и подписка на конкретные события это разные вещи. Разведите их.
Коннектится при каждой смене страницы наверно не стоит.

А как отписаться я вам написал. Делаете такой обсервабл, дальше можно из него получать что там нужно и вставлять в шаблон в асинк-пайпе.
Асинк-пайп отписывается при уничтожении страницы, при отписке от обсервабла вызывается функция которую позвращает subscriber коллбэк, а именно тут

return () =>  this.socket.off('server-response', listener);

В этом случае от сокета он отпишется сам, в этом преимущество rxjs - удобная обертка для асинхронных действий любого источника.

[Денис Щербина]

Антон Швец, И так, вот получившийся код (Спасибо большое, Антон! Мы сделали это, теперь всё работает!). Здесь подписка и отписка на конкретный слушатель. Даже если их много одинаковых, отписывается нужный для нас:
1) Как выше правильно написал Антон, создаём сервис. Туда выносим "слушателей", да и вообще всё по сокетам. На остальных страницах делать import { Socket } from 'ngx-socket-io' вообще не нужно)

// Это всё пишем в сервисе!
on(event_name) {
    return new Observable<any>(observer => {
        this.socket.on(event_name, (data) => {
            observer.next(data);
        });
    });
  }

// Это для отправки сообщений
  emit(address, message) {
    this.socket.emit(address, message)
  }

2) На страницах подключиться к сокету (подписаться и отписаться потом) можно вот так:

// Это всё пишем на странице
ngOnInit() {
   this.test_data = this.feedService.on("server-response").subscribe(data => {
      console.log('Слушатель работает! ', data)
   });
}

ngOnDestroy(){
    // При выходе со страницы отписка, сокет больше не работает.
    this.test_data.unsubscribe();
}

Готово! Ну и ещё один вариант, чтобы подписаться и отписаться БЕЗ сервиса в рамках одной страницы:

listener = (...args) => {
    console.log('req_list: ',args);
}
ngOnInit() {
    this.socket.on("test-delete-test-otvet", this.listener);
}
ngOnDestroy(){
    this.socket.removeListener("test-delete-test-otvet", this.listener);
}

[Антон Швец]

Денис Щербина, в твоем сервисе нет удаления слушателя в обсервабле, куда ты его дел? :)

[Антон Швец]

Денис Щербина,ngx-socket-io если используется, то в нем уже есть готовый метод для получения обсервабла, все ж в доке написано

[Денис Щербина]

Антон Швец, А как из другой страницы им воспользоваться?) Вот что понял я: объявляем его так через сервис, а вот так отписываемся:

// Подписка со страницы на сервис с сокетами
this.test_data = this.feedService.on("server-response").subscribe(data => { });
// Отписка на этой же странице:
this.test_data.unsubscribe();

В консоли больше не появляются сообщения с закрытой страницы, а на других всё продолжает работать, как и задумывал) Или так не правильно?)

Answer 2

[Alice]

Как ответил уже Антон Швец, достаточно лишь socket.removeListener('server-response')

Comments

[Денис Щербина]

Эта штука удаляет все слушатели с таким названием, я проверил на практике. На других страницах, этот слушатель тоже закроется, а нужно слушателя закрыть только на конкретной странице..