No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    vue-native-websockets integration

    Help
    2
    3
    611
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      BigWinston 0 last edited by 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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @BigWinston 0 last edited by

        @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.
        
        
        1 Reply Last reply Reply Quote 0
        • B
          BigWinston 0 last edited by

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post