title: Receive WebSockets data from vuex and Vue-native-websocket plugin
body: <p>I am currently using the Quasar V1 framework which includes Vue and Vuex.
  Today I was looking at this plugin:
  <a href="https://www.npmjs.com/package/vue-native-websocket/v/2.0.6" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-native-websocket/v/2.0.6</a></p>
  
  <p>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.</p>
  
  <p>I have first installed vue-native-websocket via npm and created a boot file called src\boot\websocket.js</p>
  
  <p>via this command:</p>
  
  <pre><code>npm install vue-native-websocket --save
  </code></pre>
  
  <p>websocket.js</p>
  
  <pre><code>import VueNativeSock from 'vue-native-websocket';
  
  export default async ({ Vue }) =&gt; {
    Vue.use(VueNativeSock, 'wss://echo.websocket.org', {
      reconnection: true,
      reconnectionAttempts: 5,
      reconnectionDelay: 3000
    });
  };
  </code></pre>
  
  <p>In Quasar v1, I have then created a module called "websockets" in:</p>
  
  <pre><code>src\store\websockets
  </code></pre>
  
  <p>This module has:</p>
  
  <pre><code>actions.js
  getters.js
  index.js
  mutations.js
  state.js
  </code></pre>
  
  <p>I need to use the websocket with format: 'json' enabled</p>
  
  <p>My question is:</p>
  
  <p>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?</p>
  
  <p>Code for the module:
  websockets/mutations.js:</p>
  
  <pre><code>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></pre>
  
  <p>Code for the module:
  websockets/state.js</p>
  
  <pre><code>export default {
    socket: {
      isConnected: false,
      message: '',
      reconnectError: false
    }
  };
  </code></pre>
  
  <p>But the issue now is in my vue page.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>If I am correct with the above, how to subscribe to a channel and listen for events with this plugin please, any idea?</p>
  
  <p>If you had a very quick example, it would be great, thank you.</p>