vue-native-websockets integration
-
Hey,
I am trying to integrate vue-native-websockets with my Quasar app.
So far I am able to see the Tx and Rx messages without a vuex Store connected, and with the vanilla (non-json) format.
However, when creating a new, empty Store where all my websocket logic will reside, I get the following error in console:
Uncaught TypeError: this.store[n] is not a function at t.value (build.js?f845:1) at t.value (build.js?f845:1) at WebSocket.t.WebSocket.<computed> (build.js?f845:1)
I’m obviously doing something wrong, but I don’t see it. TBH, the readme for this plugin wasnt super clear - it gives a lot of code snippets, but not a clue as to where these should go.
I am loading the plugin in the vuex store index.js. The code for this and my empty store is below.
Where am I going wrong?
STORE/INDEX.JS
import Vue from 'vue' import Vuex from 'vuex' import VueNativeSock from 'vue-native-websocket' import clockbox from './store-clockbox' Vue.use(Vuex) Vue.use(VueNativeSock, 'ws://localhost:5000/ws', { store: clockbox, //format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000 }) export default function (/* { ssrContext } */) { const Store = new Vuex.Store({ modules: { clockbox }, // enable strict mode (adds overhead!) // for dev mode only strict: process.env.DEBUGGING }) return Store }
STORE/STORE-CLOCKBOX.JS
const state = { } const mutations = { } const actions = { } const getters = { } export default { namespaced: true, state, mutations, actions, getters }
Thank you,
BW[link text](link url) -
Take a good look at the boot files:
https://quasar.dev/quasar-cli/boot-filesBtw Quasar creates it’s own vuex store when you create a default app with Quasar CLI. I would use that one, see below.
In a boot file, you could try something like this( not tested):
// src/boot/myBooFile.js import VueNativeSock from 'vue-native-websocket' export default async ({ app, router, store, Vue }) => { Vue.use(VueNativeSock, 'ws://localhost:5000/ws', { store: store, //format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000 }) }
The code in STORE/INDEX.JS:
I think the default quasar store code will be fine.
-
Thanks for your comment. I will check into boot files.