protocol: add v2 wire protocol with binary framing and capability negotiation (#5294)

web/frps/src/components/ClientCard.vue

@@ -16,6 +16,9 @@
         <el-tag v-if="client.version" size="small" type="success"
           >v{{ client.version }}</el-tag
         >
+        <el-tag v-if="client.wireProtocolLabel" size="small" type="info">
+          {{ client.wireProtocolLabel }}
+        </el-tag>
       </div>
 
       <div class="card-meta">

web/frps/src/types/client.ts

@@ -4,6 +4,7 @@ export interface ClientInfoData {
   clientID: string
   runID: string
   version?: string
+  wireProtocol?: string
   hostname: string
   clientIP?: string
   metas?: Record<string, string>

web/frps/src/utils/client.ts

@@ -7,6 +7,7 @@ export class Client {
   clientID: string
   runID: string
   version: string
+  wireProtocol: string
   hostname: string
   ip: string
   metas: Map<string, string>
@@ -21,6 +22,7 @@ export class Client {
     this.clientID = data.clientID
     this.runID = data.runID
     this.version = data.version || ''
+    this.wireProtocol = data.wireProtocol || ''
     this.hostname = data.hostname
     this.ip = data.clientIP || ''
     this.metas = new Map<string, string>()
@@ -48,6 +50,11 @@ export class Client {
     return this.runID.substring(0, 8)
   }
 
+  get wireProtocolLabel(): string {
+    if (!this.wireProtocol) return ''
+    return `Protocol ${this.wireProtocol}`
+  }
+
   get firstConnectedAgo(): string {
     return formatDistanceToNow(this.firstConnectedAt)
   }
@@ -80,6 +87,7 @@ export class Client {
       this.user.toLowerCase().includes(search) ||
       this.clientID.toLowerCase().includes(search) ||
       this.runID.toLowerCase().includes(search) ||
+      this.wireProtocol.toLowerCase().includes(search) ||
       this.hostname.toLowerCase().includes(search)
     )
   }

web/frps/src/views/ClientDetail.vue

@@ -27,6 +27,9 @@
                   <el-tag v-if="client.version" size="small" type="success"
                     >v{{ client.version }}</el-tag
                   >
+                  <el-tag v-if="client.wireProtocolLabel" size="small" type="info">
+                    {{ client.wireProtocolLabel }}
+                  </el-tag>
                 </div>
                 <div class="client-meta">
                   <span v-if="client.ip" class="meta-item">{{
@@ -58,6 +61,10 @@
               <span class="info-label">Run ID</span>
               <span class="info-value">{{ client.runID }}</span>
             </div>
+            <div v-if="client.wireProtocol" class="info-item">
+              <span class="info-label">Protocol</span>
+              <span class="info-value">{{ client.wireProtocol }}</span>
+            </div>
             <div class="info-item">
               <span class="info-label">First Connected</span>
               <span class="info-value">{{ client.firstConnectedAgo }}</span>