在vue中使用WebSocket通信

        WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。很多人可能会问，我们不是已经有HTTP了吗？为什么还要推出websocket？万物产生必有因，HTTP请求有一个很大的缺陷，那就是，他只能由客户端发起通信，WebSocket 的全双工通讯很好的弥补了这一缺陷。

        在websocket没有出现之前，很多网站为了获取实时数据，所用的技术都是 Ajax 轮询。由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。因为服务器可以在数据有更新的时候主动的把数据发送给客户端，这样就避免了客户端轮询。

ok! talk is cheap, show you the code

<template>
  <div>正在识别:{{name}}</div>
</template>
<script>
export default {
  data() {
    return {
      websocket: null,
      timer: 0,
      name: "" 
    };
  },
  methods: {
    //webscoket 初始化
    initWebSocket() {
      const wsurl = "wss://www.kaycee.com/wss/test"; //ws 相当于http 而wss 相当于https 
      this.websocket = new WebSocket(wsurl); //实例对象
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onclose = this.websocketclose;
    },
    //连接建立
    websocketonopen() {
      console.log("连接建立成功");
      this.timer = setInterval(() => {
        this.doSend();
      }, 3600 * 1000);
    },

    //websocket心跳  防连接超时  WebSocket规定在一定时间内没有数据交互，就会自动断开
    doSend() {
      var time = Date.parse(new Date()); //当前时间戳
      let data = {
        time
      };
      data = JSON.stringify(data);
      this.websocket.send(data);
    },

    //发送数据
    websocketsend() {
      console.log("向后端发送数据");
      var time = Date.parse(new Date()); //当前时间戳
      let data = {
        time
      };
      data = JSON.stringify(data); //websocket只能传字符串数据
      this.websocket.send(data); //发送数据，传什么数据由实际需求决定
    },
    //数据接收
    websocketonmessage(e) {
      console.log("接收后端返回数据", e);
      var res = JSON.parse(e.data);
      if (res.result.code == 1) {
        this.name = res.stuInfo.name;
      } else {
        this.$message.error("出错啦");
      }
    },

    //连接建立失败重连
    websocketonerror() {
      this.initWebSocket();
    },
    //连接关闭
    websocketclose(e) {
      console.log("websocket断开连接", e);
    }
  },
  //vue生命周期创建后
  created() {
    this.initWebSocket();
  },
  //vue生命周期销毁后
  destroyed() {
    this.websocket.close(); //离开路由之后断开websocket连接
    clearInterval(this.timer); //把定时器清掉
  }
};
</script>

ps: 成长过程的简单记录，如有不恰当之处，欢迎指正！