Vuex & websockets

Question

So, I am currently working with VueJS 2, and I am very new to this. Now I was getting some help with some other people, but I was still stuck.

Here is what I want to achieve (an example is closely related to what I want):

• I have a NodeJS application that listens for WebSockets. An application listens for connections through WebSocket and receives JSON data using a command, and then a data object with any content needed for this command.

For example, a command can be a login, and data can be a username and password. The NodeJS application login function then takes this data, does what they need, and then returns it back over the socket, whether it was successful or not, and possibly includes an identifier and some user information for Vuex to write and placing in it to enter / use the front end of the application.

I am currently using this boiler stove: https://github.com/SimulatedGREG/electron-vue

Which served me very well as a learning curve, because I wanted to use Vue and Vuex to control my application, and then use WebSockets to manage data on the data server and from the data server.

So, if you look at the link that I sent to app / src / renderer / (here is the main code for vue and vuex).

One of my friends added the following code as an example for me, and I'm stuck trying to turn it into vuex as actions and mutations. He did all this in one vue component, so I'm struggling with how he works with vuex. Since I want to have access to the loginUser action (example) from anywhere in the application (uses routes for multiple pages / views).

So in MyApp/app/src/renderer/components/LandingPageView.vue

<template>
  <div>
    <img src="./LandingPageView/assets/logo.png" alt="electron-vue">
    <h1>Welcome.</h1>
    <current-page></current-page>
    <websocket-output></websocket-output>
    <versions></versions>
    <links></links>
  </div>
</template>

<script>
  import CurrentPage from './LandingPageView/CurrentPage'
  import Links from './LandingPageView/Links'
  import Versions from './LandingPageView/Versions'
  import WebsocketOutput from './LandingPageView/WebsocketOutput'
  export default {
    components: {
      CurrentPage,
      Links,
      Versions,
      WebsocketOutput
    },
    name: 'landing-page'
  }
</script>

<style scoped>
  img {
    margin-top: -25px;
    width: 450px;
  }
</style>

This is the updated file for this, and then below is the code for MyApp/app/src/renderer/components/LandingPageView/WebsocketOutput.vue

<template>
  <div>
    <h2>Socket output:</h2>
    <p v-text="socket_out"></p>
  </div>
</template>

<script>
  var ws = require("nodejs-websocket")

  export default {
    data () {
      return {
        socket_out: "connecting to the websocket server..."
      }
    },
    mounted () {
      const parent = this
      var connection = ws.connect("ws://dannysmc.com:9999", {}, function (conn) {})
      connection.on("text", function (text) {
        console.log('Text received: ' + text)
        parent.socket_out = text
      })
      connection.on("connect", function () {
        connection.send('yo')
      })
    },
    created () {
      // Set $route values that are not preset during unit testing
      if (process.env.NODE_ENV === 'testing') {
        this.$route = {
          name: 'websocket-output',
          path: '/websocket-output'
        }
      }
    }
  }
</script>

<style scoped>
  code {
    background-color: rgba(46, 56, 76, .5);
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    padding: 3px 6px;
    margin: 0 3px;
    vertical-align: bottom;
  }

  p {
    line-height: 24px;
    color: red;
  }
</style>

Everything else is just the boiler stove that you see, so if someone wants to help me and give me some tips on what to read, what explains this or something else? since I can not find much information about him, unfortunately.

Answer 1

, Vue websocket , .

, websocket.

Store.js

const socket = require("socket-library") // Take your pick of socket libs

const mySocket = new socket(...)
mySocket.on("message", message => store.handleMessage(message))
...other handlers...

const store = {
    handleMessage(message){
        // do things with the message
    }
}

export default store

Renderer.js

import store from "./store"

new Vue({
    data:{
        store
    }
})

Vue . websocket.

Vuex, , Vuex , , Vuex.

mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))

Vue Vuex, .