создать экземпляр сокета из vuex - PullRequest
Новая
       17

создать экземпляр сокета из vuex

0 голосов
/ 20 января 2020

Я использую vue socket io для получения данных из сокета. Для получения данных я использую запрос как 

// ioinstance
import io from 'socket.io-client'
const restaurantId = localStorage.getItem('restaurant-id')
const socketUri = process.env.SOCKET_URI

export default io(socketUri, {
  transports: ['websocket'],
  query: `channel_id=restaurant-${restaurantId}`,
  reconnect: true,
  reconnectionDelay: 500,
  reconnectionDelayMax: 1000,
  pingInterval: 200

})

Здесь я получаю restaurantId после того, как я успешно вошел в панель и отправляю действие после успешного входа в систему как 

// from vuex module
import VueSocketio from 'vue-socket.io-extended'
import ioInstance from '../../socket-instance'
...
...
socketInitialize ({dispatch}) {
    let restaurantId = await localStorage.getItem('restaurant-id')
    if (restaurantId && restaurantId != null) {
      Vue.use(VueSocketio, ioInstance)
      this._vm.$socket.on(`restaurant-${restaurantId}`, (data) => {
        dispatch('socketIncoming', data)
      })
    }
  }

, но создание vue экземпляра не работает из действия socketInitialize , хотя создание экземпляра из vue компонента работает нормально 

// from component
import Vue from 'vue'
import VueSocketio from 'vue-socket.io'
import ioInstance from './socket-instance'
...
...
mounted () {
let restaurantId = await localStorage.getItem('restaurant-id')
if (restaurantId && restaurantId != null) {
    Vue.use(VueSocketio, ioInstance)
    this.$socket.on(`restaurant-${restaurantId}`, (data) => {
    this.$store.dispatch('socketIncoming', data)
    })
  }
}

Так как мне нужно передать restaurantId для экземпляра сокета, я не инициализировал его из файла main. js (он отображается первым, а restaurantId здесь недоступен, если не вошел в систему). Мне нужно несколько предложений, как я могу создать эту инициализацию после входа в систему и любой другой способ инициализации с использованием Vue .use или this._vm или (new Vue ()) или Vue .prototype

1 Ответ

1 голос
/ 21 января 2020

С Vue .use (плагин) :

Этот метод необходимо вызывать перед вызовом new Vue ()

Таким образом, вы должны сначала зарегистрировать плагин, а затем открыть соединение после того, как вы будете готовы. На этот вопрос уже дан ответ в разделе часто задаваемых вопросов из vue-socket.io-extended Как предотвратить соединение до тех пор, пока он не будет авторизован? .

В основном вы должны указать socket.io не открывать соединение при создании экземпляра через set autoConnect до false: 

const socket = io({
  autoConnect: false
})

Затем, когда вы будете готовы, вызовите открытую функцию: 

this.$socket.io.opts.query = `channel_id=restaurant-${restaurantId}`
this.$socket.open()
...