webscoket在vue中用法

1创建webscoket对象

const ws=new WebSocket('ws://localhost:8000');

2给webscoket对象添加4个方法

 ws.addEventListener('open',this.handleWsOpen.bind(this),false)
 ws.addEventListener('close',this.handleWsClose.bind(this),false)
 ws.addEventListener('error',this.handleWsError.bind(this),false)
 ws.addEventListener('message',this.handleWsMessage.bind(this),false)

3.在methods里面定义4个方法

在handleWsMessage（）里面接收服务端广播出来的数据，并把数据转换成js对象保存到data里面

handleWsOpen(e){
      console.log('FE:WebSocket open',e)
    },
handleWsClose(e){
      console.log('FE:WebSocket close',e)
    },
handleWsError(e){
      console.log('FE:WebSocket error',e)
    },
handleWsMessage(e){
      const msgDate =JSON.parse(e.data)
      console.log('FE:WWebSocket message',msgDate)
      this.msgList.push(msgDate)
    }

4.通过.send方法把数据传输到服务端
传输的数据格式一般是json格式

ws.send(JSON.stringify({
        id:new Date().getDate(),
        user:this.username,
        dataTime:new Date().getDate(),
        msg:this.msg 
      }))