Vue Socket.io-Extended это. $ Socket. $ Подписка не является функцией "после переключения страниц маршрутизатора

Question

У меня установлено простое Vue приложение, которое должно подключаться к nodeJS серверу с веб-сокетами.

Я использую socket.io-extended.

Я вставил соединение websocket в компонент с использованием документации. При обновлении страницы соединение работает без проблем. Тем не менее, когда я использую маршрутизатор vue для переключения страницы и затем обратно на страницу веб-сокета, я получаю следующее консольное сообщение:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: this.$socket.$subscribe is not a function"

found in

---> <Index> at src/components/Client/LiveDataDrink/Index.vue
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6340
patch @ vue.runtime.esm.js?2b0e:6559
Vue._update @ vue.runtime.esm.js?2b0e:3942
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
run @ vue.runtime.esm.js?2b0e:4548
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4304
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4396
update @ vue.runtime.esm.js?2b0e:4538
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2748
eval @ vue-router.esm.js?8c4f:2747
updateRoute @ vue-router.esm.js?8c4f:2174
eval @ vue-router.esm.js?8c4f:2037
eval @ vue-router.esm.js?8c4f:2159
step @ vue-router.esm.js?8c4f:1843
step @ vue-router.esm.js?8c4f:1850
runQueue @ vue-router.esm.js?8c4f:1854
eval @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1843
eval @ vue-router.esm.js?8c4f:1847
eval @ vue-router.esm.js?8c4f:2139
eval @ vue-router.esm.js?8c4f:1921
iterator @ vue-router.esm.js?8c4f:2120
step @ vue-router.esm.js?8c4f:1846
step @ vue-router.esm.js?8c4f:1850
step @ vue-router.esm.js?8c4f:1850
runQueue @ vue-router.esm.js?8c4f:1854
confirmTransition @ vue-router.esm.js?8c4f:2147
transitionTo @ vue-router.esm.js?8c4f:2034
push @ vue-router.esm.js?8c4f:2365
push @ vue-router.esm.js?8c4f:2782
handler @ vue-router.esm.js?8c4f:1066
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
Show 18 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: this.$socket.$subscribe is not a function
    at VueComponent.mounted (Index.vue?b484:23)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4213)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6559)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3942)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.run (vue.runtime.esm.js?2b0e:4548)

Answer 1

это работает со мной для Dynami c Слушатель:

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');