一个可爱的对话气泡覆盖层，适用于 VTube Studio、OBS 等直播场景。支持局域网远程控制，手机上也能发送消息。
- 带猫耳的可爱对话气泡，打字动画效果
- 支持自动消失 / 保持显示 / 消息堆叠三种驻留模式
- 气泡位置、大小、字体、颜色、尾巴方向全部可自定义
- 口癖自动添加（如 "喵~"）
- 消息历史记录，支持重发
- 局域网远程访问，手机浏览器即可控制
- 访问码验证，防止未授权使用
npm install
npm start启动后终端会显示：
┌─────────────────────────────────────┐
│ 🐾 喵娘对话气泡服务器 │
├─────────────────────────────────────┤
│ 气泡显示: http://192.168.x.x:8765/bubble
│ 控制台: http://192.168.x.x:8765/control
│ 访问码: 3847 │
└─────────────────────────────────────┘
添加浏览器源，地址填气泡显示页面的 URL：
- 本机使用：
http://localhost:8765/bubble - 远程使用：
http://你的IP:8765/bubble
背景设为透明即可叠加在画面上。
浏览器打开控制台 URL（如 http://192.168.x.x:8765/control），输入访问码登录后即可：
- 发送对话文本
- 调整气泡样式和位置
- 切换驻留模式
- 查看和重发历史消息
手机浏览器打开同一局域网下的控制台地址，输入访问码即可远程发送消息。
| 分类 | 配置项 | 说明 |
|---|---|---|
| 驻留模式 | 自动消失 / 保持显示 / 消息堆叠 | 气泡的显示和消失行为 |
| 消失时间 | 2~30 秒 | 自动消失模式下的延迟 |
| 打字速度 | 20~200ms | 每个字的显示间隔 |
| 气泡宽度 | 200~700px | 气泡的宽度 |
| 字号 | 12~36px | 文字大小 |
| 字体 | 微软雅黑 / 苹方 / 黑体 / 楷体 / 仿宋 / 手写体 | 字体族 |
| 加粗 | 开/关 | 文字加粗 |
| 字体颜色 | 任意颜色 | 文字颜色 |
| 水平位置 | 0~100% | 气泡在画面中的水平位置 |
| 垂直位置 | 0~100% | 气泡在画面中的垂直位置 |
| 突起方向 | 左 / 右 | 气泡尾巴的方向 |
| 突起偏移 | 10~200px | 尾巴距气泡边缘的距离 |
| 口癖 | 自定义文字 + 开关 | 自动添加在句末 |
vts-speech-bubble/
├── server.js # 服务端：Express + WebSocket + 状态管理
├── public/
│ ├── bubble/ # 气泡显示端
│ │ ├── index.html
│ │ ├── style.css
│ │ └── main.js
│ ├── control/ # 控制台端
│ │ ├── index.html
│ │ ├── style.css
│ │ └── main.js
│ └── shared/
│ ├── protocol.js # 通信协议定义
│ └── ws-client.js # WebSocket 客户端工具
├── package.json
└── .gitignore
- 服务端：Node.js + Express + ws
- 前端：原生 HTML/CSS/JS，无框架依赖
- 通信：WebSocket，服务端维护配置状态，新客户端即时同步
- 安全：HMAC 签名 Token + 4 位访问码
MIT