From 4800f8fb706a092a38255ee70904227238b2a6f6 Mon Sep 17 00:00:00 2001
From: lolka1333 <xtrafcyz@gmail.com>
Date: Mon, 5 Jan 2026 05:50:40 +0100
Subject: feat: Real-time Outbound Traffic, UI Improvements & Fix (#3629)

* Refactor HTML and JavaScript for improved UI and functionality

- Cleaned up JavaScript methods in subscription.js for better readability.
- Updated inbounds.html to clarify traffic update handling and removed unnecessary comments.
- Enhanced xray.html by correcting casing in routingDomainStrategies.
- Added mobile touch scrolling styles in page.html for better tab navigation on small screens.
- Streamlined vless.html by removing redundant line breaks and improving form layout.
- Refined subscription subpage.html for better structure and user experience.
- Adjusted outbounds.html to improve button visibility and functionality.
- Updated xray_traffic_job.go to ensure accurate traffic updates and real-time UI refresh.

* Refactor client traffic handling in InboundService

- Updated addClientTraffic method to initialize onlineClients as an empty slice instead of nil.
- Improved clarity and consistency in handling empty onlineUsers scenario.

* Add WebSocket support for outbounds traffic updates

- Implemented WebSocket connection in xray.html to handle real-time updates for outbounds traffic.
- Enhanced xray_traffic_job.go to retrieve and broadcast outbounds traffic updates.
- Introduced MessageTypeOutbounds in hub.go for managing outbounds messages.
- Added BroadcastOutbounds function in notifier.go to facilitate broadcasting outbounds updates to connected clients.

---------

Co-authored-by: lolka1333 <test123@gmail.com>
---
 web/html/form/protocol/vless.html | 211 ++++++++++++++++++--------------------
 1 file changed, 99 insertions(+), 112 deletions(-)

(limited to 'web/html/form/protocol/vless.html')

diff --git a/web/html/form/protocol/vless.html b/web/html/form/protocol/vless.html
index bdf75be3..fc9c3852 100644
--- a/web/html/form/protocol/vless.html
+++ b/web/html/form/protocol/vless.html
@@ -1,6 +1,5 @@
 {{define "form/vless"}}
-<a-collapse activeKey="0"
-  v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
   <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
     {{template "form/client"}}
   </a-collapse-panel>
@@ -22,115 +21,103 @@
   </a-collapse-panel>
 </a-collapse>
 <template v-if=" !inbound.stream.isTLS || !inbound.stream.isReality">
-  <a-form :colon="false" :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="Authentication">
-      <a-select v-model="inbound.settings.selectedAuth" @change="getNewVlessEnc"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value="X25519, not Post-Quantum">X25519 (not
-          Post-Quantum)</a-select-option>
-        <a-select-option value="ML-KEM-768, Post-Quantum">ML-KEM-768
-          (Post-Quantum)</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="decryption">
-      <a-input v-model.trim="inbound.settings.decryption"></a-input>
-    </a-form-item>
-    <a-form-item label="encryption">
-      <a-input v-model="inbound.settings.encryption"></a-input>
-    </a-form-item>
-    <a-form-item label=" ">
-      <a-space>
-        <a-button type="primary" icon="import" @click="getNewVlessEnc">Get New
-          keys</a-button>
-        <a-button danger @click="clearVlessEnc">Clear</a-button>
-      </a-space>
-    </a-form-item>
-  </a-form>
-  <a-divider v-if="inbound.settings.selectedAuth"
-    :style="{ margin: '5px 0' }"></a-divider>
-</template>
-<template v-if="inbound.isTcp && !inbound.settings.selectedAuth">
-  <a-form :colon="false" :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="Fallbacks">
-      <a-button icon="plus" type="primary" size="small"
-        @click="inbound.settings.addFallback()"></a-button>
-    </a-form-item>
-  </a-form>
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+      <a-form-item label="Authentication">
+        <a-select v-model="inbound.settings.selectedAuth" @change="getNewVlessEnc"
+          :dropdown-class-name="themeSwitcher.currentTheme">
+          <a-select-option value="X25519, not Post-Quantum">X25519 (not
+            Post-Quantum)</a-select-option>
+          <a-select-option value="ML-KEM-768, Post-Quantum">ML-KEM-768
+            (Post-Quantum)</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="decryption">
+        <a-input v-model.trim="inbound.settings.decryption"></a-input>
+      </a-form-item>
+      <a-form-item label="encryption">
+        <a-input v-model="inbound.settings.encryption"></a-input>
+      </a-form-item>
+      <a-form-item label=" ">
+        <a-space>
+          <a-button type="primary" icon="import" @click="getNewVlessEnc">Get New
+            keys</a-button>
+          <a-button danger @click="clearVlessEnc">Clear</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+    <a-divider :style="{ margin: '5px 0' }"></a-divider>
+    </template>
+    <template v-if="inbound.isTcp && !inbound.settings.selectedAuth">
+      <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label="Fallbacks">
+          <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()"></a-button>
+        </a-form-item>
+      </a-form>
 
-  <!-- vless fallbacks -->
-  <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false"
-    :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <a-divider :style="{ margin: '0' }"> Fallback [[ index + 1 ]] <a-icon
-        type="delete"
-        @click="() => inbound.settings.delFallback(index)"
-        :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-    </a-divider>
-    <a-form-item label='SNI'>
-      <a-input v-model="fallback.name"></a-input>
-    </a-form-item>
-    <a-form-item label='ALPN'>
-      <a-input v-model="fallback.alpn"></a-input>
-    </a-form-item>
-    <a-form-item label='Path'>
-      <a-input v-model="fallback.path"></a-input>
-    </a-form-item>
-    <a-form-item label='Dest'>
-      <a-input v-model="fallback.dest"></a-input>
-    </a-form-item>
-    <a-form-item label='xVer'>
-      <a-input-number v-model.number="fallback.xver" :min="0"
-        :max="2"></a-input-number>
-    </a-form-item>
-  </a-form>
-  <a-divider :style="{ margin: '5px 0' }"></a-divider>
-</template>
-<template v-if="inbound.canEnableVisionSeed()">
-  <a-form :colon="false" :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="Vision Seed">
-      <a-row :gutter="8">
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[0] !== undefined) ? inbound.settings.testseed[0] : 900"
-            @change="(val) => updateTestseed(0, val)" :min="0" :max="9999"
-            :style="{ width: '100%' }"
-            placeholder="900" addon-before="[0]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[1] !== undefined) ? inbound.settings.testseed[1] : 500"
-            @change="(val) => updateTestseed(1, val)" :min="0" :max="9999"
-            :style="{ width: '100%' }"
-            placeholder="500" addon-before="[1]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[2] !== undefined) ? inbound.settings.testseed[2] : 900"
-            @change="(val) => updateTestseed(2, val)" :min="0" :max="9999"
-            :style="{ width: '100%' }"
-            placeholder="900" addon-before="[2]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[3] !== undefined) ? inbound.settings.testseed[3] : 256"
-            @change="(val) => updateTestseed(3, val)" :min="0" :max="9999"
-            :style="{ width: '100%' }"
-            placeholder="256" addon-before="[3]"></a-input-number>
-        </a-col>
-      </a-row>
-      <a-space :size="8" :style="{ marginTop: '8px' }">
-        <a-button type="primary" @click="setRandomTestseed">
-          Rand
-        </a-button>
-        <a-button @click="resetTestseed">
-          Reset
-        </a-button>
-      </a-space>
-    </a-form-item>
-  </a-form>
-  <a-divider :style="{ margin: '5px 0' }"></a-divider>
-</template>
+      <!-- vless fallbacks -->
+      <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }"
+        :wrapper-col="{ md: {span:14} }">
+        <a-divider :style="{ margin: '0' }"> Fallback [[ index + 1 ]] <a-icon type="delete"
+            @click="() => inbound.settings.delFallback(index)"
+            :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
+        </a-divider>
+        <a-form-item label='SNI'>
+          <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label='ALPN'>
+          <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+          <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+          <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+          <a-input-number v-model.number="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
+      </a-form>
+      <a-divider :style="{ margin: '5px 0' }"></a-divider>
+    </template>
+    <template v-if="inbound.canEnableVisionSeed()">
+      <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label="Vision Seed">
+          <a-row :gutter="8">
+            <a-col :span="6">
+              <a-input-number
+                :value="(inbound.settings.testseed && inbound.settings.testseed[0] !== undefined) ? inbound.settings.testseed[0] : 900"
+                @change="(val) => updateTestseed(0, val)" :min="0" :max="9999" :style="{ width: '100%' }"
+                placeholder="900" addon-before="[0]"></a-input-number>
+            </a-col>
+            <a-col :span="6">
+              <a-input-number
+                :value="(inbound.settings.testseed && inbound.settings.testseed[1] !== undefined) ? inbound.settings.testseed[1] : 500"
+                @change="(val) => updateTestseed(1, val)" :min="0" :max="9999" :style="{ width: '100%' }"
+                placeholder="500" addon-before="[1]"></a-input-number>
+            </a-col>
+            <a-col :span="6">
+              <a-input-number
+                :value="(inbound.settings.testseed && inbound.settings.testseed[2] !== undefined) ? inbound.settings.testseed[2] : 900"
+                @change="(val) => updateTestseed(2, val)" :min="0" :max="9999" :style="{ width: '100%' }"
+                placeholder="900" addon-before="[2]"></a-input-number>
+            </a-col>
+            <a-col :span="6">
+              <a-input-number
+                :value="(inbound.settings.testseed && inbound.settings.testseed[3] !== undefined) ? inbound.settings.testseed[3] : 256"
+                @change="(val) => updateTestseed(3, val)" :min="0" :max="9999" :style="{ width: '100%' }"
+                placeholder="256" addon-before="[3]"></a-input-number>
+            </a-col>
+          </a-row>
+          <a-space :size="8" :style="{ marginTop: '8px' }">
+            <a-button type="primary" @click="setRandomTestseed">
+              Rand
+            </a-button>
+            <a-button @click="resetTestseed">
+              Reset
+            </a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+      <a-divider :style="{ margin: '5px 0' }"></a-divider>
+    </template>
 {{end}}
\ No newline at end of file
-- 
cgit v1.2.3