wip: 0.2.1

1. websocket 连接,退出 优化
  2. 基本页面

frontend/src/interface/response.ts

@@ -0,0 +1,6 @@
+export interface Resp<T>{
+    status: number;
+    msg: string;
+    err: string;
+    data: T;
+}

frontend/src/main.tsx

@@ -1,19 +1,21 @@
-import { StrictMode } from 'react'
+// import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import {Login} from "./page/login.tsx";
 import {FileSharing} from "./page/share.tsx";
+import {LocalSharing} from "./page/local.tsx";
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
 const router = createBrowserRouter([
     {path: "/login", element: <Login />},
-    {path: "*", element: <FileSharing />},
+    {path: "/share", element: <FileSharing />},
+    {path: "*", element: <LocalSharing />},
 ])
 
 root.render(
-    <StrictMode>
+    // <StrictMode>
         <RouterProvider router={router} />
-    </StrictMode>,
+    // </StrictMode>,
 )

frontend/src/page/local.tsx

@@ -0,0 +1,190 @@
+import {CloudBackground} from "../component/fluid/cloud.tsx";
+import {useEffect} from "react";
+import {createUseStyles} from "react-jss";
+import {useRTC} from "../store/rtc.ts";
+import {Client, useRoom} from "../store/local.ts";
+
+const useClass = createUseStyles({
+    '@global': {
+        '@keyframes emerge': {
+            '0%': {
+                transform: 'scale(0) translate(-50%, -50%)',
+                opacity: 0
+            },
+            '80%': {
+                transform: 'scale(1.1) translate(-50%, -50%)',
+                opacity: 1
+            },
+            '100%': {
+                transform: 'scale(1) translate(-50%, -50%)',
+                opacity: 1
+            }
+        }
+    },
+    container: {
+        margin: "0",
+        height: "100vh",
+        // background: "linear-gradient(45deg, #e6e9f0, #eef1f5)",
+        overflow: "hidden",
+        position: "relative",
+    },
+    title: {
+        width: '100%',
+        display: "flex",
+        justifyContent: "center",
+        color: '#1661ab',
+    },
+    bubble: {
+        position: "absolute",
+        width: "100px",
+        height: "100px",
+        borderRadius: "50%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        cursor: "pointer",
+        fontFamily: "'Microsoft Yahei', sans-serif",
+        fontSize: "14px",
+        color: "rgba(255, 255, 255, 0.9)",
+        textShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+        transition: "transform 0.3s ease",
+        transform: 'translate(-50%, -50%)',
+        animation: 'emerge 0.5s ease-out forwards,float 6s 0.5s ease-in-out infinite',
+        background: "radial-gradient(circle at 30% 30%,rgba(255, 255, 255, 0.8) 10%,rgba(255, 255, 255, 0.3) 50%,transparent 100%)",
+        border: "2px solid rgba(255, 255, 255, 0.5)",
+        boxShadow: "inset 0 -5px 15px rgba(255,255,255,0.3),0 5px 15px rgba(0,0,0,0.1)",
+    }
+})
+
+
+interface Bubble {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    color: string;
+    radius: number; // 新增半径属性
+    angle: number;  // 新增角度属性
+}
+
+export const LocalSharing: React.FC = () => {
+    const classes = useClass();
+    const {register, enter, list, cleanup, client, clients} = useRoom();
+    const {connect, create} = useRTC();
+
+    // 生成随机颜色
+    const generateColor = () => {
+        const hue = Math.random() * 360;
+        return `hsla(${hue}, 
+            ${Math.random() * 30 + 40}%, 
+            ${Math.random() * 10 + 75}%, 0.9)`;
+    };
+
+    // 防碰撞位置生成
+    const generateBubbles = (cs: Client[]) => {
+        if (!cs) return []
+
+        const BUBBLE_SIZE = 100;
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
+
+        const bubbles: Bubble[] = [];
+        let currentRadius = 0;
+        let angleStep = (2 * Math.PI) / 6; // 初始6个位置
+
+        for (let index = 0; index < cs.length; index++) {
+            let attempt = 0;
+            let validPosition = false;
+
+            if (cs[index].id == client?.id) {
+                continue
+            }
+
+            while (!validPosition && attempt < 100) {
+                // 螺旋布局算法
+                const angle = angleStep * (index + attempt);
+                const radius = currentRadius + (attempt * BUBBLE_SIZE * 0.8);
+
+                // 极坐标转笛卡尔坐标
+                const x = centerX + radius * Math.cos(angle);
+                const y = centerY + radius * Math.sin(angle);
+
+                // 边界检测
+                const inBounds = x >= 0 && x <= window.innerWidth - BUBBLE_SIZE &&
+                    y >= 0 && y <= window.innerHeight - BUBBLE_SIZE;
+
+                // 碰撞检测
+                const collision = bubbles.some(pos => {
+                    const distance = Math.sqrt(
+                        Math.pow(pos.x - x, 2) +
+                        Math.pow(pos.y - y, 2)
+                    );
+                    return distance < BUBBLE_SIZE * 1.5;
+                });
+
+                if (inBounds && !collision) {
+                    bubbles.push({
+                        id: cs[index].id,
+                        name: cs[index].name,
+                        x: x,
+                        y: y,
+                        color: generateColor(),
+                    } as Bubble);
+
+                    // 动态调整布局参数
+                    currentRadius = Math.max(currentRadius, radius);
+                    angleStep = (2 * Math.PI) / Math.max(6, bubbles.length * 0.7);
+                    validPosition = true;
+                }
+
+                attempt++;
+            }
+        }
+
+        return bubbles;
+    };
+
+    useEffect(() => {
+        register().then(() => {
+            enter().then(() => {
+                list().then()
+            })
+        });
+        connect().then(() => {
+            console.log("[D] rtc create!!!")
+        })
+        return () => cleanup();
+    }, []);
+
+    // 气泡点击处理
+    const handleBubbleClick = async (id: string) => {
+        console.log('[D] click bubble!!!', id)
+        await create()
+    };
+
+    return <div className={classes.container}>
+        <CloudBackground/>
+        <h1 className={classes.title}>{client?.name}</h1>
+        {clients && generateBubbles(clients).map(bubble => {
+            // const client = clients.find(c => c.id === bubble.id);
+            return client ? (
+                <div
+                    key={bubble.id}
+                    className={classes.bubble}
+                    style={{
+                        left: bubble.x,
+                        top: bubble.y,
+                        backgroundColor: bubble.color,
+                        animationDelay:
+                            `${Math.random() * 0.5}s, 
+                     ${0.5 + Math.random() * 2}s`
+                    }}
+                    onClick={() => handleBubbleClick(bubble.id)}
+                >
+                    {bubble.name}
+                </div>
+            ) : null;
+        })}
+    </div>
+}

frontend/src/store/local.ts

@@ -0,0 +1,140 @@
+import {create} from 'zustand'
+import {Resp} from "../interface/response.ts";
+
+export interface Client {
+    client_type: 'desktop' | 'mobile' | 'tablet';
+    app_type: 'web';
+    room: string;
+    ip: number;
+    name: string;
+    id: string;
+    register_at: string;
+}
+
+type RoomState = {
+    conn: WebSocket | null
+    client: Client | null
+    clients: Client[]
+    retryCount: number
+    reconnectTimer: number | null
+}
+
+type RoomActions = {
+    register: () => Promise<void>
+    enter: () => Promise<void>
+    list: () => Promise<void>
+    cleanup: () => void
+}
+
+interface Message {
+    type: 'ping' | 'self' | 'enter' | 'leave';
+    time: number;
+    body: any;
+}
+
+const MAX_RETRY_DELAY = 30000 // 最大重试间隔30秒
+const NORMAL_CLOSE_CODE = 1000 // 正常关闭的状态码
+
+export const useRoom = create<RoomState & RoomActions>()((set, get) => ({
+    conn: null,
+    client: null,
+    clients: [],
+    retryCount: 0,
+    reconnectTimer: null,
+    register: async () => {
+        const api = `/api/ulocal/register`
+        const res = await fetch(api, {method: 'POST'})
+        const jes = await res.json() as Resp<Client>
+        return set(state => {
+            return {...state, client: jes.data}
+        })
+    },
+    enter: async () => {
+        const {conn, reconnectTimer} = get()
+
+        // 清理旧连接和定时器
+        if (reconnectTimer) clearTimeout(reconnectTimer)
+        if (conn) conn.close()
+
+        const api = `${window.location.protocol === 'https' ? 'wss' : 'ws'}://${window.location.host}/api/ulocal/ws?id=${get().client?.id}`
+        console.log('[D] websocket api =',api)
+        const newConn = new WebSocket(api)
+
+        newConn.onopen = () => {
+            set({conn: newConn, retryCount: 0}) // 重置重试计数器
+        }
+
+        newConn.onerror = (error) => {
+            console.error('WebSocket error:', error)
+        }
+
+        newConn.onmessage = (event) => {
+            const msg = JSON.parse(event.data) as Message;
+            console.log('[D] ws msg =', msg)
+            let nc: Client
+            switch (msg.type) {
+                case "enter":
+                    nc = msg.body as Client
+                    if(nc.id && nc.name && nc.id !== get().client?.id) {
+                        console.log('[D] enter new client =', nc)
+                        set(state => {
+                            return {...state, clients: [...get().clients, nc]}
+                        })
+                    }
+                    break
+                case "leave":
+                    nc = msg.body as Client
+                    if(nc.id) {
+                        let idx = 0;
+                        let items = get().clients;
+                        for (const item of items) {
+                            if (item.id === nc.id) {
+                                items.splice(idx, 1)
+                                set(state => {
+                                    return {...state, clients: items}
+                                })
+                               break;
+                            }
+                            idx++;
+                        }
+                    }
+                    break
+            }
+        }
+
+        newConn.onclose = (event) => {
+            // 非正常关闭时触发重连
+            if (event.code !== NORMAL_CLOSE_CODE) {
+                const {retryCount} = get()
+                const nextRetry = retryCount + 1
+                const delay = Math.min(1000 * Math.pow(2, nextRetry), MAX_RETRY_DELAY)
+
+                const timer = setTimeout(() => {
+                    get().register()
+                }, delay)
+
+                set({
+                    retryCount: nextRetry,
+                    reconnectTimer: timer,
+                    conn: null
+                })
+            }
+        }
+
+        set({conn: newConn, reconnectTimer: null})
+    },
+    list: async () => {
+        const api = "/api/ulocal/clients?room="
+        const res = await fetch(api + get().client?.room)
+        const jes = await res.json() as Resp<Client[]>
+        set(state => {
+            return {...state, clients: jes.data}
+        })
+    },
+    cleanup: () => {
+        const {conn, reconnectTimer} = get()
+        if (reconnectTimer) clearTimeout(reconnectTimer)
+        if (conn) conn.close()
+        set({conn: null, retryCount: 0, reconnectTimer: null})
+    }
+}))

frontend/src/store/rtc.ts

@@ -0,0 +1,50 @@
+import {create} from 'zustand'
+
+type RTCState = {
+    conn: RTCPeerConnection | null
+}
+
+type RTCAction = {
+    connect: () => Promise<void>
+    create: () => Promise<void>
+    cleanup: () => void
+}
+
+export const useRTC = create<RTCState & RTCAction>()((set, get) => ({
+    conn: null,
+    connect: async () => {
+        const conn = new RTCPeerConnection()
+
+        const ch = conn.createDataChannel("fileTransfer", {ordered: true})
+
+        console.log('[D] channel =', ch)
+
+        ch.onopen = (event) => {
+            console.log('🚀🚀🚀 / rtc open event', event)
+        }
+
+        ch.onclose = (event) => {
+        }
+
+        ch.onerror = (event) => {
+        }
+
+        ch.onmessage = (event) => {
+            console.log('🚀🚀🚀 / rtc message event', event)
+        }
+
+        set((state) => {
+            return {...state, conn: conn}
+        })
+    },
+    create: async () => {
+        const conn = get().conn
+        if (conn) conn.onicecandidate = async (event) => {
+            console.log('[D] rtc local desc =', conn.localDescription)
+            const offer = await conn.createOffer()
+            await conn.setLocalDescription(offer)
+        }
+    },
+    cleanup: () => {
+    },
+}))

frontend/vite.config.ts

@@ -10,6 +10,11 @@ export default defineConfig({
         target: 'http://127.0.0.1:9119',
         changeOrigin: true
       },
+      '/api/ulocal/ws': {
+        target: 'ws://127.0.0.1:9119',
+        rewriteWsOrigin: true,
+        ws: true,
+      },
       '/ushare': {
         target: 'http://127.0.0.1:9119',
         changeOrigin: true

go.mod

@@ -23,6 +23,7 @@ require (
 	github.com/go-viper/mapstructure/v2 v2.2.1 // indirect
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
 	github.com/google/uuid v1.6.0 // indirect
+	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/jbenet/go-context v0.0.0-20150711004518-d14ea06fba99 // indirect
 	github.com/jedib0t/go-pretty/v6 v6.6.7 // indirect
 	github.com/kevinburke/ssh_config v1.2.0 // indirect
@@ -30,6 +31,7 @@ require (
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-runewidth v0.0.16 // indirect
+	github.com/mileusna/useragent v1.3.5 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
 	github.com/pjbgf/sha1cd v0.3.0 // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect

go.sum

@@ -46,6 +46,8 @@ github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/jbenet/go-context v0.0.0-20150711004518-d14ea06fba99 h1:BQSFePA1RWJOlocH6Fxy8MmwDt+yVQYULKfN0RoTN8A=
 github.com/jbenet/go-context v0.0.0-20150711004518-d14ea06fba99/go.mod h1:1lJo3i6rXxKeerYnT8Nvf0QmHCRC1n8sfWVwXF2Frvo=
 github.com/jedib0t/go-pretty/v6 v6.6.7 h1:m+LbHpm0aIAPLzLbMfn8dc3Ht8MW7lsSO4MPItz/Uuo=
@@ -70,6 +72,8 @@ github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWE
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
 github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/mileusna/useragent v1.3.5 h1:SJM5NzBmh/hO+4LGeATKpaEX9+b4vcGg2qXGLiNGDws=
+github.com/mileusna/useragent v1.3.5/go.mod h1:3d8TOmwL/5I8pJjyVDteHtgDGcefrFUX4ccGOMKNYYc=
 github.com/onsi/gomega v1.27.10 h1:naR28SdDFlqrG6kScpT8VWpu1xWY5nJRCF3XaYyBjhI=
 github.com/onsi/gomega v1.27.10/go.mod h1:RsS8tutOdbdgzbPtzzATp12yT7kM5I5aElG3evPbQ0M=
 github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=

internal/api/api.go

@@ -23,6 +23,13 @@ func Start(ctx context.Context) <-chan struct{} {
 	app.Post("/api/ushare/:code", handler.ShareUpload())                       // 分片上传接口
 	app.Post("/api/uauth/login", handler.AuthLogin())
 
+	{
+		api := app.Group("/api/ulocal")
+		api.Post("/register", handler.LocalRegister())
+		api.Get("/clients", handler.LocalClients())
+		api.Get("/ws", handler.LocalWS())
+	}
+
 	ready := make(chan struct{})
 	ln, err := net.Listen("tcp", opt.Cfg.Address)
 	if err != nil {

internal/controller/room.go

@@ -0,0 +1,242 @@
+// room controller:
+// local share websocket room controller
+// same remote IP as a
+package controller
+
+import (
+	"context"
+	"encoding/json"
+	"github.com/google/uuid"
+	"github.com/gorilla/websocket"
+	"github.com/loveuer/nf/nft/log"
+	"github.com/loveuer/ushare/internal/pkg/tool"
+	"github.com/mileusna/useragent"
+	"sync"
+	"time"
+)
+
+type RoomClientType string
+
+const (
+	ClientTypeDesktop RoomClientType = "desktop"
+	ClientTypeMobile  RoomClientType = "mobile"
+	ClientTypeTablet  RoomClientType = "tablet"
+)
+
+type RoomAppType string
+
+const (
+	RoomAppTypeWeb = "web"
+)
+
+type RoomMessageType string
+
+const (
+	RoomMessageTypePing  RoomMessageType = "ping"
+	RoomMessageTypeSelf  RoomMessageType = "self"
+	RoomMessageTypeEnter RoomMessageType = "enter"
+	RoomMessageTypeLeave RoomMessageType = "leave"
+)
+
+type roomClient struct {
+	controller *roomController
+	conn       *websocket.Conn
+	ClientType RoomClientType `json:"client_type"`
+	AppType    RoomAppType    `json:"app_type"`
+	IP         string         `json:"ip"`
+	Room       string         `json:"room"`
+	Name       string         `json:"name"`
+	Id         string         `json:"id"`
+	RegisterAt time.Time      `json:"register_at"`
+	msgChan    chan any
+}
+
+func (rc *roomClient) start(ctx context.Context) {
+	// start write
+	go func() {
+		for {
+			select {
+			case <-ctx.Done():
+				_ = rc.conn.Close()
+				return
+			case msg, _ := <-rc.msgChan:
+				err := rc.conn.WriteJSON(msg)
+				log.Debug("RoomClient: write json message, IP = %s, Id = %s, Name = %s, err = %v", rc.IP, rc.Id, rc.Name, err)
+				if err != nil {
+					log.Error("RoomClient: write json message failed, IP = %s, Id = %s, Name = %s, err = %s", rc.IP, rc.Id, rc.Name, err.Error())
+				}
+			}
+		}
+	}()
+
+	// start read
+	go func() {
+		for {
+			mt, bs, err := rc.conn.ReadMessage()
+			if err != nil {
+				log.Error("RoomClient: read message failed, IP = %s, Id = %s, Name = %s, err = %s", rc.IP, rc.Id, rc.Name, err.Error())
+				rc.controller.Unregister(rc)
+				return
+			}
+
+			switch mt {
+			case websocket.PingMessage:
+				rs, _ := json.Marshal(map[string]any{"type": "pong", "time": time.Now().UnixMilli(), "Id": rc.Id, "Name": rc.Name})
+				if err := rc.conn.WriteMessage(websocket.PongMessage, rs); err != nil {
+					log.Error("RoomClient: response ping message failed, IP = %s, Id = %s, Name = %s, err = %s", rc.IP, rc.Id, rc.Name, err.Error())
+				}
+			case websocket.CloseMessage:
+				log.Debug("RoomClient: received close message, unregister IP = %s Id = %s, Name = %s", rc.IP, rc.Id, rc.Name)
+				rc.controller.Unregister(rc)
+				return
+			case websocket.TextMessage:
+				log.Info("RoomClient: received text message, IP = %s, Id = %s, Name = %s, text = %s", rc.IP, rc.Id, rc.Name, string(bs))
+			case websocket.BinaryMessage:
+				// todo
+				log.Info("RoomClient: received bytes message, IP = %s, Id = %s, Name = %s, text = %s", rc.IP, rc.Id, rc.Name, string(bs))
+			}
+		}
+	}()
+}
+
+type roomController struct {
+	sync.Mutex
+	ctx        context.Context
+	rooms      map[string]map[string]*roomClient // map[room_id(remote-IP)][Id]
+	notReadies map[string]*roomClient
+}
+
+var (
+	RoomController = &roomController{
+		rooms:      make(map[string]map[string]*roomClient),
+		notReadies: make(map[string]*roomClient),
+	}
+)
+
+func (rc *roomController) Start(ctx context.Context) {
+	rc.ctx = ctx
+	go func() {
+		ticker := time.NewTicker(1 * time.Minute)
+		for {
+			select {
+			case <-rc.ctx.Done():
+				return
+			case now := <-ticker.C:
+				for _, nrc := range rc.notReadies {
+					if now.Sub(nrc.RegisterAt).Minutes() > 1 {
+						rc.Lock()
+						delete(rc.notReadies, nrc.Id)
+						rc.Unlock()
+					}
+				}
+			}
+		}
+	}()
+}
+
+func (rc *roomController) Register(ip, userAgent string) *roomClient {
+	nrc := &roomClient{
+		controller: rc,
+		ClientType: ClientTypeDesktop,
+		AppType:    RoomAppTypeWeb,
+		IP:         ip,
+		Id:         uuid.Must(uuid.NewV7()).String(),
+		Name:       tool.RandomName(),
+		msgChan:    make(chan any, 1),
+		RegisterAt: time.Now(),
+	}
+
+	ua := useragent.Parse(userAgent)
+	switch {
+	case ua.Mobile:
+		nrc.ClientType = ClientTypeMobile
+	case ua.Tablet:
+		nrc.ClientType = ClientTypeTablet
+	}
+
+	key := "local"
+	if !tool.IsPrivateIP(ip) {
+		key = ip
+	}
+
+	nrc.Room = key
+
+	rc.Lock()
+
+	log.Debug("controller.room: registry client, IP = %s(%s), Id = %s, Name = %s", key, nrc.IP, nrc.Id, nrc.Name)
+	rc.notReadies[nrc.Id] = nrc
+	if _, ok := rc.rooms[nrc.Room]; !ok {
+		rc.rooms[nrc.Room] = make(map[string]*roomClient)
+	}
+
+	rc.Unlock()
+
+	return nrc
+}
+
+func (rc *roomController) Enter(conn *websocket.Conn, id string) {
+	client, ok := rc.notReadies[id]
+	if !ok {
+		log.Warn("controller.room: entry room id not exist, id = %s", id)
+		return
+	}
+
+	rc.Lock()
+
+	if _, ok = rc.rooms[client.Room]; !ok {
+		log.Warn("controller.room: entry room not exist, room = %s, id = %s, name = %s", client.Room, id, client.Name)
+		return
+	}
+
+	rc.rooms[client.Room][id] = client
+	client.conn = conn
+
+	rc.Unlock()
+
+	client.start(rc.ctx)
+
+	rc.Broadcast(client.Room, map[string]any{"type": RoomMessageTypeEnter, "time": time.Now().UnixMilli(), "body": client})
+}
+
+func (rc *roomController) List(room string) []*roomClient {
+	clientList := make([]*roomClient, 0)
+
+	rc.Lock()
+	defer rc.Unlock()
+
+	clients, ok := rc.rooms[room]
+	if !ok {
+		return clientList
+	}
+
+	for _, client := range clients {
+		clientList = append(clientList, client)
+	}
+
+	return clientList
+}
+
+func (rc *roomController) Broadcast(room string, msg any) {
+	for _, client := range rc.rooms[room] {
+		select {
+		case client.msgChan <- msg:
+		case <-time.After(2 * time.Second):
+			log.Warn("RoomController: broadcast timeout, room = %s, client Id = %s, IP = %s", room, client.Id, client.IP)
+		}
+	}
+}
+
+func (rc *roomController) Unregister(client *roomClient) {
+	key := "local"
+	if !tool.IsPrivateIP(client.IP) {
+		key = client.IP
+	}
+
+	log.Debug("controller.room: unregister client, IP = %s(%s), Id = %s, Name = %s", client.IP, key, client.Id, client.Name)
+
+	rc.Lock()
+	delete(rc.rooms[key], client.Id)
+	rc.Unlock()
+
+	rc.Broadcast(key, map[string]any{"type": RoomMessageTypeLeave, "time": time.Now().UnixMilli(), "body": client})
+}

internal/handler/local.go

@@ -0,0 +1,63 @@
+package handler
+
+import (
+	"github.com/gorilla/websocket"
+	"github.com/loveuer/nf"
+	"github.com/loveuer/nf/nft/log"
+	"github.com/loveuer/nf/nft/resp"
+	"github.com/loveuer/ushare/internal/controller"
+	"net/http"
+)
+
+func LocalRegister() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		ip := c.IP(true)
+		ua := c.Get("User-Agent")
+
+		client := controller.RoomController.Register(ip, ua)
+
+		return resp.Resp200(c, client)
+	}
+}
+
+func LocalClients() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		room := c.Query("room")
+		if room == "" {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": "room can't be empty"})
+		}
+
+		list := controller.RoomController.List(room)
+
+		return resp.Resp200(c, list)
+	}
+}
+
+func LocalWS() nf.HandlerFunc {
+	upgrader := websocket.Upgrader{
+		ReadBufferSize:  1024,
+		WriteBufferSize: 1024,
+		CheckOrigin: func(r *http.Request) bool {
+			return true
+		},
+	}
+
+	return func(c *nf.Ctx) error {
+
+		id := c.Query("id")
+
+		if id == "" {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"error": "id is empty"})
+		}
+
+		conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
+		if err != nil {
+			log.Error("LocalWS: failed to upgrade websocket connection, err = %s", err.Error())
+			return err
+		}
+
+		controller.RoomController.Enter(conn, id)
+
+		return nil
+	}
+}

internal/pkg/tool/ip.go

@@ -0,0 +1,59 @@
+package tool
+
+import (
+	"net"
+)
+
+var (
+	privateIPv4Blocks []*net.IPNet
+	privateIPv6Blocks []*net.IPNet
+)
+
+func init() {
+	// IPv4私有地址段
+	for _, cidr := range []string{
+		"10.0.0.0/8",     // A类私有地址
+		"172.16.0.0/12",  // B类私有地址
+		"192.168.0.0/16", // C类私有地址
+		"169.254.0.0/16", // 链路本地地址
+		"127.0.0.0/8",    // 环回地址
+	} {
+		_, block, _ := net.ParseCIDR(cidr)
+		privateIPv4Blocks = append(privateIPv4Blocks, block)
+	}
+
+	// IPv6私有地址段
+	for _, cidr := range []string{
+		"fc00::/7",  // 唯一本地地址
+		"fe80::/10", // 链路本地地址
+		"::1/128",   // 环回地址
+	} {
+		_, block, _ := net.ParseCIDR(cidr)
+		privateIPv6Blocks = append(privateIPv6Blocks, block)
+	}
+}
+
+func IsPrivateIP(ipStr string) bool {
+	ip := net.ParseIP(ipStr)
+	if ip == nil {
+		return false
+	}
+
+	// 处理IPv4和IPv4映射的IPv6地址
+	if ip4 := ip.To4(); ip4 != nil {
+		for _, block := range privateIPv4Blocks {
+			if block.Contains(ip4) {
+				return true
+			}
+		}
+		return false
+	}
+
+	// 处理IPv6地址
+	for _, block := range privateIPv6Blocks {
+		if block.Contains(ip) {
+			return true
+		}
+	}
+	return false
+}

internal/pkg/tool/random.go

@@ -3,14 +3,31 @@ package tool
 import (
 	"crypto/rand"
 	"math/big"
+	mrand "math/rand"
 )
 
 var (
-	letters   = []byte("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
-	letterNum = []byte("0123456789")
-	letterLow = []byte("abcdefghijklmnopqrstuvwxyz")
-	letterCap = []byte("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
-	letterSyb = []byte("!@#$%^&*()_+-=")
+	letters    = []byte("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
+	letterNum  = []byte("0123456789")
+	letterLow  = []byte("abcdefghijklmnopqrstuvwxyz")
+	letterCap  = []byte("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
+	letterSyb  = []byte("!@#$%^&*()_+-=")
+	adjectives = []string{
+		"开心的", "灿烂的", "温暖的", "阳光的", "活泼的",
+		"聪明的", "优雅的", "幸运的", "甜蜜的", "勇敢的",
+		"宁静的", "热情的", "温柔的", "幽默的", "坚强的",
+		"迷人的", "神奇的", "快乐的", "健康的", "自由的",
+		"梦幻的", "勤劳的", "真诚的", "浪漫的", "自信的",
+	}
+
+	plants = []string{
+		"苹果", "香蕉", "橘子", "葡萄", "草莓",
+		"西瓜", "樱桃", "菠萝", "柠檬", "蜜桃",
+		"蓝莓", "芒果", "石榴", "甜瓜", "雪梨",
+		"番茄", "南瓜", "土豆", "青椒", "洋葱",
+		"黄瓜", "萝卜", "豌豆", "玉米", "蘑菇",
+		"菠菜", "茄子", "芹菜", "莲藕", "西兰花",
+	}
 )
 
 func RandomInt(max int64) int64 {
@@ -52,3 +69,7 @@ func RandomPassword(length int, withSymbol bool) string {
 	}
 	return string(result)
 }
+
+func RandomName() string {
+	return adjectives[mrand.Intn(len(adjectives))] + plants[mrand.Intn(len(plants))]
+}

main.go

@@ -31,6 +31,7 @@ func main() {
 	opt.Init(ctx)
 	controller.UserManager.Start(ctx)
 	controller.MetaManager.Start(ctx)
+	controller.RoomController.Start(ctx)
 	api.Start(ctx)
 
 	<-ctx.Done()

page/bubble.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>柔和气泡</title>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            background: linear-gradient(45deg, #e6e9f0, #eef1f5);
+            overflow: hidden;
+            position: relative;
+        }
+
+        .bubble {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            cursor: pointer;
+            font-family: 'Microsoft Yahei', sans-serif;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.9);
+            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+            transition: transform 0.3s ease;
+            animation: float 6s ease-in-out infinite;
+            /* 泡泡细节 */
+            background: radial-gradient(circle at 30% 30%,
+            rgba(255, 255, 255, 0.8) 10%,
+            rgba(255, 255, 255, 0.3) 50%,
+            transparent 100%);
+            border: 2px solid rgba(255, 255, 255, 0.5);
+            box-shadow: inset 0 -5px 15px rgba(255,255,255,0.3),
+            0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        /* 高光效果 */
+        .bubble::before {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+            top: 15px;
+            right: 15px;
+            filter: blur(2px);
+        }
+
+        .bubble:hover {
+            transform: scale(1.05) rotate(3deg);
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            33% { transform: translateY(-20px) rotate(3deg); }
+            66% { transform: translateY(10px) rotate(-3deg); }
+        }
+    </style>
+</head>
+<body>
+<script>
+    const prefixes = ['宁静', '温暖', '甜蜜', '柔和', '灿烂', '神秘', '清爽'];
+    const suffixes = ['梦境', '时光', '旋律', '花园', '云端', '海洋', '晨露'];
+    const existingPositions = [];
+    const BUBBLE_SIZE = 100;
+
+    // 检测碰撞
+    function checkCollision(x, y) {
+        return existingPositions.some(pos => {
+            const distance = Math.sqrt(
+                Math.pow(x - pos.x, 2) +
+                Math.pow(y - pos.y, 2)
+            );
+            return distance < BUBBLE_SIZE * 1.2;
+        });
+    }
+
+    function createBubble() {
+        let x, y;
+        let attempts = 0;
+
+        // 生成非重叠位置
+        do {
+            x = Math.random() * (window.innerWidth - BUBBLE_SIZE);
+            y = Math.random() * (window.innerHeight - BUBBLE_SIZE);
+            attempts++;
+        } while (checkCollision(x, y) && attempts < 100);
+
+        if (attempts >= 100) return;
+
+        existingPositions.push({x, y});
+
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble';
+
+        // 随机颜色
+        const hue = Math.random() * 360;
+        bubble.style.backgroundColor = `hsla(${hue},
+                ${Math.random() * 30 + 40}%,
+                ${Math.random() * 10 + 75}%, 0.9)`;
+
+        // 随机名称
+        bubble.textContent = `${prefixes[Math.random()*prefixes.length|0]}的${suffixes[Math.random()*suffixes.length|0]}`;
+
+        // 位置和动画
+        bubble.style.left = x + 'px';
+        bubble.style.top = y + 'px';
+        bubble.style.animationDelay = Math.random() * 2 + 's';
+
+        // 点击效果
+        bubble.addEventListener('click', () => {
+            bubble.style.transition = 'transform 0.5s, opacity 0.5s';
+            bubble.style.transform = 'scale(1.5)';
+            bubble.style.opacity = '0';
+            setTimeout(() => {
+                bubble.remove();
+                existingPositions.splice(existingPositions.findIndex(
+                    pos => pos.x === x && pos.y === y), 1);
+                createBubble();
+            }, 500);
+        });
+
+        document.body.appendChild(bubble);
+    }
+
+    // 初始化15个气泡
+    for (let i = 0; i < 15; i++) createBubble();
+
+    // 自动补充气泡
+    setInterval(() => {
+        if (document.querySelectorAll('.bubble').length < 20) {
+            createBubble();
+        }
+    }, 3000);
+
+    // 窗口大小变化时重置
+    window.addEventListener('resize', () => {
+        existingPositions.length = 0;
+        document.querySelectorAll('.bubble').forEach(bubble => bubble.remove());
+        for (let i = 0; i < 15; i++) createBubble();
+    });
+</script>
+</body>
+</html>