node.js - nodejs - websocket javascript

Vuex y Websockets

Question

Actualmente estoy trabajando con VueJS 2 y soy muy nuevo con esto. Ahora estaba recibiendo ayuda con otras personas, pero todavía estoy atascado.

Esto es lo que quiero lograr (por ejemplo, muy relacionado con lo que quiero):

1. Tengo una aplicación NodeJS que escucha en WebSockets. La aplicación escucha las conexiones a través de WebSocket y tomará datos JSON, con un comando y luego un objeto de datos con cualquier contenido necesario para ese comando.

El comando, por ejemplo, podría ser inicio de sesión y los datos serían nombre de usuario y contraseña. La función de inicio de sesión en la aplicación NodeJS tomará esta información, hará lo que necesita y luego la devolverá a través del socket, si fue exitosa o no, y tal vez incluya una identificación y cierta información del usuario para que Vuex la recoja y la coloque en su estado, para el front-end de la aplicación para recoger / usar.

Actualmente estoy usando esta placa de caldera: https://github.com/SimulatedGREG/electron-vue

Lo que me ha servido muy bien como curva de aprendizaje, debido a que quiero usar Vue y Vuex para administrar mi aplicación y luego usar WebSockets para administrar datos hacia y desde el servidor de datos.

Entonces, si miran el enlace que envié en la aplicación / src / renderer / (aquí es donde el código principal es para vue y vuex).

Un amigo mío agregó el siguiente código para mí como ejemplo y estoy atrapado tratando de ponerlo en vuex como acciones y mutaciones. Lo hizo todo en un componente vue, así que estoy luchando sobre cómo funciona con vuex. Como deseo poder acceder a la acción (de ejemplo) loginUser desde cualquier lugar de la aplicación (usa rutas para varias páginas / vistas).

Entonces en 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>

Ese es el archivo actualizado para eso, y luego debajo está el código para 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>

Todo lo demás es solo la placa de la caldera que ves, así que si alguien está dispuesto a ayudarme y darme algunos consejos sobre qué leer, ¿eso explica esto o algo más? ya que no puedo encontrar mucha información desafortunadamente.

Answer 1

Tengo una aplicación de electrones que usa Vue y un websocket para obtener información y así es cómo configuro el mío.

Tengo una tienda definida que también realmente crea y configura el 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
    }
})

Esto expone mi tienda en el nivel raíz de mi Vue y me permite pasar datos a los componentes, o lo que sea. La tienda administra toda la información entrante del websocket.

Si quiere usar Vuex, podría hacer prácticamente lo mismo, donde Vuex sería su tienda y cuando los mensajes lleguen a través del zócalo, simplemente se los pasará a Vuex.

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

y configure su Vue y sus componentes para que trabajen con Vuex como lo haría normalmente.