利用localstorage實現本地訊息快取

houyhea發表於2019-03-04
快取

公司的一款即時通訊web產品，之前設計的架構是聊天訊息定期從IM伺服器獲取，這會導致如果使用者重新整理頁面，會丟失最近的聊天對話訊息。由於之前定時間隔在分鐘級別，所以問題不是很明顯。最近由於種種原因，訊息同步間隔變長到小時級別，從而將訊息丟失的問題凸顯出來，工單不斷。

設計思路

採用localstorage實現web端本地訊息快取是這次設計的主體思路。因為產品對低版本瀏覽器預設不支援，因此也就不需要考慮瀏覽器的相容性問題。關於localstorage的介紹請參見(developer.mozilla.org/zh-CN/docs/…);

  1. 進入頁面，檢查一下本地快取的粉絲訊息是否過期，如果過期，則清除。以粉絲為單位；
  2. 點選某個粉絲，從伺服器獲取20條歷史訊息。獲取該粉絲本地快取訊息，兩者以最新時間對比，如果伺服器是最新的，就清除該粉絲本地快取，並且同步本地快取。如果本地最新，則採用本地快取。其考慮的主要目的是考慮到當前離下一次伺服器同步很近，且使用者又在其他電腦上與該粉絲聊過的場景，保證最快更新到本地快取；
  3. 主動傳送和接收到的聊天訊息，push到該粉絲對應的本地佇列。（檢查訊息條數封裝在內部實現）；
  4. 客服關閉該粉絲，或重新整理了本頁面。當再次切換到該粉絲時，重複步驟 1 ；

評估：

locastorage的最大配額各瀏覽器基本是5MB。以下的計算都是估算，大致認為1KB=1000byte，1MB=1000KB。實際是以1024 換算。這裡只估算。
如果需要快取50個粉絲，那麼每個粉絲分配的空間：5MB/50=0.1MB=100KB；
假設一個訊息100位元組（1個英文字元佔1個位元組，漢字屬於雙位元組，佔兩個位元組）。那麼每個粉絲可以快取訊息數：100KB/100byte=100 * 1000/100=1000 條

定義配置引數：

  1. fansLimit：50；快取的粉絲個數
  2. msgLimit：100；快取的粉絲訊息條數；
  3. expired：1000 60 60 * 2；快取有效時間，單位：ms；

快取格式：

  1. 在localStorage上定義個快取變數：msgCache。裡面儲存的每個欄位對應一個粉絲的快取；
  2. 以粉絲的id為key，{{fansid}}，值為物件。例如：{time:122222222,msgs:[{msg}]}
    1. fansid：粉絲的id；
    2. time：最新的活躍時間。每次新增快取的時候同步更新.存毫秒值格式；
    3. msgs：快取粉絲的具體業務資料陣列，每一項代表一條訊息，訊息的格式參見業務訊息object即可。

檢查內容：

  1. 粉絲訊息過期檢查（A），檢查粉絲的最新活動時間是否超過設定的過期時長，超過則remove該粉絲快取；
  2. 粉絲訊息條數檢查(B)，檢查改粉絲條數如果超過限制，刪除最早的訊息，直接用佇列，先進先出;
  3. 刪除粉絲快取（C）；直接刪除粉絲快取

快取檢測時機：

  1. 頁面載入時遍歷粉絲快取，執行A；
  2. 讀取localstorage的時候，執行A；
  3. 設定粉絲訊息快取的時候，執行B；（這裡可以不用執行A）
  4. 設定快取出現異常（quotaExceedError，表示超過localstorage最大限制），執行C；

總結

  1. 關於快取超出最大配額的處理比較粗糙，可以考慮設計一種動態擴容的方案；
  2. 如果使用者在聊天過程中更換了電腦，瀏覽器產品，還是會有訊息丟失的情況；
  3. 最根本的解決方案，還是由服務端實時儲存聊天訊息記錄。

相關文章