{"id":30524911,"url":"https://github.com/zhjain/bubbleboard","last_synced_at":"2026-04-19T07:32:37.772Z","repository":{"id":308888271,"uuid":"1032294903","full_name":"zhjain/bubbleboard","owner":"zhjain","description":"一个现代化的实时协作平台，使用 Elixir/Phoenix + Alpine.js 构建。提供多用户实时聊天、协作绘图白板、用户在线状态管理等功能。基于 WebSocket 技术实现低延迟的实时通信，适合团队协作、在线教学和创意分享场景。","archived":false,"fork":false,"pushed_at":"2025-08-22T09:01:02.000Z","size":113,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-27T02:56:05.176Z","etag":null,"topics":["alpine-js","chat","collaboration","drawing","elixir","phoenix","real-time","tailwindcss","websocket","whiteboard"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhjain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-05T05:30:45.000Z","updated_at":"2025-08-21T09:06:35.000Z","dependencies_parsed_at":"2025-08-26T21:13:27.328Z","dependency_job_id":null,"html_url":"https://github.com/zhjain/bubbleboard","commit_stats":null,"previous_names":["zhjain/bubbleboard"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/zhjain/bubbleboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhjain%2Fbubbleboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhjain%2Fbubbleboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhjain%2Fbubbleboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhjain%2Fbubbleboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhjain","download_url":"https://codeload.github.com/zhjain/bubbleboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhjain%2Fbubbleboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31998819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpine-js","chat","collaboration","drawing","elixir","phoenix","real-time","tailwindcss","websocket","whiteboard"],"created_at":"2025-08-26T21:02:41.427Z","updated_at":"2026-04-19T07:32:37.728Z","avatar_url":"https://github.com/zhjain.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bubbleboard\n\n一个基于 Phoenix Channels 的实时协作平台，旨在提供多用户聊天和协作绘图功能。\n\n## 🎯 项目最终目标\n\n打造一个功能完整的实时协作平台，包含以下核心功能：\n\n### 核心功能目标\n- **💬 实时多用户聊天系统** - 支持多房间、消息历史、用户状态管理\n- **🎨 协作绘图白板** - 多用户实时绘图、图形工具、画布同步\n- **👥 用户管理系统** - 用户身份认证、权限管理、在线状态\n- **🏠 多房间支持** - 创建/加入不同房间、房间管理\n- **📱 响应式设计** - 支持桌面和移动设备的良好体验\n\n### 技术目标\n- 基于 Phoenix Channels 的高性能实时通信\n- 现代化的前端交互体验（Alpine.js + Tailwind CSS）\n- 可扩展的后端架构设计\n- 完整的测试覆盖\n\n## 📊 当前开发进度\n\n### ✅ 已完成功能\n\n#### 实时聊天系统 (90% 完成)\n- **多用户聊天室**: ✅ 支持多个用户同时在线聊天\n- **用户身份管理**: ✅ 用户可以设置和修改自己的用户名\n- **消息历史**: ✅ 自动保存和显示聊天历史记录\n- **在线状态**: ✅ 实时显示当前在线用户数量\n- **用户存在感知**: ✅ 基于 Phoenix Presence 的用户在线状态跟踪\n- **响应式UI**: ✅ 可折叠的聊天界面，支持移动端\n\n#### 基础架构 (100% 完成)\n- **WebSocket 连接**: ✅ 基于 Phoenix Channels 的实时双向通信\n- **状态管理**: ✅ 使用 Agent 进行应用状态管理\n- **用户会话**: ✅ 自动生成唯一用户标识符\n- **本地存储**: ✅ 用户名等设置保存在浏览器本地存储中\n\n### 🚧 部分完成功能\n\n#### 绘图系统基础架构 (30% 完成)\n- **后端事件处理**: ✅ `draw` 事件的广播机制已实现\n- **前端画布**: ✅ 白板区域HTML结构已就位\n- **绘图工具**: ❌ 尚未实现具体的绘图功能\n- **画布同步**: ❌ 前端绘图事件处理未完成\n\n### ❌ 待开发功能\n\n#### 协作绘图系统 (70% 待完成)\n- 画布绘图工具（画笔、形状、文本等）\n- 实时绘图数据同步\n- 绘图历史和撤销/重做\n- 画布缩放和平移\n- 图层管理\n\n#### 高级功能 (100% 待完成)\n- 多房间系统\n- 用户权限管理\n- 文件上传和分享\n- 语音/视频通话集成\n- 移动端优化\n\n## 🛠 技术架构\n\n### 后端组件\n- **RoomChannel**: 处理聊天消息、绘图事件和用户管理\n- **RoomAgent**: 管理聊天室状态和消息历史\n- **Presence**: 跟踪用户在线状态和存在感知\n\n### 前端组件\n- **Alpine.js**: 响应式数据绑定和组件管理\n- **ChatRoom**: 聊天室交互逻辑\n- **Channel Store**: WebSocket连接管理\n- **User Management**: 用户状态和身份管理\n\n### 支持的事件\n- `message:new` - 发送新消息\n- `message:history` - 获取历史消息\n- `user:edit` - 编辑用户名\n- `draw` - 绘图操作广播（待完善）\n- `presence_state` - 用户在线状态\n- `ping` - 连接测试\n\n## 🚀 接下来要做的\n\n### 短期目标 (1-2周)\n1. **完成绘图功能实现**\n   - 实现基础画笔工具\n   - 添加前端Canvas绘图逻辑\n   - 完成绘图事件的前后端同步\n   - 添加基本的绘图工具栏\n\n2. **优化聊天系统**\n   - 添加消息时间戳显示优化\n   - 实现消息搜索功能\n   - 添加表情符号支持\n\n### 中期目标 (3-4周)\n1. **扩展绘图功能**\n   - 添加更多绘图工具（矩形、圆形、直线等）\n   - 实现颜色选择器\n   - 添加画笔粗细调节\n   - 实现撤销/重做功能\n\n2. **多房间系统**\n   - 实现房间创建和加入功能\n   - 添加房间列表和管理\n   - 房间权限控制\n\n### 长期目标 (1-2个月)\n1. **高级协作功能**\n   - 文件上传和分享\n   - 画布导出功能\n   - 协作光标显示\n   - 实时语音通话集成\n\n2. **用户体验优化**\n   - 移动端适配优化\n   - 离线消息同步\n   - 性能优化和缓存策略\n\n## 🏃‍♂️ 快速开始\n\n```bash\n# 安装依赖\nmix deps.get\n\n# 设置前端资源\nmix assets.setup\n\n# 启动开发服务器\nmix phx.server\n```\n\n访问 `http://localhost:4000` 开始使用 Bubbleboard！\n\n---\n\n**当前版本**: v0.1.0 - 聊天系统基础版本  \n**下一版本**: v0.2.0 - 协作绘图功能完整版本\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhjain%2Fbubbleboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhjain%2Fbubbleboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhjain%2Fbubbleboard/lists"}