Как избавится от дублирования подписок на сокеты? Как использовать socket.io в SPA?

Question

[antimodern]

Простое Vue приложение. Два роута: на одном роуте происходит подписка

beforeMount () {
    socket.emit('subscribeToTimer', 1000)
    socket.on('timer', timestamp => {
      this.timestamp = timestamp
      this.countEvents++
    })
  }

Само соединение вынесено в App.vue, чтобы не дублировать в каждом компоненте его заново.

beforeMount () {
    console.log('socket work')
    socket.on('connect', () => {
      console.log('CONNECTION STATUS:', socket.connected)
      console.log('SOCKET:', socket.id)
    })
    socket.on('disconnect', () => {
      console.log('DISCONNECTION STATUS:', socket.disconnected)
    })
    socket.open()
  }

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

Как надо?

Comments

[Koteezy]

а сделать это в root , в хуке created например?

[antimodern]

Koteezy, что "это"?

[Koteezy]

antimodern, второй кусок кода

[antimodern]

Koteezy, он же в App.vue. Это не рут?

[Koteezy]

antimodern, рут, это где ты запускаешь приложение. Рут инстанция Vue, где ты еще указываешь элемент #app.

Answer 1

[grinat]

У тебя подписка должны быть тоже в одном месте, либо же ты должен после того как человек покидает роут отписываться.

Comments

[antimodern]

socket.off('timer')

Не помог. Как отписаться? Именно отписатся, а не закрыть соединение. Я не вижу в доке.

[antimodern]

socket.removeListener('timer')

Тоже самое. Больше ничего не гуглится

[grinat]

antimodern, тебе надо подписывать не анонимную функцию и при off ее передавать
socket.on('timer', this.myTimer)
socket.off('timer', this.myTimer)

[antimodern]

grinat, увы, это не решает проблемы

created () {
    console.log('SOCKET', socket.io)
    socket.emit('subscribeToTimer', 1000)
    socket.on('timer', this.timer)
  },
  beforeDestroy () {
    socket.off('timer', this.timer)
  },
  methods: {
    timer (timestamp) {
      console.log(timestamp)
      this.timestamp = timestamp
      this.countEvents++
    }
  }

[grinat]

antimodern, я щас глянул доки https://github.com/socketio/socket.io-client/blob/... там указано что это просто обертка над https://github.com/component/emitter#emitteronevent-fn а там написано что просто передача названия event'a и так удаляет всех слушателей, т.е. socket.off('timer') должен был сработать. У тебя косяк в другом месте.

[antimodern]

У меня нету никаких косяков, там 10 строчек кода. Видимо, процесс должен происходит иначе, не так как ты говоришь.

[Максим Тихонов]

Видимо косяк в том, что не стоит каждый раз вызывать подписку в beforeMount. Я бы покумекал над логикой.

[antimodern]

Максим Тихонов, т.е. мне надо самому хранить где-то список подписок и подписываться по условию? Это норм практика?

[Максим Тихонов]

antimodern, beforeMount выполняется при каждом заходе на роут. Поэтому нужен флаг, что подписка совершена, и если он не стоит, то подписываться.