Правильно загрузите переменный порт-сокет в компоненте VueJS App.vue - PullRequest
Новая
       22

Правильно загрузите переменный порт-сокет в компоненте VueJS App.vue

0 голосов
/ 03 января 2019

У меня есть унаследованное веб-приложение VueJS, в котором нет ни веб-пакета, ни модульности веб-компонентов (файлы .vue) ... оно довольно монолитное.Чтобы распутать его, я хотел бы сначала начать с шаблонного приложения (которое у меня есть) .. Теперь моя проблема заключается в попытке загрузить собственный веб-сокет.

Я нашел https://github.com/nathantsoi/vue-native-websocket

и все казалось хорошо, пока я не понял, мне нужно извлечь правильный порт веб-сокета из вызова REST GET .. и я не могу понять, как правильнозапишите это событие, чтобы я мог присоединить сокет через

App.vue 

created: function() {
    SocketInfo.getPorts().then(
      ports => {
          console.log("created: ports returned")
          this.websockets_port = ports.websockets_port;
          var ws = new WebSocket('ws://localhost:'+this.websockets_port)
          ws.binaryType = "arraybuffer"

          Vue.use(VueNativeSock, ws_url, {reconnection: true, WebSocket: ws})

Кажется, 100% примеров там,У меня нет этой проблемы, и немедленно смонтируйте сокет внутри их main.js ... Должен ли я увеличить вызов GET и смонтировать там?

Идея # 1 - попытаться переместить создание экземпляра сокета вверх в main.js 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VTooltip from 'v-tooltip'
import SocketInfo from '@/services/SocketInfo'

Vue.use(VTooltip)

Vue.config.productionTip = false

SocketInfo.getPorts().then(
  ports => {
      console.log("created: ports returned")
      var ws_url = 'ws://localhost:'+ports.websockets_port
      var ws = new WebSocket(ws_url)
      ws.binaryType = "arraybuffer"
      Vue.use(VueNativeSock, ws_url, {reconnection: true, WebSocket: ws})
  })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

может показаться, что это может не работать, так как объект Vue будет вне моей области видимости?

...