web-dev-qa-db-fra.com

Vuex et Websockets

Donc actuellement je travaille avec VueJS 2 et je suis très nouveau avec lui. Maintenant, je recevais de l'aide avec d'autres personnes, mais je suis toujours coincé.

Voici ce que je veux réaliser (exemple - étroitement lié à ce que je veux):

  1. J'ai une application NodeJS qui écoute sur WebSockets. L'application écoute les connexions via WebSocket et prendra les données JSON, avec une commande puis un objet de données avec tout le contenu nécessaire pour cette commande.

La commande par exemple pourrait être login, et les données être nom d'utilisateur et mot de passe. La fonction de connexion sur l'application NodeJS prendra alors ces données, fera ce dont elle a besoin, puis les renverra sur le socket, qu'elle ait réussi ou non, et peut-être inclure un ID et des informations utilisateur pour que Vuex puisse les récupérer et les placer dans état, pour le front-end de l'application à récupérer/utiliser.

Actuellement, j'utilise cette plaque de chaudière: https://github.com/SimulatedGREG/electron-vue

Ce qui m'a très bien servi de courbe d'apprentissage, car je voulais utiliser Vue et Vuex pour gérer mon application, puis utiliser WebSockets pour gérer les données vers et depuis le serveur de données.

Donc, si vous regardez le lien que j'ai envoyé dans app/src/renderer/(c'est là que le code principal est pour vue et vuex).

Un de mes amis a ajouté le code suivant pour moi à titre d'exemple et je suis coincé à essayer de le mettre dans vuex en tant qu'actions et mutations. Il a tout fait en un seul composant vue, donc je me bats sur la façon dont cela fonctionne avec vuex. Comme je veux pouvoir accéder à (l'exemple) l'action loginUser de n'importe où dans l'application (utilise itinéraires pour plusieurs pages/vues).

Donc, dans le 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>

Il s'agit du fichier mis à jour pour cela, puis ci-dessous est le code pour le 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>

Tout le reste n'est que la plaque de la chaudière que vous voyez, donc si quelqu'un est prêt à m'aider et à me donner quelques conseils de lecture qui expliquent cela ou autre chose? car je ne trouve malheureusement pas beaucoup d'informations à ce sujet.

node.jswebsocketelectronvuejs2vuex
10
Danny SMc

J'ai une application électronique qui utilise Vue et une prise Web pour plus d'informations et voici comment j'ai configuré la mienne.

J'ai défini un magasin qui crée et configure également le 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
    }
})

Cela expose mon magasin au niveau racine de mon Vue et me permet de transmettre des données aux composants, ou ce que vous avez. Le magasin gère toutes les informations entrantes à partir du Websocket.

Si vous souhaitez utiliser Vuex, vous pourriez faire essentiellement la même chose, où Vuex serait votre magasin et lorsque des messages arrivent sur le socket, vous les transmettez simplement à Vuex.

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

et configurez votre Vue et vos composants pour qu'ils fonctionnent avec Vuex comme vous le feriez habituellement.

11
Bert