wip: 0.2.7

实现了 rtc 握手和打开数据通道

deployment/nginx.conf

@@ -15,6 +15,7 @@ server {
 
     location /ushare {
         proxy_pass http://localhost:9119;
+        const rtc = new RTCPeerConnection({iceServers: [{urls: "stun:stun.qq.com:3478"}]})
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

frontend/src/page/local/hook/register.tsx

@@ -1,46 +0,0 @@
-import {useState, useCallback,} from 'react';
-
-export const useRegister = () => {
-    const [id, setId] = useState('');
-    const [name, setName] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<Error | null>(null);
-
-    // 封装为可手动触发的异步函数
-    const register = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-
-        try {
-            const response = await fetch('/api/ulocal/register', {
-                method: 'POST'
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            const data = (await response.json()).data;
-            setId(data.id);
-            setName(data.name);
-
-            return {id: data.id, name: data.name};
-        } catch (err) {
-            setError(err instanceof Error ? err : new Error('Request failed'));
-        } finally {
-            setLoading(false);
-        }
-
-    }, []);
-
-    // 如果需要自动执行（组件挂载时自动注册）
-    // useEffect(() => { register() }, [register]);
-
-    return {
-        id,
-        name,
-        register,  // 手动触发函数
-        loading,
-        error
-    };
-};

frontend/src/page/local/local.tsx

@@ -1,9 +1,10 @@
 import {CloudBackground} from "../../component/fluid/cloud.tsx";
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import {createUseStyles} from "react-jss";
 import {useWebsocket} from "../../hook/websocket/u-ws.tsx";
 import {Resp} from "../../interface/response.ts";
 import {useRegister} from "./hook/register.tsx";
+import {useLocalStore} from "../../store/local.ts";
 
 const useClass = createUseStyles({
     '@global': {
@@ -70,9 +71,9 @@ interface Bubble {
 }
 
 interface WSMessage {
-    body: Client;
+    data: any;
     time: number;
-    type: "register" | "enter" | "leave" | "offer" | "answer"
+    type: "register" | "enter" | "leave" | "offer" | "answer" | "candidate"
 }
 
 interface Client {
@@ -100,9 +101,9 @@ function handleFileChunk(chunk: any) {
 
 export const LocalSharing: React.FC = () => {
     const classes = useClass();
-    const {id, name, register } = useRegister()
+    const {id, name, set} = useLocalStore()
-    const [rtc, setRTC] = useState<RTCPeerConnection| null>(null);
+    const [rtc, setRTC] = useState<RTCPeerConnection>();
-    const [client, setClient] = useState<Client| null>(null);
+    const rtcRef = useRef<RTCPeerConnection>();
     const [clients, setClients] = useState<Client[]>([]);
     const {connect, close} = useWebsocket({})
 
@@ -175,7 +176,6 @@ export const LocalSharing: React.FC = () => {
             }
         }
 
-        console.log('[D] generated bubbles =', bubbles);
         return bubbles;
     };
 
@@ -183,38 +183,96 @@ export const LocalSharing: React.FC = () => {
         setTimeout(async () => {
             const res = await fetch(`/api/ulocal/clients`)
             const jes = await res.json() as Resp<Client[]>
-            console.log('[D] update clients =', jes)
+            // console.log('[D] update clients =', jes)
             setClients(jes.data)
         }, 500)
     }
 
     const handleWSEvent = async (e: MessageEvent) => {
+        let current_id: string;
+        let current_rtc: RTCPeerConnection
         const msg = JSON.parse(e.data) as WSMessage
         console.log('[D] ws event msg =', msg)
         switch (msg.type) {
-            case "register":
-                const reg_resp = JSON.parse(e.data) as { body: Client }
-                setClient(reg_resp.body)
-                break
             case "enter":
                 await updateClients()
-                break
+                return
             case "leave":
                 await updateClients()
-                break
+                return
             case "offer":
-                break
+                const offer_data = msg.data as { id: string; from: string; offer: RTCSessionDescriptionInit }
+                current_id = useLocalStore.getState().id
+                if (offer_data.id !== current_id) {
+                    console.warn(`[W] wrong offer id, want = ${current_id}, got = ${offer_data.id}, data =`, offer_data)
+                    return
+                }
+
+                current_rtc = rtcRef.current
+                if(!current_rtc) {
+                    console.warn('[W] rtc undefined')
+
+                    return
+                }
+
+                await current_rtc.setRemoteDescription(offer_data.offer)
+                const answer = await current_rtc.createAnswer()
+                if(!answer) {
+                    console.log('[W] answer undefined')
+                    return
+                }
+                await current_rtc.setLocalDescription(answer)
+
+                await fetch('/api/ulocal/answer', {
+                    method: 'POST',
+                    headers: {"Content-Type": "application/json"},
+                    body: JSON.stringify({id: offer_data.from, answer: answer})
+                })
+
+                return
             case  "answer":
-                break
+                const answer_data = msg.data as {answer: RTCSessionDescriptionInit; id: string}
+                current_id = useLocalStore.getState().id
+                if (answer_data.id !== current_id) {
+                    console.warn(`[W] wrong answer id, want = ${current_id}, got = ${answer_data.id}, data =`, answer_data)
+                }
+
+                current_rtc = rtcRef.current
+                if(!current_rtc) {
+                    console.warn('[W] rtc undefined')
+                    return
+                }
+
+                await current_rtc.setRemoteDescription(answer_data.answer)
+
+                return
+            case "candidate":
+                const candidate_data = msg.data as { candidate: RTCIceCandidateInit }
+                current_rtc = rtcRef.current
+                if(!current_rtc) {
+                    console.warn('[W] rtc undefined')
+                    return
+                }
+                if(!candidate_data.candidate) {
+                   console.log('[W] candidate data null')
+                    return
+                }
+                await current_rtc.addIceCandidate(candidate_data.candidate)
+                return
         }
     }
 
 // 气泡点击处理
     const handleBubbleClick = async (bubble: Bubble) => {
-        const offer = await rtc?.createOffer()
+        console.log(`[D] click id = ${bubble.id}`)
-        await rtc?.setLocalDescription(offer)
+        const current_rtc = rtcRef.current
+        current_rtc.onnegotiationneeded = async() => {
+            const offer = await current_rtc.createOffer()
+            console.log('[D] offer created', offer)
+            await current_rtc.setLocalDescription(offer)
             const data = {
                 id: bubble.id,
+                from: useLocalStore.getState().id,
                 offer: offer,
             }
             await fetch('/api/ulocal/offer', {
@@ -222,32 +280,49 @@ export const LocalSharing: React.FC = () => {
                 headers: {"Content-Type": "application/json"},
                 body: JSON.stringify(data)
             })
+        }
+        current_rtc.onicecandidate = async (e) => {
+            console.log('[D] on candidate ',e )
+            await fetch('/api/ulocal/candidate', {
+                method: 'POST',
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({candidate: e.candidate, id: useLocalStore.getState().id})
+            })
+        }
+        const ch = current_rtc.createDataChannel('local', {ordered: true})
+        setupDataChannel(ch)
     };
 
     useEffect(() => {
         const fn = async () => {
-            const reg_data = await register();
+            const response = await fetch('/api/ulocal/register', {method: 'POST'});
-            console.log(`[D] register id = ${reg_data?.id}`);
+            const data = ((await response.json()) as Resp<{id: string; name: string}>).data;
-            connect(`/api/ulocal/ws?id=${reg_data?.id}`, {fn: handleWSEvent})
+            set(data.id, data.name)
+            console.log(`[D] register id = ${data.id}`);
+            connect(`/api/ulocal/ws?id=${data.id}`, {fn: handleWSEvent})
             await updateClients()
-            const rtc = new RTCPeerConnection({iceServers: [{urls: "stun:stun.qq.com:3478"}]})
-            rtc.onicecandidate = async (e) => {
-                if(e.candidate) {
-                    await fetch('/api/ulocal/candidate')
-                }
-            }
-            setRTC(rtc)
 
-            return () => {close();}
+            const _rtc = new RTCPeerConnection();
+            rtcRef.current = _rtc;  // 同步设置 ref
+            setRTC(_rtc);           // 更新状态（如果需要触发渲染）
+
+            return () => {
+                close();
+                if (rtcRef) {
+                    rtcRef.current.close()
+                }
+            }
         };
         fn()
     }, [])
 
     return <div className={classes.container}>
         <CloudBackground/>
-        <h1 className={classes.title}>{name}</h1>
+        <h1 className={classes.title}>{name}
+            <span> - {id}</span>
+        </h1>
         {clients && generateBubbles().map(bubble => {
-            return client ? (
+            return (
                 <div
                     key={bubble.id}
                     className={classes.bubble}
@@ -263,7 +338,7 @@ export const LocalSharing: React.FC = () => {
                 >
                     {bubble.name}
                 </div>
-            ) : null;
+            );
         })}
     </div>
 }

frontend/src/store/local.ts

@@ -0,0 +1,17 @@
+import {create} from 'zustand'
+
+export interface LocalStore {
+    id: string;
+    name: string;
+    set: (id: string, name: string) => void;
+}
+
+export const useLocalStore = create<LocalStore>()((_set, get) => ({
+    id: '',
+    name: '',
+    set: (id: string, name: string) => {
+        _set(state => {
+            return {...state, id: id, name: name};
+        })
+    }
+}))

internal/api/api.go

@@ -28,6 +28,7 @@ func Start(ctx context.Context) <-chan struct{} {
 		api.Post("/register", handler.LocalRegister())
 		api.Post("/offer", handler.LocalOffer())
 		api.Post("/answer", handler.LocalAnswer())
+		api.Post("/candidate", handler.LocalCandidate())
 		api.Get("/clients", handler.LocalClients())
 		api.Get("/ws", handler.LocalWS())
 	}

internal/controller/room.go

@@ -224,16 +224,19 @@ func (rc *roomController) Unregister(client *roomClient) {
 	rc.Broadcast(map[string]any{"type": RoomMessageTypeLeave, "time": time.Now().UnixMilli(), "body": client})
 }
 
-func (rc *roomController) Offer(id string, offer *RoomOffer, candidate *RoomCandidate) {
+func (rc *roomController) Offer(id, from string, offer *RoomOffer) {
 	if _, ok := rc.clients[id]; !ok {
 		return
 	}
 
 	rc.clients[id].msgChan <- map[string]any{
 		"type": "offer",
+		"time": time.Now().UnixMilli(),
+		"data": map[string]any{
 			"id":    id,
+			"from":  from,
 			"offer": offer,
-		"candidate": candidate,
+		},
 	}
 }
 
@@ -244,7 +247,31 @@ func (rc *roomController) Answer(id string, answer *RoomOffer) {
 
 	rc.clients[id].msgChan <- map[string]any{
 		"type": "answer",
+		"time": time.Now().UnixMilli(),
+		"data": map[string]any{
 			"id":     id,
 			"answer": answer,
+		},
+	}
+}
+
+func (rc *roomController) Candidate(id string, candidate *RoomCandidate) {
+	if _, ok := rc.clients[id]; !ok {
+		return
+	}
+
+	for _, client := range rc.clients {
+		if client.Id == id {
+			continue
+		}
+
+		client.msgChan <- map[string]any{
+			"type": "candidate",
+			"time": time.Now().UnixMilli(),
+			"data": map[string]any{
+				"id":        client.Id,
+				"candidate": candidate,
+			},
+		}
 	}
 }

internal/handler/local.go

@@ -62,8 +62,8 @@ func LocalOffer() nf.HandlerFunc {
 	return func(c *nf.Ctx) error {
 		type Req struct {
 			Id    string                `json:"id"`
+			From  string                `json:"from"`
 			Offer *controller.RoomOffer `json:"offer"`
-			Candidate *controller.RoomCandidate `json:"candidate"`
 		}
 
 		var (
@@ -75,7 +75,7 @@ func LocalOffer() nf.HandlerFunc {
 			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": err.Error()})
 		}
 
-		controller.RoomController.Offer(req.Id, req.Offer, req.Candidate)
+		controller.RoomController.Offer(req.Id, req.From, req.Offer)
 
 		return resp.Resp200(c, req.Offer)
 	}
@@ -102,3 +102,25 @@ func LocalAnswer() nf.HandlerFunc {
 		return resp.Resp200(c, req)
 	}
 }
+
+func LocalCandidate() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		type Req struct {
+			Id        string                    `json:"id"`
+			Candidate *controller.RoomCandidate `json:"candidate"`
+		}
+
+		var (
+			err error
+			req = new(Req)
+		)
+
+		if err = c.BodyParser(req); err != nil {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": err.Error()})
+		}
+
+		controller.RoomController.Candidate(req.Id, req.Candidate)
+
+		return resp.Resp200(c, req)
+	}
+}