Question

我有一个继承的VueJS Web应用程序，它不使用webpack也不使用任何web组件的模块化（.vue文件）..它非常单一。为了解开它，我想首先从一个模板应用程序开始（我有）。我现在的问题是，尝试加载本机Web套接字。

我发现了https://github.com/nathantsoi/vue-native-websocket

一切似乎都很好，直到我意识到，我需要从REST GET调用中检索适当的websocket端口..我无法弄清楚如何正确编写此事件，以便可以通过

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中。

想法＃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对象超出了我的范围，因此似乎无法正常工作？

在VueJS App.vue组件中正确加载可变端口套接字

0 个答案: