diff --git a/web/assets/js/model/inbound.js b/web/assets/js/model/inbound.js
index 4661d51d..35f9dc3a 100644
--- a/web/assets/js/model/inbound.js
+++ b/web/assets/js/model/inbound.js
@@ -379,13 +379,15 @@ class WsStreamSettings extends XrayCommonClass {
         acceptProxyProtocol = false,
         path = '/',
         host = '',
-        headers = []
+        headers = [],
+        heartbeatPeriod = 0,
     ) {
         super();
         this.acceptProxyProtocol = acceptProxyProtocol;
         this.path = path;
         this.host = host;
         this.headers = headers;
+        this.heartbeatPeriod = heartbeatPeriod;
     }
 
     addHeader(name, value) {
@@ -402,6 +404,7 @@ class WsStreamSettings extends XrayCommonClass {
             json.path,
             json.host,
             XrayCommonClass.toHeaders(json.headers),
+            json.heartbeatPeriod,
         );
     }
 
@@ -411,6 +414,7 @@ class WsStreamSettings extends XrayCommonClass {
             path: this.path,
             host: this.host,
             headers: XrayCommonClass.toV2Headers(this.headers, false),
+            heartbeatPeriod: this.heartbeatPeriod,
         };
     }
 }
diff --git a/web/assets/js/model/outbound.js b/web/assets/js/model/outbound.js
index 83ac4306..c9400efc 100644
--- a/web/assets/js/model/outbound.js
+++ b/web/assets/js/model/outbound.js
@@ -206,16 +206,23 @@ class KcpStreamSettings extends CommonClass {
 }
 
 class WsStreamSettings extends CommonClass {
-    constructor(path = '/', host = '') {
+    constructor(
+        path = '/', 
+        host = '',
+        heartbeatPeriod = 0,
+
+    ) {
         super();
         this.path = path;
         this.host = host;
+        this.heartbeatPeriod = heartbeatPeriod;
     }
 
     static fromJson(json = {}) {
         return new WsStreamSettings(
             json.path,
             json.host,
+            json.heartbeatPeriod,
         );
     }
 
@@ -223,6 +230,7 @@ class WsStreamSettings extends CommonClass {
         return {
             path: this.path,
             host: this.host,
+            heartbeatPeriod: this.heartbeatPeriod
         };
     }
 }
diff --git a/web/html/xui/form/outbound.html b/web/html/xui/form/outbound.html
index fde2f27c..a337ab28 100644
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -337,6 +337,9 @@
           <a-form-item label='{{ i18n "path" }}'>
             <a-input v-model.trim="outbound.stream.ws.path"></a-input>
           </a-form-item>
+          <a-form-item label='Heartbeat Period'>
+            <a-input-number v-model.number="outbound.stream.ws.heartbeatPeriod" :min="0"></a-input-number>
+          </a-form-item>
         </template>
 
         <!-- http -->
diff --git a/web/html/xui/form/stream/stream_ws.html b/web/html/xui/form/stream/stream_ws.html
index 80f44c50..16a423ca 100644
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -9,6 +9,9 @@
   <a-form-item label='{{ i18n "path" }}'>
     <a-input v-model.trim="inbound.stream.ws.path"></a-input>
   </a-form-item>
+  <a-form-item label='Heartbeat Period'>
+    <a-input-number v-model.number="inbound.stream.ws.heartbeatPeriod" :min="0"></a-input-number>
+  </a-form-item>
   <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
     <a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('host', '')"></a-button>
   </a-form-item>