Receive WebSockets data from vuex and Vue-native-websocket plugin

Question

I am currently using the Quasar V1 framework which includes Vue and Vuex. Today I was looking at this plugin: https://www.npmjs.com/package/vue-native-websocket/v/2.0.6

I am unsure on how to setup this plugin and make it work and would require a little bit of help to make sure I am doing this right as it will be the first time I use WebSockets with Vue.

I have first installed vue-native-websocket via npm and created a boot file called src\boot\websocket.js

via this command:

npm install vue-native-websocket --save

websocket.js

import VueNativeSock from 'vue-native-websocket';

export default async ({ Vue }) => {
  Vue.use(VueNativeSock, 'wss://echo.websocket.org', {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 3000
  });
};

In Quasar v1, I have then created a module called "websockets" in:

src\store\websockets

This module has:

actions.js
getters.js
index.js
mutations.js
state.js

I need to use the websocket with format: 'json' enabled

My question is:

Let's say I have a page where I would like my websocket connection to be created and receive the live data, shall I do this?

Code for the module: websockets/mutations.js:

export function SOCKET_ONOPEN (state, event) {
  let vm = this;
  vm.prototype.$socket = event.currentTarget;
  state.socket.isConnected = true;
}
export function SOCKET_ONCLOSE (state, event) {
  state.socket.isConnected = false;
}
export function SOCKET_ONERROR (state, event) {
  console.error(state, event);
}
// default handler called for all methods
export function SOCKET_ONMESSAGE (state, message) {
  state.socket.message = message;
}
// mutations for reconnect methods
export function SOCKET_RECONNECT (state, count) {
  console.info(state, count);
}
export function SOCKET_RECONNECT_ERROR (state) {
  state.socket.reconnectError = true;
}

Code for the module: websockets/state.js

export default {
  socket: {
    isConnected: false,
    message: '',
    reconnectError: false
  }
};

But the issue now is in my vue page.

Let's say I would like to show only the data from the websocket that has a specific event, how do I call this from the vue page itself please? I am very confused on this part of the plugin.

What is very important for me to understand if how to separate the receive and send data. ie: I may want to receive the list of many users or I may want to receive a list of all the news or I may add a new user to the database.

I keep hearing about channels and events and subscriptions...... From what I understand, you have to first subscribe to a channel(ie: wss://mywebsite.com/news), then listen for events, in this case I believe the events is simply the data flow from this channel).

If I am correct with the above, how to subscribe to a channel and listen for events with this plugin please, any idea?

If you had a very quick example, it would be great, thank you.

Answer 1

I have developed a chat application using Vue-native-websocket plugin. Here i am showing how you can register the pulgin in the vuex store and how to call it from your vue component.

Step 1: Define these methods in your index.js file

const connectWS = () => {
  vm.$connect()
}
const disconnectWS = () => {
  vm.$disconnect()
}

const sendMessageWS = (data) => {
  if (!Vue.prototype.$socket) {
    return
  }
  Vue.prototype.$socket.send(JSON.stringify(data))
}

Step 2: Write the socket state and mutations

SOCKET_ONOPEN (state, event) {
  if (!state.socket.isConnected) {
      Vue.prototype.$socket = event.currentTarget
      state.socket.isConnected = true
      let phone = state.config.selectedChatTicket.phone
      sendMessageWS({type: WSMessageTypes.HANDSHAKE, data: {id: window.ACCOUNT_INFO.accId, phone: phone, agentId: USER_NAME}})
    }
},
SOCKET_ONCLOSE (state, event) {
  console.log('SOCKET_ONCLOSE', state, event)
  state.socket.isConnected = false
  Vue.prototype.$socket = null
},

// NOTE: Here you are getting the message from the socket connection

SOCKET_ONMESSAGE (state, message) {   
 state.data.chatCollection = updateChatCollection(state.data.chatCollection,message)
},

STEP 3 : Write Action, you can call it from your vue component

NOTE:: socket actions to connect and disconnect

WSConnect ({commit, state}) {
  connectWS()
},
WSDisconnect ({commit, state}) {
  disconnectWS()
},

STEP 4: Register the plugin in the end as it requires the store object

Vue.use(VueNativeSock, `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://www.example.com/socketserver`,
  { store: store, format: 'json', connectManually: true })

STEP 5: call your action from your vue component

buttonClick (rowData) {        
   const tickCount = this.ticketClickCounter
   if (tickCount === 0) {
      this.$store.dispatch('WSConnect')
   } else {
      this.$store.dispatch('WSDisconnect')
       setTimeout(() => {
          this.$store.dispatch('WSConnect')
        }, 1000)
    }
   this.ticketClickCounter = tickCount + 1
},

Now you are connected to the socket

STEP 6: write a action method in your vuex file

sendChatMessageAction ({commit, state}, data) {
      // NOTE: Here, you are sending the message through the socket connection
   sendMessageWS({
        type: WSMessageTypes.MESSAGE,
        data: {
          param1: abc,
          param2: xyz,
          param3: 123,
          param4: $$$
       }
   })
},

STEP 7: you can define a input text box and on-enter evenlisterner you can call the action method

onEnter (event) {        
 if (event.target.value !== '') {
    let newValue = {
        param1: Date.now(),
        param2: xyz,
        param3: 123,
     }
     this.$store.dispatch('sendChatMessageAction', newValue) // Action
  }
},