如何再vue中使用 WebSocket？

websockt 最大的優勢就是后端能夠向前端實時推送數據，而前端只需要一個監聽，就能夠實現數據的相應變化
<template>
  <div>
    <button @click="freeLowControl">彈出下控頁面</button>
    <!-- 下控彈框 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleCtl" width="30%">
      <div style="text-align:left">
        <p class="lineHeight">是否確認下控 ？</p>
        <p class="lineHeight">
          <p>日志信息：</p>
          <p style="color:red" v-html="record"></p>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCtl = false" size="mini">關 閉</el-button>
        <el-button type="primary" @click="saveControlSing" size="mini" :loading="loading" id="contrlBtn">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      soket: "",
      socktPath: "", //WebSocket地址,
      sendVal: "", //發送數據
      dialogVisibleCtl: false
    };
  },
  methods: {
    //初始化webSockt
    initWebsocket() {
      this.socktPath =
        window.$url_front.webSocketUrl + "/socketServer/" + JSON.parse(localStorage.userMsg).id;
      if (typeof WebSocket === "undefined") {
        alert("您的瀏覽器不支持socket");
      } else {
        // 實例化socket
        this.socket = new WebSocket(this.socktPath);
        //監聽socket連接;
        this.socket.onopen = this.open;
        // 監聽socket錯誤信息
        this.socket.onerror = this.error;
        // 監聽socket消息
        this.socket.onmessage = this.getMessage;
        // 關閉連接
        this.socket.onclose = this.close;
      }
    },
　　//websocket連接成功的回調方法
    open() {
      console.log("socket連接成功", this.socket);
　　  //每次連接成功，把上次交互所保存的信息給刪除掉,將loading設為false，允許操作；
      this.record = "";
　　　 this.loading = false;
　　　 //連接成功后，向后端發送數據
      this.sendData();
    },
　　//websocket連接失敗的回調方法
    error() {
      console.log("連接失敗.");
　　　　//設置record以及loading為true，不讓用戶繼續操作
      this.record = "ws連接失敗...";
　　　 this.loading = true;

   },
　　//websocket獲取數據的回調方法
    getMessage(msg) {
      this.record = msg.data;
      console.log("返回數據=========", msg);
    },
    sendData() {
      this.sendVal =
        "underControl;" + JSON.parse(localStorage.userMsg).id + ";" + String(new Date().getTime()); //前端和后端做一個約定，來確定發送數據的格式；非常關鍵
      this.sendTime = String(new Date().getTime());
      //發送數據
　　　//  this.socket.readyState : 一般情況 0代表連接成功 1代表失敗
      if (this.socket.readyState == 1) {
        this.socket.send(this.sendVal);
      }
    },
    freeLowControl() {
      this.dialogVisible = true;
　　　　this.initWebSocket()
    },
    //下控確定
    saveControlSing() {
      //socket.readyState 是否連接成功
      let contrlBtn = document.getElementById("contrlBtn");
      contrlBtn.innerHTML = "請求中...";
      this.loading = true;
      setTimeout(() => {
        if (this.socket.readyState == 1) {
          let pointArr = this.tablePoint.pointDataList;
          let pointList = [];
          pointArr.forEach(item => {
            let obj = {};
            obj.data_id = item.data_id;
            obj.value = item.lowControlVal;
            pointList.push(obj);
          });
          let parm = {
            token: this.token,
            points_values: JSON.stringify(pointList),
            wid: this.sendTime
          };
          api_lak.underControlByFree(qs.stringify(parm)).then(res => {
            if (res) {
              this.$emit("refreshDataSet", this.tablePoint.under_id);
　　　　　　　　　//成功后 設置loading為false 允許用戶的下次操作
                this.loading = false;
　　　　　　　　　 contrlBtn.innerHTML = "確定"; 
　　　　　　　　}
          });
        } else {
          this.$message({ message: "webSocket連接失敗", type: "error" });
          this.$emit("refreshDataSet", this.tablePoint.under_id);
        }
      }, 1000);
    }
  }
};
</script>