From f4f0af576acef47d2182efd7a20e194e1a34ebcf Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 9 May 2026 17:30:31 +0200
Subject: [PATCH] feat(ws): live updates on inbounds/xray/nodes pages, drop
 polling + manual refresh

Replaces the legacy polling + manual-refresh model with WebSocket pushes
across the three live-data pages. The hub already broadcast traffic /
client_stats / outbounds; this wires the frontend to consume them and
adds a new `nodes` channel for the heartbeat job's snapshot.

Frontend
- new useWebSocket composable: page-scoped singleton WebSocketClient,
  lifecycle-managed on/off, leaves disconnect to page-unload
- inbounds: useInbounds gains applyTrafficEvent / applyClientStatsEvent
  / applyInvalidate that merge counters and online/lastOnline in place;
  InboundsPage subscribes; InboundList drops the auto-refresh popover,
  the refresh button, and the now-unused refreshing prop
- xray outbounds: useXraySetting gains applyOutboundsEvent; XrayPage
  subscribes; OutboundsTab drops the refresh button + emit
- nodes: useNodes gains applyNodesEvent and stops the 5s
  setInterval/visibilitychange polling; NodesPage subscribes;
  NodeList drops the refresh button and ReloadOutlined import

Backend
- web/websocket: new MessageTypeNodes + BroadcastNodes notifier
- node_heartbeat_job: after wg.Wait(), reload the table once and
  BroadcastNodes(updated). Gated on websocket.HasClients() so a panel
  with no open browser doesn't spend the DB read

Bug fixes spotted in this pass
- websocket.js #buildUrl defaulted basePath to '' when the global was
  missing (dev mode), producing `ws://host:portws` and a SyntaxError
  on the WebSocket constructor. Fall back to '/' and ensure leading
  slash.
- vite.config.js: forward /ws to ws://localhost:2053 with ws:true so
  dev (5173) reaches the Go backend's WebSocket
- NodeFormModal: a-input-password's visibilityToggle is Boolean in
  AntD Vue 4; the v3-era object form (`{ visible, 'onUpdate:visible' }`)
  triggered a Vue prop-type warning. Drop the override (default true
  shows the eye icon and toggles internally) and remove the orphaned
  tokenVisible ref

Translations
- pages.inbounds.autoRefresh / autoRefreshInterval: removed from all
  13 locales (UI gone)
- pages.nodes.refresh: removed from all 13 locales (UI gone)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/api/websocket.js                |  10 +-
 frontend/src/composables/useWebSocket.js     |  48 ++++++++
 frontend/src/pages/inbounds/InboundList.vue  |  73 +-----------
 frontend/src/pages/inbounds/InboundsPage.vue |  17 ++-
 frontend/src/pages/inbounds/useInbounds.js   | 110 ++++++++++++++++++-
 frontend/src/pages/nodes/NodeFormModal.vue   |   3 -
 frontend/src/pages/nodes/NodeList.vue        |  16 +--
 frontend/src/pages/nodes/NodesPage.vue       |   7 +-
 frontend/src/pages/nodes/useNodes.js         |  58 ++++------
 frontend/src/pages/xray/OutboundsTab.vue     |  36 ++----
 frontend/src/pages/xray/XrayPage.vue         |   7 +-
 frontend/src/pages/xray/useXraySetting.js    |   8 ++
 frontend/vite.config.js                      |  25 +++--
 web/job/node_heartbeat_job.go                |  15 +++
 web/translation/ar-EG.json                   |   3 -
 web/translation/en-US.json                   |   3 -
 web/translation/es-ES.json                   |   3 -
 web/translation/fa-IR.json                   |   3 -
 web/translation/id-ID.json                   |   3 -
 web/translation/ja-JP.json                   |   3 -
 web/translation/pt-BR.json                   |   3 -
 web/translation/ru-RU.json                   |   3 -
 web/translation/tr-TR.json                   |   3 -
 web/translation/uk-UA.json                   |   3 -
 web/translation/vi-VN.json                   |   3 -
 web/translation/zh-CN.json                   |   3 -
 web/translation/zh-TW.json                   |   3 -
 web/websocket/hub.go                         |   1 +
 web/websocket/notifier.go                    |   9 ++
 29 files changed, 275 insertions(+), 207 deletions(-)
 create mode 100644 frontend/src/composables/useWebSocket.js

diff --git a/frontend/src/api/websocket.js b/frontend/src/api/websocket.js
index 92c32e77..5076e53e 100644
--- a/frontend/src/api/websocket.js
+++ b/frontend/src/api/websocket.js
@@ -140,8 +140,14 @@ export class WebSocketClient {
 
   #buildUrl() {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    let basePath = this.basePath || '';
-    if (basePath && !basePath.endsWith('/')) basePath += '/';
+    // basePath comes from window.__X_UI_BASE_PATH__ which is only injected
+    // by the Go binary in production. In dev (Vite serves directly) the
+    // global is missing and basePath would be '' — without the fallback to
+    // '/' we'd build `ws://host:portws` (no separator) and the WebSocket
+    // constructor throws a SyntaxError.
+    let basePath = this.basePath || '/';
+    if (!basePath.startsWith('/')) basePath = '/' + basePath;
+    if (!basePath.endsWith('/')) basePath += '/';
     return `${protocol}//${window.location.host}${basePath}ws`;
   }
 
diff --git a/frontend/src/composables/useWebSocket.js b/frontend/src/composables/useWebSocket.js
new file mode 100644
index 00000000..a4810d21
--- /dev/null
+++ b/frontend/src/composables/useWebSocket.js
@@ -0,0 +1,48 @@
+import { onBeforeUnmount, onMounted } from 'vue';
+import { WebSocketClient } from '@/api/websocket.js';
+
+// One client per browser tab (= per multi-page entry). WebSocketClient is
+// idempotent: repeated connect() calls while the socket is already open
+// are no-ops, so multiple components on the same page can share a single
+// underlying connection without each spawning their own.
+let sharedClient = null;
+
+function getSharedClient() {
+  if (sharedClient) return sharedClient;
+  const basePath = (typeof window !== 'undefined' && window.__X_UI_BASE_PATH__) || '';
+  sharedClient = new WebSocketClient(basePath);
+  return sharedClient;
+}
+
+// useWebSocket lets a Vue component subscribe to live server-pushed
+// events. Pass a map of { eventName: handler } and the composable wires
+// connect()/disconnect() into the component lifecycle and unsubscribes
+// every handler on unmount so a stale closure can't fire after the
+// page has moved on.
+//
+// Example:
+//   useWebSocket({
+//     traffic: (payload) => applyTrafficEvent(payload),
+//     client_stats: (payload) => applyClientStatsEvent(payload),
+//     invalidate: ({ dataType }) => { if (dataType === 'inbounds') refresh(); },
+//   });
+//
+// Built-in lifecycle events ('connected' / 'disconnected' / 'error')
+// can be subscribed to alongside server-emitted types.
+export function useWebSocket(handlers) {
+  const client = getSharedClient();
+  const entries = Object.entries(handlers || {});
+
+  onMounted(() => {
+    for (const [event, fn] of entries) client.on(event, fn);
+    client.connect();
+  });
+
+  onBeforeUnmount(() => {
+    for (const [event, fn] of entries) client.off(event, fn);
+    // Don't disconnect — another mounted component on the same page may
+    // still be subscribed. The client closes naturally on page unload.
+  });
+
+  return { client };
+}
diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
index f473dd33..09b583d6 100644
--- a/frontend/src/pages/inbounds/InboundList.vue
+++ b/frontend/src/pages/inbounds/InboundList.vue
@@ -1,11 +1,9 @@
 <script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
   PlusOutlined,
   MenuOutlined,
-  SyncOutlined,
-  DownOutlined,
   SearchOutlined,
   FilterOutlined,
   MoreOutlined,
@@ -41,7 +39,6 @@ const props = defineProps({
   clientCount: { type: Object, required: true },
   onlineClients: { type: Array, required: true },
   lastOnlineMap: { type: Object, default: () => ({}) },
-  refreshing: { type: Boolean, default: false },
   expireDiff: { type: Number, default: 0 },
   trafficDiff: { type: Number, default: 0 },
   pageSize: { type: Number, default: 0 },
@@ -72,35 +69,6 @@ const enableFilter = ref(false);
 const searchKey = ref('');
 const filterBy = ref('');
 
-// Auto-refresh — same defaults as legacy (5s, opt-in via switch).
-const isRefreshEnabled = ref(localStorage.getItem('isRefreshEnabled') === 'true');
-const refreshIntervalMs = ref(Number(localStorage.getItem('refreshInterval')) || 5000);
-
-let timer = null;
-function startAutoRefresh() {
-  stopAutoRefresh();
-  timer = setInterval(() => emit('refresh'), refreshIntervalMs.value);
-}
-function stopAutoRefresh() {
-  if (timer != null) {
-    clearInterval(timer);
-    timer = null;
-  }
-}
-watch(isRefreshEnabled, (next) => {
-  localStorage.setItem('isRefreshEnabled', String(next));
-  if (next) startAutoRefresh();
-  else stopAutoRefresh();
-}, { immediate: true });
-watch(refreshIntervalMs, (next) => {
-  localStorage.setItem('refreshInterval', String(next));
-  if (isRefreshEnabled.value) startAutoRefresh();
-});
-// Without this, a stale setInterval keeps firing emit('refresh') after
-// the component unmounts, which Vue surfaces as "emitsOptions" /
-// "__asyncLoader" exceptions on the next tick.
-onBeforeUnmount(stopAutoRefresh);
-
 // Toggle the filter mode — flip cleans the other input.
 function onToggleFilter() {
   if (enableFilter.value) searchKey.value = '';
@@ -257,39 +225,6 @@ function showQrCodeMenu(dbInbound) {
       </a-space>
     </template>
 
-    <template #extra>
-      <a-button-group>
-        <a-button :loading="refreshing" @click="emit('refresh')">
-          <template #icon>
-            <SyncOutlined />
-          </template>
-        </a-button>
-        <a-popover placement="bottomRight" trigger="click">
-          <template #title>
-            <div class="auto-refresh-title">
-              <a-switch v-model:checked="isRefreshEnabled" size="small" />
-              <span>{{ t('pages.inbounds.autoRefresh') }}</span>
-            </div>
-          </template>
-          <template #content>
-            <a-space direction="vertical">
-              <span>{{ t('pages.inbounds.autoRefreshInterval') }}</span>
-              <a-select v-model:value="refreshIntervalMs" :disabled="!isRefreshEnabled" :style="{ width: '100%' }">
-                <a-select-option v-for="key in [5, 10, 30, 60]" :key="key" :value="key * 1000">
-                  {{ key }}s
-                </a-select-option>
-              </a-select>
-            </a-space>
-          </template>
-          <a-button>
-            <template #icon>
-              <DownOutlined />
-            </template>
-          </a-button>
-        </a-popover>
-      </a-button-group>
-    </template>
-
     <a-space direction="vertical" :style="{ width: '100%' }">
       <!-- Search / filter toolbar -->
       <div :class="isMobile ? 'filter-bar mobile' : 'filter-bar'">
@@ -548,12 +483,6 @@ function showQrCodeMenu(dbInbound) {
 </template>
 
 <style scoped>
-.auto-refresh-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .filter-bar {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/inbounds/InboundsPage.vue b/frontend/src/pages/inbounds/InboundsPage.vue
index b9da9355..a2b4f68f 100644
--- a/frontend/src/pages/inbounds/InboundsPage.vue
+++ b/frontend/src/pages/inbounds/InboundsPage.vue
@@ -26,12 +26,12 @@ import QrCodeModal from './QrCodeModal.vue';
 import TextModal from '@/components/TextModal.vue';
 import PromptModal from '@/components/PromptModal.vue';
 import { useInbounds } from './useInbounds.js';
+import { useWebSocket } from '@/composables/useWebSocket.js';
 
 const { t } = useI18n();
 
 const {
   fetched,
-  refreshing,
   dbInbounds,
   clientCount,
   onlineClients,
@@ -46,7 +46,20 @@ const {
   lastOnlineMap,
   refresh,
   fetchDefaultSettings,
+  applyTrafficEvent,
+  applyClientStatsEvent,
+  applyInvalidate,
 } = useInbounds();
+
+// Live updates over WebSocket — replaces the old 5s polling loop.
+// The backend pushes traffic + per-client deltas every ~10s; we merge
+// them into the local refs in-place so counters and online badges
+// update without re-fetching the whole list.
+useWebSocket({
+  traffic: applyTrafficEvent,
+  client_stats: applyClientStatsEvent,
+  invalidate: applyInvalidate,
+});
 const { isMobile } = useMediaQuery();
 // Node list lives on the central panel; the Inbounds page consumes
 // the id→node map for the new "Node" column. Fetched once on mount.
@@ -592,7 +605,7 @@ function onRowAction({ key, dbInbound }) {
               <!-- Inbound list — toolbar, search/filter, columns, row actions -->
               <a-col :span="24">
                 <InboundList :db-inbounds="dbInbounds" :client-count="clientCount" :online-clients="onlineClients"
-                  :last-online-map="lastOnlineMap" :is-dark-theme="themeState.isDark" :refreshing="refreshing"
+                  :last-online-map="lastOnlineMap" :is-dark-theme="themeState.isDark"
                   :expire-diff="expireDiff" :traffic-diff="trafficDiff" :page-size="pageSize" :is-mobile="isMobile"
                   :sub-enable="subSettings.enable" :nodes-by-id="nodesById" @refresh="refresh" @add-inbound="onAddInbound"
                   @general-action="onGeneralAction" @row-action="onRowAction" @edit-client="onEditClient"
diff --git a/frontend/src/pages/inbounds/useInbounds.js b/frontend/src/pages/inbounds/useInbounds.js
index a5877220..ca252832 100644
--- a/frontend/src/pages/inbounds/useInbounds.js
+++ b/frontend/src/pages/inbounds/useInbounds.js
@@ -2,8 +2,10 @@
 // last-online-map, default settings) and computes the per-inbound client
 // roll-ups the legacy panel surfaces in the popovers.
 //
-// 5f-i scope: plain GET on mount + a manual refresh; auto-refresh and the
-// WebSocket delta path are deferred to a later subphase.
+// Live-update model: initial GET on mount, then the WebSocket delta path
+// keeps the table fresh — the page subscribes to the server's `traffic`,
+// `client_stats`, and `invalidate` events and merges them into local
+// refs in-place. The manual refresh button is kept as a fallback.
 
 import { computed, ref, shallowRef } from 'vue';
 import { HttpUtil, ObjectUtil } from '@/utils';
@@ -151,6 +153,107 @@ export function useInbounds() {
     ipLimitEnable.value = !!s.ipLimitEnable;
   }
 
+  // ============ WebSocket live-update merge ===========================
+  // The xray traffic job and the node traffic sync job each broadcast
+  // a `traffic` payload every ~10s. We merge it into onlineClients +
+  // lastOnlineMap; per-inbound counters arrive in the parallel
+  // client_stats event below.
+  function applyTrafficEvent(payload) {
+    if (!payload || typeof payload !== 'object') return;
+    if (Array.isArray(payload.onlineClients)) {
+      onlineClients.value = payload.onlineClients;
+    }
+    if (payload.lastOnlineMap && typeof payload.lastOnlineMap === 'object') {
+      // Merge so a subsequent payload that drops a quiet client doesn't
+      // wipe their last-seen timestamp.
+      lastOnlineMap.value = { ...lastOnlineMap.value, ...payload.lastOnlineMap };
+    }
+    // Recompute per-inbound rollups so the "online" badges in the
+    // expand-row table flip without waiting for a full refresh.
+    rebuildClientCount();
+  }
+
+  // The client_stats payload carries absolute traffic counters for the
+  // clients that had activity in the latest window plus per-inbound
+  // totals. Both are absolute (not deltas), so we overwrite in place.
+  function applyClientStatsEvent(payload) {
+    if (!payload || typeof payload !== 'object') return;
+    let touched = false;
+
+    if (Array.isArray(payload.inbounds) && payload.inbounds.length > 0) {
+      const byId = new Map();
+      for (const row of payload.inbounds) {
+        if (row && row.id != null) byId.set(row.id, row);
+      }
+      for (const ib of dbInbounds.value) {
+        const upd = byId.get(ib.id);
+        if (!upd) continue;
+        if (typeof upd.up === 'number') ib.up = upd.up;
+        if (typeof upd.down === 'number') ib.down = upd.down;
+        if (typeof upd.allTime === 'number') ib.allTime = upd.allTime;
+        touched = true;
+      }
+    }
+
+    if (Array.isArray(payload.clients) && payload.clients.length > 0) {
+      const byEmail = new Map();
+      for (const row of payload.clients) {
+        if (row && row.email) byEmail.set(row.email, row);
+      }
+      for (const ib of dbInbounds.value) {
+        if (!Array.isArray(ib.clientStats)) continue;
+        for (let i = 0; i < ib.clientStats.length; i++) {
+          const stat = ib.clientStats[i];
+          const upd = byEmail.get(stat.email);
+          if (!upd) continue;
+          if (typeof upd.up === 'number') stat.up = upd.up;
+          if (typeof upd.down === 'number') stat.down = upd.down;
+          if (typeof upd.total === 'number') stat.total = upd.total;
+          if (typeof upd.expiryTime === 'number') stat.expiryTime = upd.expiryTime;
+          touched = true;
+        }
+      }
+    }
+
+    if (touched) {
+      // shallowRef → trigger reactivity by reassigning the same array.
+      dbInbounds.value = [...dbInbounds.value];
+      rebuildClientCount();
+    }
+  }
+
+  // The hub may decide a payload is too large to push directly and emit
+  // an `invalidate` event with the affected dataType instead. For the
+  // inbounds page that means "the inbound list changed elsewhere — go
+  // re-fetch via REST".
+  function applyInvalidate(payload) {
+    if (!payload || typeof payload !== 'object') return;
+    if (payload.dataType === 'inbounds') {
+      refresh();
+    }
+  }
+
+  // Recompute the per-inbound roll-up after any in-place mutation.
+  // Cheap because rollupClients only iterates a single inbound's
+  // clients + clientStats arrays.
+  function rebuildClientCount() {
+    const counts = {};
+    const tracked = [
+      Protocols.VMESS,
+      Protocols.VLESS,
+      Protocols.TROJAN,
+      Protocols.SHADOWSOCKS,
+      Protocols.HYSTERIA,
+    ];
+    for (const dbInbound of dbInbounds.value) {
+      const parsed = dbInbound.toInbound();
+      if (!tracked.includes(dbInbound.protocol)) continue;
+      if (dbInbound.isSS && !parsed.isSSMultiUser) continue;
+      counts[dbInbound.id] = rollupClients(dbInbound, parsed);
+    }
+    clientCount.value = counts;
+  }
+
   async function refresh() {
     refreshing.value = true;
     try {
@@ -213,5 +316,8 @@ export function useInbounds() {
     pageSize,
     refresh,
     fetchDefaultSettings,
+    applyTrafficEvent,
+    applyClientStatsEvent,
+    applyInvalidate,
   };
 }
diff --git a/frontend/src/pages/nodes/NodeFormModal.vue b/frontend/src/pages/nodes/NodeFormModal.vue
index caaa8471..edaa9aa7 100644
--- a/frontend/src/pages/nodes/NodeFormModal.vue
+++ b/frontend/src/pages/nodes/NodeFormModal.vue
@@ -35,8 +35,6 @@ const form = reactive(defaultForm());
 const submitting = ref(false);
 const testing = ref(false);
 const testResult = ref(null); // { status, latencyMs, xrayVersion, error }
-const tokenVisible = ref(false);
-
 // Reset the form whenever the modal is opened. In edit mode we copy
 // the existing node into the form fields; in add mode we wipe back
 // to defaults so a previous edit doesn't leak through.
@@ -175,7 +173,6 @@ async function onSave() {
       <a-form-item :label="t('pages.nodes.apiToken')" required>
         <a-input-password
           v-model:value="form.apiToken"
-          :visibility-toggle="{ visible: tokenVisible, 'onUpdate:visible': (v) => (tokenVisible = v) }"
           :placeholder="t('pages.nodes.apiTokenPlaceholder')"
         />
         <div class="hint">{{ t('pages.nodes.apiTokenHint') }}</div>
diff --git a/frontend/src/pages/nodes/NodeList.vue b/frontend/src/pages/nodes/NodeList.vue
index d785fe20..a733eece 100644
--- a/frontend/src/pages/nodes/NodeList.vue
+++ b/frontend/src/pages/nodes/NodeList.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import {
   EditOutlined,
   DeleteOutlined,
-  ReloadOutlined,
   PlusOutlined,
   ThunderboltOutlined,
   ExclamationCircleOutlined,
@@ -23,7 +22,6 @@ const emit = defineEmits([
   'delete',
   'probe',
   'toggle-enable',
-  'refresh',
 ]);
 
 const { t } = useI18n();
@@ -77,16 +75,10 @@ function formatPct(p) {
 <template>
   <a-card size="small" hoverable>
     <div class="toolbar">
-      <a-space>
-        <a-button type="primary" @click="emit('add')">
-          <template #icon><PlusOutlined /></template>
-          {{ t('pages.nodes.addNode') }}
-        </a-button>
-        <a-button :loading="loading" @click="emit('refresh')">
-          <template #icon><ReloadOutlined /></template>
-          {{ t('pages.nodes.refresh') }}
-        </a-button>
-      </a-space>
+      <a-button type="primary" @click="emit('add')">
+        <template #icon><PlusOutlined /></template>
+        {{ t('pages.nodes.addNode') }}
+      </a-button>
     </div>
 
     <a-table
diff --git a/frontend/src/pages/nodes/NodesPage.vue b/frontend/src/pages/nodes/NodesPage.vue
index 852bd354..d8a1a2ee 100644
--- a/frontend/src/pages/nodes/NodesPage.vue
+++ b/frontend/src/pages/nodes/NodesPage.vue
@@ -16,6 +16,7 @@ import CustomStatistic from '@/components/CustomStatistic.vue';
 import NodeList from './NodeList.vue';
 import NodeFormModal from './NodeFormModal.vue';
 import { useNodes } from './useNodes.js';
+import { useWebSocket } from '@/composables/useWebSocket.js';
 
 const { t } = useI18n();
 
@@ -24,7 +25,7 @@ const {
   loading,
   fetched,
   totals,
-  refresh,
+  applyNodesEvent,
   create,
   update,
   remove,
@@ -33,6 +34,9 @@ const {
   probe,
 } = useNodes();
 
+// Live updates — NodeHeartbeatJob pushes the fresh list every 10s.
+useWebSocket({ nodes: applyNodesEvent });
+
 const { isMobile } = useMediaQuery();
 
 const basePath = window.__X_UI_BASE_PATH__ || '';
@@ -167,7 +171,6 @@ async function onToggleEnable(node, next) {
                   @delete="onDelete"
                   @probe="onProbe"
                   @toggle-enable="onToggleEnable"
-                  @refresh="refresh"
                 />
               </a-col>
             </a-row>
diff --git a/frontend/src/pages/nodes/useNodes.js b/frontend/src/pages/nodes/useNodes.js
index d2653e08..cb4a6e8c 100644
--- a/frontend/src/pages/nodes/useNodes.js
+++ b/frontend/src/pages/nodes/useNodes.js
@@ -1,20 +1,15 @@
 // Loads the node list and runs CRUD/probe actions against the
-// /panel/api/nodes/* endpoints. Polls every 5s while the page is
-// visible so heartbeat status stays fresh without a WebSocket.
+// /panel/api/nodes/* endpoints. Live updates arrive over WebSocket
+// (pushed by NodeHeartbeatJob every 10s) so we don't poll.
 
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
+import { computed, onMounted, ref, shallowRef } from 'vue';
 import { HttpUtil } from '@/utils';
 
-const POLL_INTERVAL_MS = 5000;
-
 export function useNodes() {
   const nodes = shallowRef([]);
   const loading = ref(false);
   const fetched = ref(false);
 
-  let pollTimer = null;
-  let pageVisible = true;
-
   async function refresh() {
     loading.value = true;
     try {
@@ -28,6 +23,16 @@ export function useNodes() {
     }
   }
 
+  // Replaces the local list with the snapshot pushed by the heartbeat job.
+  // shallowRef means a fresh assignment is enough to retrigger reactivity;
+  // we always assign a new array so Vue notices.
+  function applyNodesEvent(payload) {
+    if (Array.isArray(payload)) {
+      nodes.value = payload;
+      if (!fetched.value) fetched.value = true;
+    }
+  }
+
   async function create(payload) {
     const msg = await HttpUtil.post('/panel/api/nodes/add', payload);
     if (msg?.success) await refresh();
@@ -66,8 +71,8 @@ export function useNodes() {
     return msg;
   }
 
-  // Aggregate cards on the dashboard. Computed off the live list so
-  // a refresh picks up new totals automatically.
+  // Aggregate cards on the dashboard. Computed off the live list so a
+  // refresh (or a WS push) picks up new totals automatically.
   const totals = computed(() => {
     const list = nodes.value;
     let online = 0;
@@ -94,35 +99,9 @@ export function useNodes() {
     };
   });
 
-  function startPolling() {
-    if (pollTimer) return;
-    pollTimer = setInterval(() => {
-      if (pageVisible) refresh();
-    }, POLL_INTERVAL_MS);
-  }
-
-  function stopPolling() {
-    if (pollTimer) {
-      clearInterval(pollTimer);
-      pollTimer = null;
-    }
-  }
-
-  function onVisibilityChange() {
-    pageVisible = !document.hidden;
-    if (pageVisible) refresh();
-  }
-
-  onMounted(() => {
-    refresh();
-    startPolling();
-    document.addEventListener('visibilitychange', onVisibilityChange);
-  });
-
-  onBeforeUnmount(() => {
-    stopPolling();
-    document.removeEventListener('visibilitychange', onVisibilityChange);
-  });
+  // Initial fetch — WebSocket takes over after the first heartbeat tick
+  // (~10s) but the page should populate immediately on mount.
+  onMounted(refresh);
 
   return {
     nodes,
@@ -130,6 +109,7 @@ export function useNodes() {
     fetched,
     totals,
     refresh,
+    applyNodesEvent,
     create,
     update,
     remove,
diff --git a/frontend/src/pages/xray/OutboundsTab.vue b/frontend/src/pages/xray/OutboundsTab.vue
index e23b2e5f..cef4ab4a 100644
--- a/frontend/src/pages/xray/OutboundsTab.vue
+++ b/frontend/src/pages/xray/OutboundsTab.vue
@@ -5,7 +5,6 @@ import {
   PlusOutlined,
   CloudOutlined,
   ApiOutlined,
-  SyncOutlined,
   RetweetOutlined,
   MoreOutlined,
   EditOutlined,
@@ -39,9 +38,7 @@ const props = defineProps({
   isMobile: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['refresh-traffic', 'reset-traffic', 'test', 'show-warp', 'show-nord']);
-
-const refreshing = ref(false);
+const emit = defineEmits(['reset-traffic', 'test', 'show-warp', 'show-nord']);
 
 // === Modal state ====================================================
 const modalOpen = ref(false);
@@ -97,12 +94,6 @@ function moveDown(idx) {
   [arr[idx + 1], arr[idx]] = [arr[idx], arr[idx + 1]];
 }
 
-async function onRefresh() {
-  refreshing.value = true;
-  try { emit('refresh-traffic'); }
-  finally { setTimeout(() => { refreshing.value = false; }, 500); }
-}
-
 // === Per-row helpers ================================================
 function trafficFor(o) {
   const t = props.outboundsTraffic.find((x) => x.tag === o.tag);
@@ -188,22 +179,17 @@ const rows = computed(() => {
         </a-space>
       </a-col>
       <a-col :xs="24" :sm="10" class="toolbar-right">
-        <a-button-group>
-          <a-button :loading="refreshing" @click="onRefresh">
-            <template #icon><SyncOutlined /></template>
+        <a-popconfirm
+          placement="topRight"
+          :ok-text="t('reset')"
+          :cancel-text="t('cancel')"
+          :title="t('pages.inbounds.resetAllTrafficContent')"
+          @confirm="emit('reset-traffic', '-alltags-')"
+        >
+          <a-button>
+            <template #icon><RetweetOutlined /></template>
           </a-button>
-          <a-popconfirm
-            placement="topRight"
-            :ok-text="t('reset')"
-            :cancel-text="t('cancel')"
-            :title="t('pages.inbounds.resetAllTrafficContent')"
-            @confirm="emit('reset-traffic', '-alltags-')"
-          >
-            <a-button>
-              <template #icon><RetweetOutlined /></template>
-            </a-button>
-          </a-popconfirm>
-        </a-button-group>
+        </a-popconfirm>
       </a-col>
     </a-row>
 
diff --git a/frontend/src/pages/xray/XrayPage.vue b/frontend/src/pages/xray/XrayPage.vue
index bf1e91bd..42723616 100644
--- a/frontend/src/pages/xray/XrayPage.vue
+++ b/frontend/src/pages/xray/XrayPage.vue
@@ -23,6 +23,7 @@ import DnsTab from './DnsTab.vue';
 import WarpModal from './WarpModal.vue';
 import NordModal from './NordModal.vue';
 import { useXraySetting } from './useXraySetting.js';
+import { useWebSocket } from '@/composables/useWebSocket.js';
 
 const { t } = useI18n();
 
@@ -40,14 +41,17 @@ const {
   outboundsTraffic,
   outboundTestStates,
   fetchAll,
-  fetchOutboundsTraffic,
   resetOutboundsTraffic,
   testOutbound,
   saveAll,
   resetToDefault,
   restartXray,
+  applyOutboundsEvent,
 } = useXraySetting();
 
+// Live outbounds traffic — pushed by xray_traffic_job every ~10s.
+useWebSocket({ outbounds: applyOutboundsEvent });
+
 async function onTestOutbound(idx) {
   const outbound = templateSettings.value?.outbounds?.[idx];
   if (outbound) await testOutbound(idx, outbound);
@@ -291,7 +295,6 @@ function confirmRestart() {
                         :outbounds-traffic="outboundsTraffic"
                         :outbound-test-states="outboundTestStates"
                         :is-mobile="isMobile"
-                        @refresh-traffic="fetchOutboundsTraffic"
                         @reset-traffic="resetOutboundsTraffic"
                         @test="onTestOutbound"
                         @show-warp="showWarp"
diff --git a/frontend/src/pages/xray/useXraySetting.js b/frontend/src/pages/xray/useXraySetting.js
index bf27e6c4..fd74b103 100644
--- a/frontend/src/pages/xray/useXraySetting.js
+++ b/frontend/src/pages/xray/useXraySetting.js
@@ -133,6 +133,13 @@ export function useXraySetting() {
     if (msg?.success) await fetchOutboundsTraffic();
   }
 
+  // Merges a WebSocket `outbounds` event into outboundsTraffic in place.
+  // The xray traffic job pushes the full snapshot every ~10s so the user
+  // doesn't have to click the (now-removed) refresh button.
+  function applyOutboundsEvent(payload) {
+    if (Array.isArray(payload)) outboundsTraffic.value = payload;
+  }
+
   async function testOutbound(index, outbound) {
     if (!outbound) return null;
     if (!outboundTestStates.value[index]) outboundTestStates.value[index] = {};
@@ -230,6 +237,7 @@ export function useXraySetting() {
     fetchAll,
     fetchOutboundsTraffic,
     resetOutboundsTraffic,
+    applyOutboundsEvent,
     testOutbound,
     saveAll,
     resetToDefault,
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5acbb89a..42e3ffcd 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -145,12 +145,23 @@ export default defineConfig({
   server: {
     port: 5173,
     strictPort: true,
-    proxy: makeBackendProxy('http://localhost:2053', [
-      // Patterns are anchored regex so /login.html and /index.html
-      // (which Vite serves itself) are NOT forwarded — only the bare
-      // backend paths and their sub-routes.
-      '^/(login|logout|getTwoFactorEnable|csrf-token)$',
-      '^/(panel|server)(/|$)',
-    ]),
+    proxy: {
+      ...makeBackendProxy('http://localhost:2053', [
+        // Patterns are anchored regex so /login.html and /index.html
+        // (which Vite serves itself) are NOT forwarded — only the bare
+        // backend paths and their sub-routes.
+        '^/(login|logout|getTwoFactorEnable|csrf-token)$',
+        '^/(panel|server)(/|$)',
+      ]),
+      // The panel mounts the live-update WebSocket at /ws (basePath +
+      // "/ws"). Vite needs `ws: true` to forward the HTTP Upgrade to the
+      // Go backend; without it the dev server would 404 the upgrade and
+      // the page falls back to the no-data state.
+      '/ws': {
+        target: 'ws://localhost:2053',
+        ws: true,
+        changeOrigin: true,
+      },
+    },
   },
 });
diff --git a/web/job/node_heartbeat_job.go b/web/job/node_heartbeat_job.go
index 7316a27c..1fa04169 100644
--- a/web/job/node_heartbeat_job.go
+++ b/web/job/node_heartbeat_job.go
@@ -8,6 +8,7 @@ import (
 	"github.com/mhsanaei/3x-ui/v2/database/model"
 	"github.com/mhsanaei/3x-ui/v2/logger"
 	"github.com/mhsanaei/3x-ui/v2/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/websocket"
 )
 
 // nodeHeartbeatConcurrency caps how many remote panels we probe at once.
@@ -69,6 +70,20 @@ func (j *NodeHeartbeatJob) Run() {
 		}(n)
 	}
 	wg.Wait()
+
+	// Push the fresh list to any open Nodes page over WebSocket so the
+	// status / latency / cpu / mem cells update without the user clicking
+	// refresh. Skip the DB read entirely when no browser is connected —
+	// matches the gating pattern in xray_traffic_job.
+	if !websocket.HasClients() {
+		return
+	}
+	updated, err := j.nodeService.GetAll()
+	if err != nil {
+		logger.Warning("node heartbeat: load nodes for broadcast failed:", err)
+		return
+	}
+	websocket.BroadcastNodes(updated)
 }
 
 // probeOne runs a single probe and persists the result. We deliberately
diff --git a/web/translation/ar-EG.json b/web/translation/ar-EG.json
index 9b5f856c..7c50c527 100644
--- a/web/translation/ar-EG.json
+++ b/web/translation/ar-EG.json
@@ -248,8 +248,6 @@
       "resetTraffic": "إعادة ضبط الترافيك",
       "addInbound": "أضف إدخال",
       "generalActions": "إجراءات عامة",
-      "autoRefresh": "تحديث تلقائي",
-      "autoRefreshInterval": "الفاصل",
       "modifyInbound": "تعديل الإدخال",
       "deleteInbound": "حذف الإدخال",
       "deleteInboundContent": "متأكد إنك عايز تحذف الإدخال؟",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "آخر نبضة",
       "xrayVersion": "إصدار Xray",
       "actions": "العمليات",
-      "refresh": "تحديث",
       "probe": "فحص فوري",
       "testConnection": "اختبار الاتصال",
       "connectionOk": "الاتصال شغال ({ms} ms)",
diff --git a/web/translation/en-US.json b/web/translation/en-US.json
index 53b287ef..40bfa750 100644
--- a/web/translation/en-US.json
+++ b/web/translation/en-US.json
@@ -249,8 +249,6 @@
       "resetTraffic": "Reset Traffic",
       "addInbound": "Add Inbound",
       "generalActions": "General Actions",
-      "autoRefresh": "Auto-refresh",
-      "autoRefreshInterval": "Interval",
       "modifyInbound": "Modify Inbound",
       "deleteInbound": "Delete Inbound",
       "deleteInboundContent": "Are you sure you want to delete inbound?",
@@ -416,7 +414,6 @@
       "lastHeartbeat": "Last Heartbeat",
       "xrayVersion": "Xray Version",
       "actions": "Actions",
-      "refresh": "Refresh",
       "probe": "Probe Now",
       "testConnection": "Test Connection",
       "connectionOk": "Connection OK ({ms} ms)",
diff --git a/web/translation/es-ES.json b/web/translation/es-ES.json
index 386acf83..22214bf1 100644
--- a/web/translation/es-ES.json
+++ b/web/translation/es-ES.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Restablecer Tráfico",
       "addInbound": "Agregar Entrada",
       "generalActions": "Acciones Generales",
-      "autoRefresh": "Auto-actualizar",
-      "autoRefreshInterval": "Intervalo",
       "modifyInbound": "Modificar Entrada",
       "deleteInbound": "Eliminar Entrada",
       "deleteInboundContent": "¿Confirmar eliminación de entrada?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Último latido",
       "xrayVersion": "Versión de Xray",
       "actions": "Acciones",
-      "refresh": "Actualizar",
       "probe": "Sondear ahora",
       "testConnection": "Probar conexión",
       "connectionOk": "Conexión correcta ({ms} ms)",
diff --git a/web/translation/fa-IR.json b/web/translation/fa-IR.json
index ea510c35..e622a7a3 100644
--- a/web/translation/fa-IR.json
+++ b/web/translation/fa-IR.json
@@ -249,8 +249,6 @@
       "resetTraffic": "ریست ترافیک",
       "addInbound": "افزودن ورودی",
       "generalActions": "عملیات کلی",
-      "autoRefresh": "تازه‌سازی خودکار",
-      "autoRefreshInterval": "فاصله",
       "modifyInbound": "ویرایش ورودی",
       "deleteInbound": "حذف ورودی",
       "deleteInboundContent": "آیا مطمئن به حذف ورودی هستید؟",
@@ -416,7 +414,6 @@
       "lastHeartbeat": "آخرین ضربان",
       "xrayVersion": "نسخه Xray",
       "actions": "عملیات",
-      "refresh": "به‌روزرسانی",
       "probe": "بررسی فوری",
       "testConnection": "تست اتصال",
       "connectionOk": "اتصال موفق ({ms} میلی‌ثانیه)",
diff --git a/web/translation/id-ID.json b/web/translation/id-ID.json
index 5e341637..f4f495e9 100644
--- a/web/translation/id-ID.json
+++ b/web/translation/id-ID.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Reset Traffic",
       "addInbound": "Tambahkan Masuk",
       "generalActions": "Tindakan Umum",
-      "autoRefresh": "Pembaruan otomatis",
-      "autoRefreshInterval": "Interval",
       "modifyInbound": "Ubah Masuk",
       "deleteInbound": "Hapus Masuk",
       "deleteInboundContent": "Apakah Anda yakin ingin menghapus masuk?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Heartbeat Terakhir",
       "xrayVersion": "Versi Xray",
       "actions": "Aksi",
-      "refresh": "Segarkan",
       "probe": "Probe Sekarang",
       "testConnection": "Tes Koneksi",
       "connectionOk": "Koneksi OK ({ms} ms)",
diff --git a/web/translation/ja-JP.json b/web/translation/ja-JP.json
index c2c85f0c..25d81814 100644
--- a/web/translation/ja-JP.json
+++ b/web/translation/ja-JP.json
@@ -248,8 +248,6 @@
       "resetTraffic": "トラフィックリセット",
       "addInbound": "インバウンド追加",
       "generalActions": "一般操作",
-      "autoRefresh": "自動更新",
-      "autoRefreshInterval": "間隔",
       "modifyInbound": "インバウンド修正",
       "deleteInbound": "インバウンド削除",
       "deleteInboundContent": "インバウンドを削除してもよろしいですか？",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "最後のハートビート",
       "xrayVersion": "Xrayバージョン",
       "actions": "操作",
-      "refresh": "更新",
       "probe": "今すぐプローブ",
       "testConnection": "接続テスト",
       "connectionOk": "接続OK ({ms} ms)",
diff --git a/web/translation/pt-BR.json b/web/translation/pt-BR.json
index 5a953d2a..dbd754ef 100644
--- a/web/translation/pt-BR.json
+++ b/web/translation/pt-BR.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Redefinir Tráfego",
       "addInbound": "Adicionar Inbound",
       "generalActions": "Ações Gerais",
-      "autoRefresh": "Atualização automática",
-      "autoRefreshInterval": "Intervalo",
       "modifyInbound": "Modificar Inbound",
       "deleteInbound": "Excluir Inbound",
       "deleteInboundContent": "Tem certeza de que deseja excluir o inbound?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Último heartbeat",
       "xrayVersion": "Versão do Xray",
       "actions": "Ações",
-      "refresh": "Atualizar",
       "probe": "Sondar agora",
       "testConnection": "Testar conexão",
       "connectionOk": "Conexão OK ({ms} ms)",
diff --git a/web/translation/ru-RU.json b/web/translation/ru-RU.json
index 8335e566..f4212f4e 100644
--- a/web/translation/ru-RU.json
+++ b/web/translation/ru-RU.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Сброс трафика",
       "addInbound": "Создать подключение",
       "generalActions": "Общие действия",
-      "autoRefresh": "Автообновление",
-      "autoRefreshInterval": "Интервал",
       "modifyInbound": "Изменить подключение",
       "deleteInbound": "Удалить подключение",
       "deleteInboundContent": "Вы уверены, что хотите удалить подключение?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Последний пинг",
       "xrayVersion": "Версия Xray",
       "actions": "Действия",
-      "refresh": "Обновить",
       "probe": "Проверить сейчас",
       "testConnection": "Проверить соединение",
       "connectionOk": "Соединение в порядке ({ms} мс)",
diff --git a/web/translation/tr-TR.json b/web/translation/tr-TR.json
index cd267d67..d4d7b8cc 100644
--- a/web/translation/tr-TR.json
+++ b/web/translation/tr-TR.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Trafiği Sıfırla",
       "addInbound": "Gelen Ekle",
       "generalActions": "Genel Eylemler",
-      "autoRefresh": "Otomatik yenileme",
-      "autoRefreshInterval": "Aralık",
       "modifyInbound": "Geleni Düzenle",
       "deleteInbound": "Geleni Sil",
       "deleteInboundContent": "Geleni silmek istediğinizden emin misiniz?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Son Sinyal",
       "xrayVersion": "Xray Sürümü",
       "actions": "İşlemler",
-      "refresh": "Yenile",
       "probe": "Şimdi Test Et",
       "testConnection": "Bağlantıyı Test Et",
       "connectionOk": "Bağlantı tamam ({ms} ms)",
diff --git a/web/translation/uk-UA.json b/web/translation/uk-UA.json
index 2af003d0..eeabe71b 100644
--- a/web/translation/uk-UA.json
+++ b/web/translation/uk-UA.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Скинути трафік",
       "addInbound": "Додати вхідний",
       "generalActions": "Загальні дії",
-      "autoRefresh": "Автооновлення",
-      "autoRefreshInterval": "Інтервал",
       "modifyInbound": "Змінити вхідний",
       "deleteInbound": "Видалити вхідні",
       "deleteInboundContent": "Ви впевнені, що хочете видалити вхідні?",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Останній пінг",
       "xrayVersion": "Версія Xray",
       "actions": "Дії",
-      "refresh": "Оновити",
       "probe": "Перевірити зараз",
       "testConnection": "Перевірити з'єднання",
       "connectionOk": "З'єднання в порядку ({ms} мс)",
diff --git a/web/translation/vi-VN.json b/web/translation/vi-VN.json
index ef9331d9..543fb257 100644
--- a/web/translation/vi-VN.json
+++ b/web/translation/vi-VN.json
@@ -248,8 +248,6 @@
       "resetTraffic": "Đặt lại lưu lượng",
       "addInbound": "Thêm điểm vào",
       "generalActions": "Hành động chung",
-      "autoRefresh": "Tự động làm mới",
-      "autoRefreshInterval": "Khoảng thời gian",
       "modifyInbound": "Chỉnh sửa điểm vào (Inbound)",
       "deleteInbound": "Xóa điểm vào (Inbound)",
       "deleteInboundContent": "Xác nhận xóa điểm vào? (Inbound)",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "Heartbeat gần nhất",
       "xrayVersion": "Phiên bản Xray",
       "actions": "Hành động",
-      "refresh": "Làm mới",
       "probe": "Kiểm tra ngay",
       "testConnection": "Kiểm tra kết nối",
       "connectionOk": "Kết nối OK ({ms} ms)",
diff --git a/web/translation/zh-CN.json b/web/translation/zh-CN.json
index da2ad92b..18920dd0 100644
--- a/web/translation/zh-CN.json
+++ b/web/translation/zh-CN.json
@@ -248,8 +248,6 @@
       "resetTraffic": "重置流量",
       "addInbound": "添加入站",
       "generalActions": "通用操作",
-      "autoRefresh": "自动刷新",
-      "autoRefreshInterval": "间隔",
       "modifyInbound": "修改入站",
       "deleteInbound": "删除入站",
       "deleteInboundContent": "确定要删除入站吗？",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "上次心跳",
       "xrayVersion": "Xray 版本",
       "actions": "操作",
-      "refresh": "刷新",
       "probe": "立即探测",
       "testConnection": "测试连接",
       "connectionOk": "连接正常 ({ms} ms)",
diff --git a/web/translation/zh-TW.json b/web/translation/zh-TW.json
index 8ca96193..d5d27591 100644
--- a/web/translation/zh-TW.json
+++ b/web/translation/zh-TW.json
@@ -248,8 +248,6 @@
       "resetTraffic": "重置流量",
       "addInbound": "新增入站",
       "generalActions": "通用操作",
-      "autoRefresh": "自動刷新",
-      "autoRefreshInterval": "間隔",
       "modifyInbound": "修改入站",
       "deleteInbound": "刪除入站",
       "deleteInboundContent": "確定要刪除入站嗎？",
@@ -415,7 +413,6 @@
       "lastHeartbeat": "上次心跳",
       "xrayVersion": "Xray 版本",
       "actions": "操作",
-      "refresh": "重新整理",
       "probe": "立即探測",
       "testConnection": "測試連線",
       "connectionOk": "連線正常 ({ms} ms)",
diff --git a/web/websocket/hub.go b/web/websocket/hub.go
index 29ba384e..1aed8f2e 100644
--- a/web/websocket/hub.go
+++ b/web/websocket/hub.go
@@ -18,6 +18,7 @@ const (
 	MessageTypeTraffic      MessageType = "traffic"
 	MessageTypeInbounds     MessageType = "inbounds"
 	MessageTypeOutbounds    MessageType = "outbounds"
+	MessageTypeNodes        MessageType = "nodes"
 	MessageTypeNotification MessageType = "notification"
 	MessageTypeXrayState    MessageType = "xray_state"
 	// MessageTypeClientStats carries absolute traffic counters for the clients
diff --git a/web/websocket/notifier.go b/web/websocket/notifier.go
index 8115ae0f..069aaf73 100644
--- a/web/websocket/notifier.go
+++ b/web/websocket/notifier.go
@@ -62,6 +62,15 @@ func BroadcastInbounds(inbounds any) {
 	}
 }
 
+// BroadcastNodes broadcasts the fresh node list to all connected clients.
+// Pushed by NodeHeartbeatJob at the end of each 10s tick so the Nodes page
+// reflects status / latency / cpu / mem updates without polling.
+func BroadcastNodes(nodes any) {
+	if hub := GetHub(); hub != nil {
+		hub.Broadcast(MessageTypeNodes, nodes)
+	}
+}
+
 // BroadcastOutbounds broadcasts outbounds list update to all connected clients.
 func BroadcastOutbounds(outbounds any) {
 	if hub := GetHub(); hub != nil {