WebSocket 액세스 중 InvalidStateError가 발생함

WebSocket 액세스 중 InvalidStateError가 발생함

vue-cli 도구를 사용하여 간단한 Vue 프로젝트를 구성했습니다.

vue init webpack my-project

이제 페이지가 렌더링되기 전에 웹 소켓을 통해 정보를 보내려고 합니다.이 로직을 Vue 컴포넌트에 관련짓지 않기 때문에 다른 js 파일(이름 지정)이 있습니다.ws.js이하에 근거합니다).

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 warn] :마운트 후크 전 오류: "InvalidStateError:사용할 수 없거나 더 이상 사용할 수 없는 개체를 사용하려고 했습니다."

에서 발견되다.

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

내가 뭘 잘못하고 있지?다른 이벤트청취자에게 접속해야 합니까?beforeMount()Web Socket 관련 행을 코멘트 아웃 하면, 에러가 사라집니다.

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

메시지를 보내기 전에 소켓에 글을 써야 하기 때문에 이 답변에 따라 소켓을 변경했습니다.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밀리초마다 다시 확인합니다.

언급URL : https://stackoverflow.com/questions/50943020/invalidstateerror-while-accessing-websocket