求解WebSocket的使用问题？

Question

在vue项目中使用WebSocket，在utils.js中定义了WebSocket的连接，

import base from './api/base'

const ws = new WebSocket(`ws://${base.webSocket}/socket`);

export default ws

在main.js中把文件引入绑定在vue的实例原型上；

import ws from './request/webSocket' // 导入api接口
Vue.prototype.ws = ws; // 将ws挂载到vue的原型上

然后想在所有的组件中直接通过 this.ws 使用WebSocket；
有以下疑问：

1. 在不同的页面的mounted中使用时 ws.readyState 的状态不太一样，有的是0，有的是1，

   switch (ws.readyState) {
           case WebSocket.CONNECTING:
             console.log('CONNECTING')
             // do something
             break;
           case WebSocket.OPEN:
             console.log('OPEN')
             ws.send(this.userInfo.userId);
             // do something
             break;
           case WebSocket.CLOSING:
             console.log('CLOSING')
             // do something
             break;
           case WebSocket.CLOSED:
             console.log('CLOSED')
             // do something
             break;
           default:
             // this never happens
             break;
         }

   所以有的是进不到 open 状态，发送不了消息，请问应该怎么处理呢？

2. 使用 open 的回调，在状态改变的时候触发不了回调吗？

   ws.addEventListener('open', function (event) {
           console.log('发送消息', data)
         });

3. 请问页面中想类似使用WebSocket实时接收后台消息应该是怎么思路？谢谢

Answer 1

建立连接是个异步过程.然后组件渲染也是个异步过程,所以有得组件渲染完ws还没连上,有得渲染完ws已经连上了,mounted只执行一次 执行的时候ws状态不一样 open的回调不知道你是放在那里的 如果是ws已经连上了 再去监听open也是触发不了的