筆記：前端與後臺互動

阿賀呀發表於2018-10-18
筆記前端

前端與後臺互動

由於最近和大牛聊天，所得一些感悟，寫下來，以勉勵自己

  • 互動方式

    • http請求（問答模式） 通過傳統的傳送請求接收相應，一問一答的模式獲得資料，主要負責傳遞引數，接收資料模版，渲染資料，對資料幾乎不操作

      • 輪詢（用於獲取最新的資料）
        • 對於資料的實時性有要求時，可以採用輪詢的方式，隔幾秒鐘傳送一次請求詢問後臺是否有最新的資料，如果接收到了最新的資料，便更新自己的檢視層（推薦）
        • 可以每次都請求後臺獲取最新的資料，查庫（行為），之後在前端判斷上次資料和這次接收資料是否一致，不一致便更新檢視
        • 每次請求後臺獲取最新資料，之後直接更新檢視（不推薦）
        • 注意
          • 需設定輪詢次數（最大輪詢值） 當輪詢100（假定值）次還未接收到最新的資料時，便可以將此條輪詢去除
          • 離開或銷燬頁面時需清理輪詢

    • websocket模式

      通過websocket進行伺服器長連線，伺服器端負責判斷是否有最新資料，當發現最新資料便向前端主動推送

      • 資料實時性

        由於是伺服器端推送的訊息，幾乎是事件發生便將資料推送給了前端

      • 鍵權

        由於是長連線，對於web端的資料來源需要強驗證，利用引數健全（地址+每次傳送訊息時攜帶資訊），如果攜帶的secret / key不正確時，伺服器端便主動中斷連線

      • 斷網重連

        由於受到網路或其他因素的影響，socket連線有時會中斷，這個時候需要被斷端主動傳送一次請求用於重新建立連線（onError、onClose）

        需要設定重新連線的次數，當超過limit時變將嘗試連線取消

      addWebsocket(token) {
    const URL = `wss://xxx.com`
    try {
      this.websocket = new WebSocket(`${URL}/monitor/real-time?token=${token}`)
      // this.websocket.binaryType = "arraybuffer";
      this.websocket.addEventListener('open', (event) => {
        this.isReconnect = true
        this.recTimes = 0
      })
      this.websocket.addEventListener('error', () => {
        if (this.recTimes < 3) {
            setTimeout(() => {
                this.addWebsocket(token)
            },1000)
           this.recTimes = this.recTimes + 1
        } else {
            this.isReconnect = false;
        }
       })
      this.websocket.addEventListener('close', () => {
        if (this.isReconnect) {
          if (this.recTimes < 59) {
            this.recTimes =  this.recTimes +1
            this.addWebsocket(token)
          } else {
            this.isReconnect = false;
          }
        }
      })
      this.websocket.addEventListener('message', this.handleMessage)
    } catch(e) {
      this.addWebsocket(token)
    }

複製程式碼

相關文章