Vuex & Websockets

в настоящее время я работаю с VueJS 2, и я очень новичок в этом. Теперь я получал некоторую помощь с некоторыми другими людьми, но я все еще застрял.

вот чего я хочу достичь (пример-тесно связан с тем, что я хочу):

  1. у меня есть приложение NodeJS, которое слушает WebSockets. Приложение прослушивает соединения через WebSocket и принимает данные JSON с помощью команды, а затем объект данных с любым контентом, необходимым для этого команда.

команда, например, может быть login, а данные-username и password. Функция входа в приложение NodeJS затем возьмет эти данные, сделает то, что ему нужно, а затем вернет его обратно через сокет, независимо от того, был ли он успешным или нет, и, возможно, включает идентификатор и некоторую информацию о пользователе для Vuex для пикапа и размещения в его состоянии, для переднего конца приложения, чтобы забрать/использовать.

В настоящее время я использую эту котельную плиту: https://github.com/SimulatedGREG/electron-vue

который служил мне очень хорошо, как кривая обучения, из-за того, что я хотел использовать Vue и Vuex для управления моим приложением, а затем использовать WebSockets для управления данными и с сервера данных.

Итак, если вы посмотрите на ссылку, которую я отправил в app/src/ renderer / (здесь основной код для vue и vuex).

мой друг добавил следующий код для меня примером, и я застрял, пытаясь получить его в vuex как действия и мутации. Он сделал все это в одном компоненте vue, поэтому я борюсь за то, как он работает с vuex. Поскольку я хочу иметь доступ к действию loginUser (пример) из любого места приложения (использует маршруты для нескольких страниц/представлений).

так и в 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>

это обновленный файл для этого, а затем Ниже приведен код для 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>

все остальное-это просто котельная плита, которую вы видите, поэтому, если кто-то готовы помочь мне и дать мне несколько советов о том, что читать, что объясняет это или что-то еще? поскольку я не могу найти много информации об этом, к сожалению.

8
electron node.js vuejs2 vuex websocket

1 ответов

у меня есть приложение electron, которое использует Vue и websocket для информации, и вот как я настроил свой.

у меня есть определенный магазин, который также фактически создает и настраивает websocket.

магазине.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

рендерер.js

import store from "./store"

new Vue({
    data:{
        store
    }
})

Это предоставляет мой магазин на корневом уровне моего Vue и позволяет мне передавать данные компонентам или что у вас есть. Магазин управляет всей входящей информацией из в проксировании.

Если вы хотите использовать Vuex, вы можете сделать то же самое, где Vuex будет вашим магазином, и когда сообщения приходят через сокет, вы просто передаете их Vuex.

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

и настройте Vue и компоненты для работы с Vuex, как обычно.

9