crypto_okx/lib/common/static/instance_live.js

/**
 * embed 壳:SSE 收到后台 tick 后拉 JSON 快照更新 DOM,切换 tab 不再重复请求 HTML.
 * 另有可见性恢复 + SSE 断开时的轮询兜底,避免经 Nginx 几分钟后停刷.
 */
(function (global) {
  let liveEventSource = null;
  let liveReconnectTimer = null;
  let localLiveVersion = -1;
  let sseConnected = false;
  let refreshTimer = null;
  let fallbackTimer = null;
  let reconnectAttempt = 0;

  function isEmbedShell() {
    return document.body && document.body.getAttribute("data-embed-shell") === "1";
  }

  function currentTab() {
    if (global.InstanceEmbed && typeof global.InstanceEmbed.getTab === "function") {
      return global.InstanceEmbed.getTab();
    }
    return document.body.getAttribute("data-page") || "options";
  }

  function refreshTabData(tab, opts) {
    const options = opts || {};
    if (typeof global.refreshAccountSnapshot === "function") {
      global.refreshAccountSnapshot(options);
    }
    if (typeof global.refreshPriceSnapshotConditional === "function") {
      global.refreshPriceSnapshotConditional();
    }
    if (tab === "options" && global.OptionsPanelLive && typeof global.OptionsPanelLive.refreshSoft === "function") {
      global.OptionsPanelLive.refreshSoft(options);
    }
    if (tab === "hedge_plan" && global.HedgePlanLive && typeof global.HedgePlanLive.refreshSoft === "function") {
      global.HedgePlanLive.refreshSoft(options);
    }
  }

  function scheduleRefresh(opts) {
    if (refreshTimer) return;
    const options = opts || {};
    refreshTimer = setTimeout(function () {
      refreshTimer = null;
      if (document.hidden) return;
      refreshTabData(currentTab(), { silent: true, force: !!options.force });
    }, 80);
  }

  function onLiveEvent(data) {
    const reason = data && data.reason;
    const ver = Number(data && data.live_version) || 0;
    if (!ver) return;
    if (reason === "connect") {
      localLiveVersion = ver;
      scheduleRefresh();
      return;
    }
    if (ver === localLiveVersion) return;
    localLiveVersion = ver;
    scheduleRefresh({ force: reason === "balance" });
  }

  function closeLiveStream() {
    if (liveEventSource) {
      liveEventSource.close();
      liveEventSource = null;
    }
    if (liveReconnectTimer) {
      clearTimeout(liveReconnectTimer);
      liveReconnectTimer = null;
    }
    sseConnected = false;
  }

  function connectLiveStream() {
    if (!isEmbedShell()) return;
    closeLiveStream();
    liveEventSource = new EventSource("/api/instance/live/stream");
    liveEventSource.addEventListener("live", function (ev) {
      try {
        onLiveEvent(JSON.parse(ev.data || "{}"));
        reconnectAttempt = 0;
      } catch (_) {}
    });
    liveEventSource.onopen = function () {
      sseConnected = true;
      reconnectAttempt = 0;
    };
    liveEventSource.onerror = function () {
      sseConnected = false;
      closeLiveStream();
      reconnectAttempt += 1;
      var delay = Math.min(30000, 3000 + reconnectAttempt * 2000);
      liveReconnectTimer = setTimeout(function () {
        connectLiveStream();
      }, delay);
    };
  }

  function ensureFallbackPoll() {
    if (fallbackTimer) return;
    // SSE 正常时也做低频兜底;断开时依赖它持续刷新
    fallbackTimer = setInterval(function () {
      if (document.hidden) return;
      scheduleRefresh({ force: !sseConnected });
    }, sseConnected ? 20000 : 8000);
  }

  function startLive() {
    if (!isEmbedShell()) return;
    connectLiveStream();
    ensureFallbackPoll();
    document.addEventListener("visibilitychange", function () {
      if (document.hidden) return;
      if (!sseConnected) connectLiveStream();
      scheduleRefresh({ force: true });
    });
  }

  global.InstanceLive = {
    start: startLive,
    refreshTabData: refreshTabData,
    isConnected: function () {
      return sseConnected;
    },
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startLive);
  } else {
    startLive();
  }
})(typeof window !== "undefined" ? window : globalThis);