Vuex 和网络套接字

Question

所以目前我正在使用 VueJS 2，我对它还很陌生。现在我得到了一些其他人的帮助，但我仍然被困住了。

这是我想要实现的（示例 - 接近 link我想要的）：

我有一个监听 WebSocket 的 NodeJS 应用程序。该应用程序通过 WebSocket 侦听连接，并将获取 JSON 数据、一个命令，然后是一个包含该命令所需的任何内容的数据对象。

例如命令可以是登录，数据是用户名和密码。 NodeJS 应用程序上的登录功能然后将获取此数据，执行所需的操作，然后 return 通过套接字返回，无论是否成功，并且可能包含一个 ID 和一些用户信息供 Vuex 获取并置于其状态，以便应用程序的前端选择 up/use.

目前我正在使用这个样板：https://github.com/SimulatedGREG/electron-vue

这对我来说非常有用，因为我想使用 Vue 和 Vuex 来管理我的应用程序，然后使用 WebSockets 来管理进出数据服务器的数据。

因此，如果您查看我在 app/src/renderer/ 中发送的 link（这是用于 vue 和 vuex 的主要代码所在的位置）。

我的一个朋友为我添加了以下代码作为示例，我一直在尝试将它作为动作和突变放入 vuex 中。他把这一切都放在一个 vue 组件中，所以我正在努力研究它如何与 vuex 一起工作。因为我希望能够从应用程序中的任何位置访问（示例）loginUser 操作（对多个 pages/views 使用路由）。

所以在 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>

其他一切都只是你看到的样板，所以如果有人愿意帮助我并给我一些提示，告诉我阅读什么可以解释这个或其他什么？不幸的是我找不到太多关于它的信息。

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。

Vuex 和网络套接字

Vuex & Websockets

node.js

websocket

electron

vuejs2

vuex