V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Pony996
V2EX  ›  分享创造

我的第二个独立开发作品摸鱼聊天室开源

  •  
  •   Pony996 · 5 天前 · 961 次点击

    大家好我是 Pony ,是 抓鱼鸭摸鱼聊天室 的开发者

    首先容我介绍一下摸鱼聊天室,这是一款由抓鱼鸭出品,专注于摸鱼的在线聊天娱乐工具。基于Vue3Vite 5nodejskoa2socket.io 构建的即时通讯系统

    2.0 版本上线半个月,平均日活已经达到 2000+,平均每天最高同时在线40+,日平均聊天记录达到7000+

    微信截图_20250226171612

    主要功能

    • 群聊
    • 创建房间
    • 消息类型:文字、图片、表情、文件、md 、自定义消息
    • 消息互动
    • 成就徽章
    • 挂机积分
    • 房间应用
    • 房间公告
    • 摸鱼应用
    • 终端模式
    • 聊天室机器人
    • 后台管理

    image-20250226171658137

    为什么要做摸鱼聊天室

    摸鱼聊天室的前身是因为我的第一款独立开发作品抓鱼鸭上有一个弹幕功能,大家可以在摸鱼的时候发弹幕互动

    起初只是一个单纯的弹幕,后来用户说能不能加一个弹幕历史,然后我加了,这就是最初的摸鱼聊天室雏形

    后来我把它又扩展了一下做成了一个独立模块,但是只有一个房间,用的 mqtt 协议并且加了一些常用的摸鱼小游戏,这就是初代进阶版摸鱼聊天室

    image-20250226171728770

    就在去年年底我想彻底重构摸鱼聊天室,在功能上看齐 discord,在里理念上继续贯彻摸鱼,于是摸鱼聊天室2.0 版本就出现了

    开源项目的介绍

    首先说一下技术栈

    前端采用 vue3 技术栈

    后端采用 nodejs 技术栈,koa2+socketio

    数据库,pgsql+本地 json 文件

    整体项目用 vite+nodemon+pnpm 搭建

    默认使用pnpm,如果使用 npmyarncnpm 也可以

    pnpm i 下载依赖,前端 frontend 里是前端也要单独执行一遍pnpm i

    pnpm dev测试环境启动

    pnpm start默认使用pm2启动项目

    前端进入frontend目录执行pnpm build打包

    后端直接把server传到服务器pnpm start启动

    目前问题

    先说一下目前遇到的问题的两个问题

    1. 第一个问题就是滚动条置底的问题,我翻了很多文章,也看了一些其他聊天室的源代码,但是依旧没有彻底解决,只是解决了大部分问题

      本来挺简单的需求,就是滚动条一直保持在底部,实现就是监听数据更新后操作滚动条的 dom 置底

      就这么简单的一件事,但是却 bug 频出,比如图片消息因为图片需要加载时间所以有时候置底会实现,当然我做了图片加载事件在图片加载完成后执行置底,解决了一部分问题可是有时候还是不太行

      并且这种方案需要判断的场景比较多,比如用户自然滚动在看历史消息,这时候来图片了我肯定不能直接置底,诸如此类情况暂时没有找到一个完美的解决方案

    2. 消息发送成功回执机制,目前虽然实现了较为简单的消息回执机制,但是依然不够完美,并且部署到线上后就会出错

      目前用的 socketio,我对这个库其实用的也不是很熟练,边学边用,目前可以在代码里看到我的消息回执机制,但是部署到线上就会报错,我也是服了,有没有懂的老哥告知下咋回事

    开发计划

    在解决完上边两个问题更想加强内容的建设,为更多的独立开发者有意思的游戏和应用做宣发,用户之所以用摸鱼聊天室也是因为这上边除了在线交流之外有很多摸鱼小游戏,我希望可以吸纳更多独立开发者把摸鱼聊天室作为产品宣发平台,作为问题反馈平台,作为产品讨论平台,不知道这个想法现不现实,大家也可以谈谈想法

    之前一直闭源开发,跟摸鱼派作者沟通之后发现摸鱼派是很多人一起贡献开发的,于是我也想尝试一下让更多人参与摸鱼聊天室的发展和走向

    开源链接:https://github.com/ponysb/mychat

    在线摸鱼:https://mychat.zhuayuya.com

    6 条回复    2025-02-26 19:26:54 +08:00
    qwer666df
        1
    qwer666df  
       5 天前
    mqtt 在里面启到了啥作用,看 server 好像没有部署 mqtt 的说明
    Yeoman
        2
    Yeoman  
       5 天前
    想起了小学时候的江湖聊天室啥的,那时候电脑课就开个网页开始钓鱼挖矿,混迹江湖 2333
    Pony996
        3
    Pony996  
    OP
       5 天前
    @qwer666df 是之前用的 mqtt 就是 1.x 版本的,2.0 版本之后换成 socketio 了
    Pony996
        4
    Pony996  
    OP
       5 天前
    @Yeoman 现在也可以哈哈哈
    qwer666df
        5
    qwer666df  
       5 天前
    @Pony996 #3 为啥换掉 mqtt 是不好用吗?我现在新项目里面准备弄通知,打算用 mqtt 。。
    Pony996
        6
    Pony996  
    OP
       5 天前
    @qwer666df 聊天室场景不太合适,mqtt 是不严谨模式容易丢包,不支持多房间只能通过多主题实现多房间等问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   982 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 19:59 · PVG 03:59 · LAX 11:59 · JFK 14:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.