遊戲陪玩app開發，前端實現一個輪詢需要如何做？

背景

首先在遊戲陪玩app開發中大家肯定遇到過業務系統中需要實時獲取某個資料的狀態或者實時推送某個狀態到後端。
一般有幾種解決方案：

• 一種是使用websocket，可以讓遊戲陪玩app開發後端主動推送資料到前端；
• 還有一種是前端主動輪詢（可能還細分為長輪詢和短輪詢，這裡統一叫輪詢吧）。

而實際的遊戲陪玩app開發中為了多快好省的完成開發任務可能會更多的選擇輪詢來實現服務端實時方案。

輪詢遇到的坑

在古早的時候遇到一種情況就是遊戲陪玩app開發後端需要前端主動輪詢然後返回一個時間戳，把這個時間戳再攜帶傳送回後端，當時實現之後執行一段時間後總會出問題導致時間戳計算錯誤，最後排查是網路原因導致上一個請求未處理完下一個請求先處理造成攜帶的時間戳不是預期的資料，現在分析其原因應該是：

1、遊戲陪玩app開發前端實現使用的是setInterval，原理來講setInterval很適合間隔一段時間執行一次動作，但輪詢又比較特殊，輪詢的操作是一個非同步動作（ajax請求），所以受限制網路或者伺服器處理速度的原因不能保證在一定的時間間隔內前一個請求能返回，然後請求下一個請求。

2、後來知道了一個概念叫【電梯效應】（也可能理解的不對）大致的意思就是一個長期執行的電梯總有出錯的時候，而與使用setInterval這種總是預期能正常執行的情況是相違背的；還有一種解釋是日常我們做電梯會發現電梯通常不是先發的先到達，也類似於公交車先發的不一定先到。並且會出現同時到達的情況（對於服務來說這就是併發吧）

解決方案

針對上面分析得出的結論需要在遊戲陪玩app開發時採取對應的解決方案

1、首先放棄setIntervalapi使用setTimeout來進行延時設定，setTimeout相對於setInterval更好控制延時，並且再上一個請求返回後才開始下一個定時，這樣就可以控制遊戲陪玩app開發同一個客戶端輪詢是按順序發出的，如有跟順序強關聯的業務也不會出問題

2、應對第二個問題則需要動態的設定延遲時間比如以120秒為基準，每次的延時時間再加一個動態值120 + 40秒 或者 120 - 40秒的範圍內，這樣就可以最大限度的避免請求併發到達遊戲陪玩app開發伺服器的情況

3、同時在實現方法上可以充分利用新的語言特性Generator或者async/await來同步寫出輪詢程式碼，這裡更傾向於async/await實現，更易讀

實現程式碼

上面分析是可以通過setTimeout + async/await + 動態延時時間，當然這裡還需要注意一點就是輪詢上來需要先執行一次ajax查詢：

1、遊戲陪玩app開發第一步先有一個非同步查詢的方法，這裡使用promise來模擬一個非同步操作

const syncPromise = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve();
      }, 50);
    })
 }

2、定一個延時的promise

const timeoutPromise = (delayTime) => {
    return new Promise(resolve => {
        window.timeId = setTimeout(resolve, delayTime);
    })}

3、定義一個輪詢，遊戲陪玩app開發執行的非同步方法使用第一步定義的promise，延時使用上面定義的timeoutPromise方法

const pollFetch = async () => {
    while (true) {
    const pollingTime = 120 * 1000;
    const delayTime = pollingTime + (1000 * parseInt(Math.random() * 40, 10));     // 輪詢時間間隔
    try {
      await syncPromise();
      await timeoutPromise(delayTime);
    } catch (e) {
      await timeoutPromise(delayTime);
    }
  }}

以上就是遊戲陪玩app開發中整個的輪詢實現的方式，主要是利用了新的語言特性避免的巢狀回撥，同時定義動態延時時間，避免所有的輪詢同時到達伺服器請求的情況，當然這只是我在實際遇到問題後的改進版本，也有不成熟的地方，大家有什麼問題可以在評論區交流

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：