websocket（推送服務）初始化及實際專案運用

首先要知道http協議和websocket的區別

簡單來說，http是客戶端向服務端傳送請求，三次握手建立連結，請求一次就返回一次資料，
websocket是持久的連結，只需要建立連結後，後端有訊息更新可推送至客戶端，不需要客戶端再傳送請求。

專案中的運用

實際專案中，頁面需要利用websocket的推送，動態展示機器人頁面的告警資訊和執行狀態資訊。

效果：左上角選擇機器人後，頁面會先向後端介面獲取一次告警資訊，攝像機資訊，機器人位置狀態資訊的資料。後面通過websocket推送實時的告警資訊和位置狀態資訊，完成展示。

websocket的使用：

1.初始化websocket，methods中定義initWebSocket方法，這裡是在選擇機器人後去呼叫

initWebSocket(terminalId) {
  let url = window.webSocketList.robotStatusUrl + terminalId;    //window物件中存入的url（ws或者wss開頭）
  this.websock = new WebSocket(url);    //建立
  this.websock.onmessage = this.getMessage;  //監聽websocket更新（和後端連線成功後，有訊息更新會自動觸發）
  this.websock.onopen = this.open;    //監聽開啟
  this.websock.onerror = this.error;     //監聽失敗報錯
  this.websock.onclose = this.closeWebSocket;     //監聽關閉
},

2.定義監聽內需要執行的操作

getMessage(msg) {    //獲取message
  let res = JSON.parse(msg.data) || {};
  //獲取狀態資訊
  if (res.code == "robot_status") {
    let type = res.items[0].type;
    // 獲取數值,翻譯為狀態
    switch (type) {
      case 1:
        type = "batteryStatus";
        break;
      case 2:
        type = "communicateStatus";
        break;
      case 3:
        type = "ultrasoundStatus";
        break;
      case 4:
        type = "driveStatus";
        break;
    }
    //判斷有無value_unit欄位，  然後迴圈物件，給對應的狀態屬性賦值
    if (res.items[0].value_unit) {
      for (let item in this.robotStateInfo) {
        if ((item = type)) {
          this.robotStateInfo[item] = res.items[0].value_unit - 0;
        }
      }
    } else {
      for (let item in this.robotStateInfo) {
        if ((item = type)) {
          this.robotStateInfo[item] = res.items[0].value_unit - 0;
        }
      }
    }
  }
},
open() {
  console.log("連結成功");

  this.websock.send("");  //這裡呼叫socket中 .send()方法可以給服務端傳送資訊
},
error() {
  console.log("連結失敗");
},
closeWebSocket(e) {
  console.log("websocket關閉", e);
},

3.在路由銷燬之前關閉websocket

  beforeDestroy() {
    if (this.websock) {
      this.websock.close();
    } //離開路由之後斷開websocket連線
    console.log("銷燬了websocket");
  },

注意事項：

1.url地址，一般是ws或者wss開頭的地址，ws是不加密的，wss加密，類似於http和https，一定要確保地址正確（例：ws://192.168.40.174:8080/websocket/terminal_id_1）
2.頁面銷燬或者重新選擇機器人的時候，一定要先關閉websocket連線，否則會出現推送的還是之前機器人資訊的情況

															---------------------個人專案筆記