chatterbox

chatterbox

Chatterbox是一个使用Next 13和Pusher构建的实时消息应用程序。

您可以创建组聊天或启动DM。用户可以发送短信或上传多个视频或图像。

UI实时更新。意味着当另一个用户创建频道或发送消息时，您将立即看到更新。

部署在Vercel上：https：//chatterboxes.vercel.app/

技术堆栈

• next.js 13和打字稿
• 用于实时更新的推动器。
• Prisma for Orm。
• 下一个使用GitHub或电子邮件身份验证的验证。
• 上载文件上传。
• 用于造型的尾灯。
• radix ui原始 + shadcn ui
• ZOD用于验证表格和解析API有效载荷。
• 建筑形式的钩形形式。
• 全球国家的Jotai。

下一个13

该项目使用新的Next.js 13应用程序路由器，React服务器组件，服务器操作，悬疑和React 18的cache()

我们还利用API路由（将其部署为Vercel的无服务器功能部署到Vercel），例如注册新用户，创建消息等。

即时的

每当用户发送消息，创建聊天或在线上市时，所有其他用户都会收到通知，其UI将在实时更新。

这是用推送器完成的。我们会收听诸如message:new或chat:update类的事件。当用户做出操作时，我们在服务器上触发事件，其他用户的侦听将接收更新。

在场

除了聆听和触发事件外，推动器的存在频道还用于使每个用户当前在线。

当用户登录时，我们从Pusher中获取每个活动用户，并将其存储在本地Jotai商店中。当用户登录或注销时，Pusher会发送更新，然后我们本地更新Jotai商店。

打字稿

该项目用打字稿编写，并使用Prisma生成的类型和ZOD模式和类型来确保整个代码库中的类型AFETY。由于Prisma自动生成类型，因此我们很少需要声明或维护任何类型。

zod用于验证每个形式的客户端，以确保在进行任何API调用或突变之前确保值正确。

在服务器上，每个API路由还具有ZOD验证，以确保输入有效，并在继续之前对应于ZOD模式。

ESLINT还配置了严格的规则，以确保代码质量并最大程度地减少错误。

---

戒酒

1. “今天”，“昨天”等。指标
2. 会员状态文本（描述下面用户预览卡）
3. 小组描述
4. 管理员角色
5. 为所有成员添加一个默认的初始频道
6. 改进读取可视化
7. 打开用户详细信息，请单击GCS
8. 搜索渠道和用户
9. 删除消息
10. 发送链接（刮擦 - sepascraper和自动链接）
11. 未阅读的计数器（在聊天和一般中）
12. 离开GCS
13. 聊天输入上的键盘事件
14. 在设置模式中更改密码
15. 忘记了使用nodemailer密码流
16. BugFix ：视频未在iOS上显示
17. 邀请新用户分组聊天
18. 静音聊天
19. 在聊天和用户/聊天列表中无限滚动
20. 实验将API路由转换为服务器操作（例如：删除聊天）
21. 搜索消息
22. 读取旧消息指示器
23. 回复
24. 反应
25. gifs
26. 提及