访问 WebSocket 时出现 InvalidStateError

Posted 2023-02-16

【中文标题】访问 WebSocket 时出现 InvalidStateError

【英文标题】：InvalidStateError while accessing WebSocket

【发布时间】：2018-06-20 07:51:11

【问题描述】：

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

vue init webpack my-project

现在我想在页面呈现之前通过网络套接字发送一些信息。由于我不想将此逻辑与 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

【参考方案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 毫秒重新检查一次，直到它准备好。