https://github.com/zhjain/bubbleboard
一个现代化的实时协作平台，使用 Elixir/Phoenix + Alpine.js 构建。提供多用户实时聊天、协作绘图白板、用户在线状态管理等功能。基于 WebSocket 技术实现低延迟的实时通信，适合团队协作、在线教学和创意分享场景。
https://github.com/zhjain/bubbleboard
alpine-js chat collaboration drawing elixir phoenix real-time tailwindcss websocket whiteboard
Last synced: 2 months ago
JSON representation
一个现代化的实时协作平台，使用 Elixir/Phoenix + Alpine.js 构建。提供多用户实时聊天、协作绘图白板、用户在线状态管理等功能。基于 WebSocket 技术实现低延迟的实时通信，适合团队协作、在线教学和创意分享场景。
- Host: GitHub
- URL: https://github.com/zhjain/bubbleboard
- Owner: zhjain
- Created: 2025-08-05T05:30:45.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T09:01:02.000Z (10 months ago)
- Last Synced: 2025-08-27T02:56:05.176Z (10 months ago)
- Topics: alpine-js, chat, collaboration, drawing, elixir, phoenix, real-time, tailwindcss, websocket, whiteboard
- Language: Elixir
- Homepage:
- Size: 110 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bubbleboard
一个基于 Phoenix Channels 的实时协作平台，旨在提供多用户聊天和协作绘图功能。
## 🎯 项目最终目标
打造一个功能完整的实时协作平台，包含以下核心功能：
### 核心功能目标
- **💬 实时多用户聊天系统** - 支持多房间、消息历史、用户状态管理
- **🎨 协作绘图白板** - 多用户实时绘图、图形工具、画布同步
- **👥 用户管理系统** - 用户身份认证、权限管理、在线状态
- **🏠 多房间支持** - 创建/加入不同房间、房间管理
- **📱 响应式设计** - 支持桌面和移动设备的良好体验
### 技术目标
- 基于 Phoenix Channels 的高性能实时通信
- 现代化的前端交互体验（Alpine.js + Tailwind CSS）
- 可扩展的后端架构设计
- 完整的测试覆盖
## 📊 当前开发进度
### ✅ 已完成功能
#### 实时聊天系统 (90% 完成)
- **多用户聊天室**: ✅ 支持多个用户同时在线聊天
- **用户身份管理**: ✅ 用户可以设置和修改自己的用户名
- **消息历史**: ✅ 自动保存和显示聊天历史记录
- **在线状态**: ✅ 实时显示当前在线用户数量
- **用户存在感知**: ✅ 基于 Phoenix Presence 的用户在线状态跟踪
- **响应式UI**: ✅ 可折叠的聊天界面，支持移动端
#### 基础架构 (100% 完成)
- **WebSocket 连接**: ✅ 基于 Phoenix Channels 的实时双向通信
- **状态管理**: ✅ 使用 Agent 进行应用状态管理
- **用户会话**: ✅ 自动生成唯一用户标识符
- **本地存储**: ✅ 用户名等设置保存在浏览器本地存储中
### 🚧 部分完成功能
#### 绘图系统基础架构 (30% 完成)
- **后端事件处理**: ✅ `draw` 事件的广播机制已实现
- **前端画布**: ✅ 白板区域HTML结构已就位
- **绘图工具**: ❌ 尚未实现具体的绘图功能
- **画布同步**: ❌ 前端绘图事件处理未完成
### ❌ 待开发功能
#### 协作绘图系统 (70% 待完成)
- 画布绘图工具（画笔、形状、文本等）
- 实时绘图数据同步
- 绘图历史和撤销/重做
- 画布缩放和平移
- 图层管理
#### 高级功能 (100% 待完成)
- 多房间系统
- 用户权限管理
- 文件上传和分享
- 语音/视频通话集成
- 移动端优化
## 🛠 技术架构
### 后端组件
- **RoomChannel**: 处理聊天消息、绘图事件和用户管理
- **RoomAgent**: 管理聊天室状态和消息历史
- **Presence**: 跟踪用户在线状态和存在感知
### 前端组件
- **Alpine.js**: 响应式数据绑定和组件管理
- **ChatRoom**: 聊天室交互逻辑
- **Channel Store**: WebSocket连接管理
- **User Management**: 用户状态和身份管理
### 支持的事件
- `message:new` - 发送新消息
- `message:history` - 获取历史消息
- `user:edit` - 编辑用户名
- `draw` - 绘图操作广播（待完善）
- `presence_state` - 用户在线状态
- `ping` - 连接测试
## 🚀 接下来要做的
### 短期目标 (1-2周)
1. **完成绘图功能实现**
- 实现基础画笔工具
- 添加前端Canvas绘图逻辑
- 完成绘图事件的前后端同步
- 添加基本的绘图工具栏
2. **优化聊天系统**
- 添加消息时间戳显示优化
- 实现消息搜索功能
- 添加表情符号支持
### 中期目标 (3-4周)
1. **扩展绘图功能**
- 添加更多绘图工具（矩形、圆形、直线等）
- 实现颜色选择器
- 添加画笔粗细调节
- 实现撤销/重做功能
2. **多房间系统**
- 实现房间创建和加入功能
- 添加房间列表和管理
- 房间权限控制
### 长期目标 (1-2个月)
1. **高级协作功能**
- 文件上传和分享
- 画布导出功能
- 协作光标显示
- 实时语音通话集成
2. **用户体验优化**
- 移动端适配优化
- 离线消息同步
- 性能优化和缓存策略
## 🏃♂️ 快速开始
```bash
# 安装依赖
mix deps.get
# 设置前端资源
mix assets.setup
# 启动开发服务器
mix phx.server
```
访问 `http://localhost:4000` 开始使用 Bubbleboard！
---
**当前版本**: v0.1.0 - 聊天系统基础版本
**下一版本**: v0.2.0 - 协作绘图功能完整版本