Signal R을 Vue.js 및 Vuex와 통합

Signal R을 Vue.js 및 Vuex와 통합

현재 vue-cli 웹 팩 템플릿을 기반으로 투표 앱 작업을 진행 중입니다.투표 상태를 일관성 있고 유지보수가 가능한 방식으로 저장하고 조작하고 싶기 때문에 vuex를 상태 관리에 사용할 예정입니다.프론트엔드와 백엔드 간의 상호작용은 웹소켓에 기반하고 있으며 이전 프로젝트에서 매우 우수하다는 것이 입증되었기 때문에 시그널러를 사용하고 싶습니다.vue.js는 처음이기 때문에 signalr, vuex 및 vue.js를 완벽하게 통합하는 방법에 대한 조언이 필요합니다.

시나리오에 대해 설명하겠습니다.

프론트엔드는 백엔드로부터 이벤트를 수신하여 투표 폴링이 활성화되어 선택된 답변을 수신할 수 있음을 인식합니다.일정 시간이 지나면 프런트엔드에 결과를 사용할 수 있음을 알리고 사용자에게 결과를 표시합니다.경우에 따라서는 다른 투표용지를 개설할 수도 있습니다.문서가 숨겨졌을 때 연결을 끊을 수 있는 것이 중요합니다(페이지 가시성 API).

델의 솔루션 어프로치:

일반적으로 저는 특별한 신호를 구현하고 싶습니다.서비스를 제공합니다.이 서비스는 웹소켓을 통한 메시지 송수신뿐만 아니라 연결 설정도 담당합니다.공통 모듈에서 vuex 스토어를 변경할 수 없기 때문에 vuex 플러그인이 적합하다는 것을 알게 되었습니다.vuex 플러그인이 signalr를 랩해야 합니다.

Voting Start Event를 수신하면 해당 질문을 잠금 해제하여 사용자에게 표시합니다.사용자가 해당 질문에 대답한 경우 이 질문의 새로운 상태(응답)를 vuex 저장소에 커밋합니다.플러그인 내에는 돌연변이에 대한 구독이 있으며 이 구독을 사용하여 백엔드로 투표를 전송합니다.다음 스니펫은 이 아이디어를 나타내고 있습니다.

var plugin = (store) => {
  // ...
  store.subscribe((mutation, state) => {
    console.log('inside subscription');
    // if vote has answered state, call connection.send() to submit the message to the backend
  });

  connection.received((message) => {
    // ...
    var event = parseEvent(message);
    if (event.type === START) {
      store.commit({type: 'voting', item: 'unlocked'});
    }
    // ...
  });
}

이 접근방식은 좋은 것입니까, 아니면 개선의 여지가 있다고 생각하십니까?

플러그인이나 다음과 같은 구조는 필요 없습니다.Vue.prototype.$pusher = new Pusher('apiKey')컴포넌트 간에 공유할 필요가 있는 다른 값과 마찬가지로 Pusher 인스턴스를 보유하고 있습니다.그리고 Vue 인스턴스 메서드에서 Pusher를 초기화합니다.create다른 라이브러리와 마찬가지로 먼저 초기화해야 합니다.각 인스턴스마다 고유하기 때문에 거래 데이터를 컴포넌트 인스턴스 자체에 의도적으로 보관하고 있습니다.필요한 것은 아니고 보관 장소만 있어야 합니다.

var store = new Vuex.Store({
  state: {
    pusher: null
  },
  mutations: {
    saveInstance(state, instance) {
      state.pusher = instance
    }
  },
  actions: {
    initializePusher ({commit}, apiKey) {
      commit('saveInstance', new Pusher(apiKey))
    }
  }
})

Vue.component('live-price', {
  template: '#live-price',
  props: ['pair'],
  data () {
    return {
      price: 'wait for next trade...',
      channel: null
    }
  },
  created () {
    this.channel = this.$store.state.pusher.subscribe('live_trades_' + this.pair)
    this.channel.bind('trade', data => this.price = data.price)
  }
})

new Vue({
  el: '#app',
  store,
  created () {
    this.$store.dispatch('initializePusher', 'de504dc5763aeef9ff52')
  }
})

[v-cloak] { display: none }

<div id="app">
  <live-price pair="btceur">BITCOIN price in EUR:</live-price>
  <live-price pair="ltceur">LITECOIN price in EUR:</live-price>
  <live-price pair="etheur">ETHEREUM price in EUR:</live-price>
  <live-price pair="xrpeur">RIPPLE price in EUR:</live-price>
</div>

<template id="live-price">
  <p>
    <slot></slot>
    <span v-cloak>{{ price }}</span>
  </p>
</template>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>

언급URL : https://stackoverflow.com/questions/47160360/integrate-signalr-with-vue-js-and-vuex