add ws headers host

frontend/src/components/transports/WebSocket.vue

@@ -7,6 +7,15 @@
       v-model="transport.path">
       </v-text-field>
     </v-col>
+    <v-col cols="12" sm="6" md="4">
+      <v-text-field
+      :label="$t('transport.host')"
+      hide-details
+      v-model="host">
+      </v-text-field>
+    </v-col>
+  </v-row>
+  <v-row>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
       label="Max Early Data"
@@ -42,10 +51,16 @@ export default {
       get() { return this.WS.max_early_data ? this.WS.max_early_data : '' },
       set(newValue:number) { this.$props.transport.max_early_data = newValue != 0 ? newValue : undefined }
     },
+    host: {
+      get() { return this.WS.headers?.Host ? this.WS.headers.Host : '' },
+      set(newValue:string) {
+        this.$props.transport.headers = newValue != "" ? { Host: newValue } : undefined
+      }
+    },
   },
   mounted() {
-    this.WS.early_data_header_name = 'Sec-WebSocket-Protocol'
+    this.WS.early_data_header_name ??= 'Sec-WebSocket-Protocol'
-    this.WS.path = '/'
+    this.WS.path ??= '/'
   }
 }
 </script>

frontend/src/plugins/link.ts

@@ -150,6 +150,7 @@ export namespace LinkUtil {
       case TrspTypes.WebSocket:
         const tw = <WebSocket>t
         params.path = tw.path?? null
+        params.host = tw.headers?.Host?? null
         break
       case TrspTypes.gRPC:
         const tg = <gRPC>t

frontend/src/types/transport.ts

@@ -25,7 +25,9 @@ export interface HTTP extends TransportBasics {
 
 export interface WebSocket extends TransportBasics {
   path: string
-  headers?: {}
+  headers?: {
+    Host: string
+  }
   max_early_data?: number
   early_data_header_name?: string
 }