Vuex 및 웹소켓

Vuex 및 웹소켓

그래서 저는 현재 VueJs 2와 함께 작업하고 있으며, 매우 새로운 VueJs 2를 사용하고 있습니다.지금은 다른 사람들과 함께 도움을 받고 있지만, 여전히 꼼짝 못하고 있습니다.

달성하고 싶은 것은 다음과 같습니다(예: 원하는 것과 밀접하게 연계되어 있습니다).

1. WebSockets에서 수신하는 NodeJS 어플리케이션이 있습니다.응용 프로그램은 WebSocket을 통한 연결을 수신하고 명령을 사용하여 JSON 데이터를 가져온 다음 해당 명령에 필요한 콘텐츠를 포함하는 데이터 개체를 가져옵니다.

예를 들어 명령어는 login, 데이터는 사용자 이름 및 비밀번호입니다.그런 다음 NodeJS 애플리케이션의 로그인 함수는 이 데이터를 가져와 필요한 작업을 수행한 후 성공 여부에 관계없이 소켓을 통해 데이터를 반환합니다.또한 Vuex가 픽업하여 애플리케이션 프런트 엔드가 픽업/사용할 수 있도록 하기 위한 ID와 사용자 정보를 포함할 수도 있습니다.

현재 사용하고 있는 보일러 플레이트는 https://github.com/SimulatedGREG/electron-vue 입니다.

Vue와 Vuex를 사용하여 애플리케이션을 관리하고 WebSockets를 사용하여 데이터 서버 간에 데이터를 관리하고 싶었기 때문에 학습 곡선으로 활용했습니다.

app/src/renderer/ (이것이 vue와 vuex의 메인 코드입니다)로 보내드린 링크입니다.

내 친구가 예를 들어 다음과 같은 코드를 추가했는데, 나는 그것을 액션과 돌연변이로 vuex에 넣으려다 막혔다.그는 모든 것을 하나의 vue 컴포넌트로 만들었기 때문에 vuex에서의 동작에 어려움을 겪고 있습니다.어플리케이션의 임의의 장소에서 (예를 들어) login User 액션에 액세스 할 수 있도록 하고 싶기 때문에(복수의 페이지/뷰에 루트를 사용).

그래서...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>

다른 건 다 보일러 접시일 뿐인데, 혹시 저를 도와서 읽을 수 있는 힌트를 주신 분이 있다면 이것이나 다른 이유가 있나요?아쉽게도 정보를 많이 찾을 수 없어서요.

Vue를 사용하는 전자 어플리케이션과 정보용 웹 소켓을 사용하고 있습니다.이것이 광산 셋업 방법입니다.

실제로 웹 소켓을 만들고 설정하는 스토어가 정의되어 있습니다.

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의 루트 레벨에 저장소가 표시되며 컴포넌트 또는 기타 컴포넌트에 데이터를 전달할 수 있습니다.이 상점은 웹 소켓에서 들어오는 모든 정보를 관리합니다.

Vuex를 사용하고 싶다면 기본적으로 동일한 작업을 수행할 수 있습니다. Vuex는 스토어이며 소켓을 통해 메시지가 수신되면 Vuex에 메시지를 전달합니다.

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

Vue 및 컴포넌트를 Vue와 함께 정상적으로 동작하도록 설정합니다.

언급URL : https://stackoverflow.com/questions/44333164/vuex-websockets