从 "死了么" 到 "摸了么"：我把安全守护应用改造成了摸鱼神器

dsfsdfbbgd
0 阅读5分钟

🎯 故事的开始

事情是这样的，前几天我拿到了一个名为 "To Be Live" 的项目，这是一个主打安全守护的应用，核心功能是用户定期签到，超过时间没签到就给紧急联系人发邮件。

听起来挺有意义的，但作为一个打工人，我突然灵机一动：这么好的实时通知和数据库基础设施，用来做个摸鱼聊天室不是更香吗？

说干就干，于是 "摸了么" 横空出世！

🚀 核心功能亮点

1. 零成本入场：自动匿名登录

现在的应用注册流程真是越来越繁琐了，又是手机号又是验证码，烦都烦死了。"摸了么" 直接给你整了个自动匿名登录，打开应用就能聊，根本不需要你记什么账号密码。

// 自动匿名登录的核心代码
if (!user) {
  // 使用Supabase的匿名认证
  const { data: authData } = await supabase.auth.signInAnonymously();
  if (authData.user) {
    setUser(authData.user);
  }
}

2. 实时聊天：消息秒达

这年头，谁还能忍受延迟的聊天？"摸了么" 使用 Supabase 的实时订阅功能，消息一发出去，所有人都能立刻看到，比办公室的八卦传得还快。

3. 在线人数实时显示：社牛福音

"摸了么 - 3人在线"，看到这个是不是瞬间有了聊天的冲动？实时在线人数显示，让你知道现在有多少人在摸鱼，再也不用担心发消息没人回的尴尬。

4. 个性化消息气泡：每个人都是独一无二的

头像用首字母，颜色随机生成，名字显示前6个字母，既保护隐私又不失个性。就像办公室里每个人的工位装饰，各有各的风格。

🔧 技术实现大揭秘

1. Supabase：一站式后端解决方案

我必须要吹爆 Supabase，这玩意儿简直是前端开发者的救星。

  • 数据库：PostgreSQL 数据库，存储消息和用户信息
  • 实时订阅：通过 on('postgres_changes') 实现消息实时同步
  • Presence：用来统计在线人数，比自己写 WebSocket 简单100倍
  • 匿名认证：一行代码实现自动登录，再也不用写注册页面了
// Presence 实现在线人数统计
const channel = supabase
  .channel('online-users', {
    config: {
      presence: {
        key: user.id
      }
    }
  })
  .on('presence', { event: 'sync' }, () => {
    const presences = channel.presenceState();
    const count = Object.keys(presences).reduce((acc, key) => {
      return acc + presences[key].length;
    }, 0);
    setOnlineCount(count);
  })

2. Next.js 16 + React 19：现代化前端架构

  • App Router：使用最新的 App Router 模式，代码结构更清晰
  • Server Components：虽然主要用的是 Client Components，但准备后续优化
  • Turbopack：构建速度快到飞起，10秒内完成生产构建

3. Tailwind CSS + Framer Motion：好看又好玩

  • Tailwind：一行代码实现响应式设计，再也不用写媒体查询了
  • Framer Motion：添加平滑的动画效果，消息加载和发送都有过渡动画，看起来就很专业

📱 部署和使用

部署？那叫一个简单！Vercel 一键部署，30秒内完成，还自动分配了域名 mo-le-me.vercel.app，听起来就很摸鱼。

使用更是傻瓜式操作：

  1. 打开 mo-le-me.vercel.app
  2. 自动登录，无需注册
  3. 开始聊天，实时看到在线人数
  4. 发消息，看别人发消息
  5. 摸鱼愉快！

🎨 设计理念

我一直坚信，好的产品应该是简洁的。所以 "摸了么" 的设计理念就是：

  • 无干扰：没有复杂的菜单，没有多余的按钮，打开就是聊天界面
  • 个性化：每个人都有独特的头像和名字，增加聊天的趣味性
  • 实时性：消息和在线人数都实时更新，让聊天更有互动感
  • 隐私保护：匿名登录，不收集个人信息，聊完就走，不留痕迹

💡 开发过程中的小插曲

  1. 从安全到摸鱼：刚开始看到这个安全守护应用时，我脑子里想的是 "这玩意儿谁会用啊？"，直到我意识到，把它改造成摸鱼工具，那简直是天作之合。

  2. 解决消息重复问题：一开始发送消息后会渲染两次，我以为是代码出了bug，后来发现是因为同时通过API和实时订阅添加消息，这才加了去重逻辑。

  3. 在线人数统计：刚开始想用 WebSocket 自己实现，后来发现 Supabase 自带 Presence 功能，一行代码搞定，省了我好几天的工作量。

🚀 未来规划

  1. 消息持久化：目前只显示最新的10条消息，后续计划添加历史消息加载功能
  2. 消息通知：当有人@你的时候，发送浏览器通知
  3. 表情包支持：摸鱼聊天怎么能没有表情包？必须安排
  4. 主题定制：除了深色/浅色模式，再加上一些有趣的主题，比如 "办公室"、"海滩"、"深夜" 等

🎉 总结

从 "To Be Live" 到 "摸了么"，不仅仅是名字的改变，更是功能和定位的彻底转型。我把一个严肃的安全守护应用，改造成了一个轻松愉快的摸鱼聊天工具，这可能就是程序员的浪漫吧。

如果你也想体验一下这个摸鱼神器，赶紧打开 mo-le-me.vercel.app 试试吧！记住，摸鱼虽好，可不要贪杯哦～

最后，如果你觉得这个项目有趣，欢迎在评论区留言交流，也可以去 GitHub 给个 star（如果我开源的话）。祝大家摸鱼愉快，代码无 bug！

PS：本文所有功能均已实现并部署，你现在就可以打开链接体验，比刷完这篇文章的时间还快～

avatar
文章
阅读
粉丝