vue实现socket

<template>
  <div class="test">
    <el-input v-model="socketData" placeholder="请输入信息名称" clearable></el-input>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  export default {
    name: 'Test',
    data() {
      return {
        websock: null,
        socketData: '',
      }
    },
    created() {
      this.initWebSocket()
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket() {
        //初始化weosocket
        const wsuri = 'ws://10.1.6.94:12007/websocket/' + Cookies.get('userId')
        this.websock = new WebSocket(wsuri)
        this.websock.onmessage = this.websocketonmessage
        this.websock.onopen = this.websocketonopen
        this.websock.onerror = this.websocketonerror
        this.websock.onclose = this.websocketclose
      },
      websocketonopen() {
        //连接建立之后执行send方法发送数据
        let actions = { test: '12345' }
        this.websocketsend(JSON.stringify(actions))
      },
      websocketonerror() {
        //连接建立失败重连
        this.initWebSocket()
      },
      websocketonmessage(e) {
        //数据接收
        // var redata = e.data
        // redata = JSON.parse(redata)
        // console.log('接收数据')
        console.log(e.data)
        this.socketData += e.data
      },
      websocketsend(Data) {
        //数据发送
        this.websock.send(Data)
      },
      websocketclose(e) {
        //关闭
        console.log('断开连接', e)
      },
    },
  }
</script>
<style lang="less"></style>