Интегрировать SignalR с Vue.js и Vuex

В настоящее время мы работаем над приложением для голосования на основе шаблона веб-пакета vue-cli. Так как мы хотим хранить и манипулировать нашим состоянием голосования последовательным и поддерживаемым образом, мы намерены использовать vuex для управления состоянием. Взаимодействие между веб-интерфейсом и внутренним интерфейсом основано на веб-сокетах, и мы хотим использовать сигнализатор, поскольку это было очень хорошо доказано в предыдущих проектах. В связи с тем, что мы новички в vue.js, нам нужен совет, как идеально объединить signalr, vuex и vue.js.

Давайте опишем сценарий:

Интерфейс получает событие от нашего бэкэнда, чтобы узнать, что опрос голосования активен и может получать выбранные ответы. Через некоторое время мы сообщаем интерфейсу, что результаты доступны, и показываем их пользователю. В некоторых случаях мы можем открыть еще один опрос. Важно, чтобы мы могли отключиться, если документ будет скрыт (видимость страницы api).

Наш подход к решению:

В общем, я хотел бы реализовать специальный сигнал.сервис для этих целей. Этот сервис отвечает за установление соединения, а также за отправку и получение сообщений через веб-сокеты. Поскольку мы не можем внести какие-либо изменения в хранилище vuex из общего модуля, мы выяснили, что плагин vuex подойдет. Плагин vuex должен обернуть сигнализатор.

Если мы получим VotingStartEvent , мы разблокируем соответствующий вопрос и отобразим его пользователю. Если пользователь ответил на этот вопрос, мы передадим новое состояние этого вопроса (ответили) в хранилище 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'});
    }
    // ...
  });
}

Этот подход хорош или вы видите какие-либо возможности для улучшения?

7 голосов | спросил jimmy 7 22017vEurope/Moscow11bEurope/MoscowTue, 07 Nov 2017 17:28:30 +0300 2017, 17:28:30

1 ответ


0

Нет необходимости в плагинах или конструкциях, подобных Vue.prototype.$pusher = new Pusher('apiKey'). Я держу экземпляр Pusher как любое другое значение, которое мне нужно разделить между компонентами. И я инициализирую метод экземпляра Pusher in Vue 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/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
ответил 7 22017vEurope/Moscow11bEurope/MoscowTue, 07 Nov 2017 19:33:22 +0300 2017, 19:33:22

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132