vue-native-websockets integration

[BigWinston 0]

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)

[dobbel]

@bigwinston-0

Take a good look at the boot files:
https://quasar.dev/quasar-cli/boot-files

Btw 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.

[BigWinston 0]

Thanks for your comment. I will check into boot files.