web-dev-qa-db-ja.com

Vuex＆Websockets

現在、私はVueJS 2を使用しており、非常に新しいです。今、私は他の人たちといくつかの助けを得ていましたが、それでも立ち往生しています。

ここに私が達成したいものがあります（例-私が望むものに密接に関連しています）：

  1. WebSocketでリッスンするNodeJSアプリケーションがあります。アプリケーションはWebSocketを介して接続をリッスンし、コマンドと、そのコマンドに必要なコンテンツを含むデータオブジェクトを使用してJSONデータを取得します。

たとえば、コマンドはログインで、データはユーザー名とパスワードです。 NodeJSアプリケーションのログイン関数は、このデータを取得し、必要な処理を実行して、成功したかどうかに関係なく、ソケットを介してデータを返します。また、Vuexがピックアップして配置するためのIDとユーザー情報を含めることもできます。アプリケーションのフロントエンドが取得/使用する状態。

現在、このボイラープレートを使用しています： https://github.com/SimulatedGREG/electron-vue

VueとVuexを使用してアプリケーションを管理し、WebSocketsを使用してデータサーバーとの間のデータを管理する必要があるため、学習曲線として非常に役立ちました。

ですから、app/src/renderer /に送信したリンクを見ると（vue and vuex）のメインコードです）。

私の友人が次のコードを例として追加しましたが、アクションとミューテーションとしてvuexに入れようとしています。彼はすべてを1つの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>

他のすべては、あなたが見るボイラープレートにすぎません。ですから、誰かが私を助けて、これまたは他の何かを説明する何を読むべきかについてのヒントを教えてくれませんか？残念ながらそれに関する多くの情報を見つけることができないので。

node.jswebsocketelectronvuejs2vuex
10
Danny SMc

私は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
    }
})

これにより、myストアがmy Vueのルートレベルで公開され、コンポーネントやユーザーにデータを渡すことができます。ストアは、WebSocketからのすべての受信情報を管理します。

Vuexを使用したい場合は、Vuexが自分のストアであり、メッセージがソケットを介して受信されたときにVuexに渡すだけで、基本的に同じことを実行できます。

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

Vueおよびコンポーネントを、通常どおりVuexと連携するように設定します。

11
Bert