第21天。今天我想做点有"活着"的感觉的东西。那种你能实时看到别人在做事情的应用。所以今天做匿名聊天室。
提示词#
“做一个实时聊天室应用。匿名认证加自定义昵称、创建房间、实时消息、表情反应、文件分享、输入指示器和在线状态。”
怎么做的#
这次经历了 7 个 Watchfire 任务，对于这样一个实时应用来说，这个顺序非常合理：
- Firebase Realtime Database。 基础部分。设置匿名认证、数据库规则，以及房间、消息和用户的数据模型。这是其他所有功能依赖的底层管道。
- 房间创建。 创建新房间和浏览已有房间的功能。侧边栏显示房间名称、参与人数和最后一条消息预览。
- 实时消息。 核心功能。消息会即时出现在房间里每个人的屏幕上。Firebase 的监听器处理同步，不用轮询，不用刷新按钮。你打字、发送，所有人都能看到。
- 表情反应。 点击消息就能添加反应。功能虽小，但让聊天比纯文本墙互动感强多了。
- 文件分享。 在聊天室内上传和分享文件。纯文本消息之外又多了一层实用功能。
- 在线状态和输入指示器。 能看到谁在线、谁在打字。这些细节让聊天应用感觉像真正的聊天应用，而不是留言板。
- 移动端优化。 响应式布局调整、触摸目标优化，确保整个体验在手机屏幕上也好用。
成品展示#
极简上手流程。 打开应用，选个昵称，就进去了。不用邮箱，不用密码，不用 OAuth 流程。Firebase Anonymous Auth 在后台处理身份验证。你只需要输入名字然后点"Let’s go"。
清爽的房间浏览器。 左侧边栏显示所有可用的房间和参与人数。顶部有"Create Room"按钮，还有搜索栏可以筛选房间。默认状态会显示一条欢迎消息，提示你选择一个房间或创建新房间。
实时消息，直接好用。 消息即时显示。每条消息都显示发送者的昵称（带彩色头像）、时间戳和消息内容。屏幕底部显示当前在房间里的人以及消息输入框和发送按钮。右上角显示在线人数。
输入指示器和在线状态。 你能看到谁在线、谁正在打字。这些小细节就是聊天应用和评论区的区别。整体感觉响应迅速、充满活力。
深色主题很好看。 深蓝色背景配紫色点缀，给人一种现代聊天应用的感觉。看起来不像课程作业。字体排版干净，间距恰到好处，不同用户的颜色编码让对话容易跟踪。
Bug 报告#
Firebase 实时应用往往有一类 bug 只在多用户或重新连接时才会出现。这个项目中，Watchfire 的任务把进度管理得很好，我没有遇到什么致命问题。在线状态系统和输入指示器在首次部署就能用了，说实话挺意外的。这些功能通常在标签页切换和网络断开这类边缘情况上需要好几轮调试。
数据一览#
- 7 个 Watchfire 任务 从数据库设置到移动端优化
- Firebase Realtime Database 零延迟消息同步
- 匿名认证 无摩擦上手
- 表情反应、文件分享、输入指示器、在线状态 全部逐步叠加
试试看#
选个昵称开始聊天吧。创建房间或加入已有的房间。
Day 21 总结#
实时通信很难。至少以前是这样。搭建 WebSocket 连接、管理连接状态、处理重连、跨客户端数据同步、处理竞态条件——在碰到实际的聊天功能之前，光基础设施工作就一大堆。
Firebase 把大部分都抽象掉了，而 AI 完全知道怎么用。从"数据库已存在"到"大家带着表情反应和输入指示器在聊天"的过程，在 7 个任务中完成了，我完全不需要考虑连接管理的事。
这个项目让我觉得有意思的是，匿名认证是正确的选择。对于一个休闲聊天应用来说，强制用户创建账号就是在赶客。选个名字直接用。Firebase 处理身份，用户完全不用操心。这是 AI 在我没有明确指定的情况下做出的正确产品决策。
第21天结束。已经进入最后冲刺阶段了，项目一个比一个更具互动性。
这是 30 Days of Vibe Coding 的第21天。跟着我一起看 AI 辅助编码如何在30天内交付30个项目吧。
