Question

我已经使用vue-cli工具配置了一个简单的Vue项目：

vue init webpack my-project

现在，我想在呈现页面之前通过Web套接字发送一些信息。由于我不想将此逻辑绑定到Vue组件，因此我有一个不同的js文件（名为ws.js，基于this）：

import Vue from 'vue'

const websocket = new WebSocket('ws://localhost:1234')

const emitter = new Vue({
  name: 'emitter',
  methods: {
    send (message) {
      websocket.send(JSON.stringify(message))
    }
  }
})

export default emitter

页面加载后，我使用emitter对象发送一些信息：

<template>
    <div class="hello">
      TEST
    </div>
</template>

<script>
import emitter from '../ws/ws'
export default {
  name: 'HelloWorld',
  beforeMount () {
    emitter.send('Hello')
  }
}
</script>

我在Firefox控制台中收到此错误：

[Vue警告]：beforeMount挂钩中出现错误：“ InvalidStateError：尝试   被设计为使用无法使用或不再可用的对象。

位于

--->在src / components / HelloWorld.vue           在src / App.vue

我在做什么错？我应该附加到其他事件侦听器而不是beforeMount()吗？如果我注释掉与WebSocket相关的行，则错误消失：

import Vue from 'vue'

// const websocket = new WebSocket('ws://localhost:1234')

const emitter = new Vue({
  name: 'emitter',
  methods: {
    send (message) {
      // websocket.send(message)
    }
  }
})

export default emitter

Answer 1

在发送任何消息之前，我需要先为套接字编写状态，然后再发送任何消息，因此based in this answer已将ws.js更改为此：

import Vue from 'vue'

const websocket = new WebSocket('ws://localhost:1234')

// Make the function wait until the connection is made...
function waitForSocketConnection (socket, callback) {
  setTimeout(
    function () {
      if (socket.readyState === 1) {
        console.log('Connection is made')
        if (callback != null) {
          callback()
        }
      } else {
        console.log('wait for connection...')
        waitForSocketConnection(socket, callback)
      }
    }, 5) // wait 5 milisecond for the connection...
}

function sendWaiting (msg) {
  waitForSocketConnection(websocket, () => {
    console.log('Sending ' + msg)
    websocket.send(msg)
    console.log('Sent ' + msg)
  })
}

const emitter = new Vue({
  name: 'emitter',
  methods: {
    send (message) {
      sendWaiting(message)
    }
  }
})

export default emitter

现在，在发送任何消息之前，应用程序将检查WebSocket是否准备就绪并发送，否则它将每5毫秒重新检查一次，直到它就绪为止。

访问WebSocket时发生InvalidStateError

1 个答案: