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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 432 days ago, the information mentioned may be changed or developed.

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

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

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

微信截图_20250226171612

主要功能

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

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

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

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

首先说一下技术栈

前端采用 vue3 技术栈

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

数据库，pgsql+本地 json 文件

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

默认使用pnpm，如果使用 npm 或 yarn 或 cnpm 也可以

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

pnpm dev测试环境启动

pnpm start默认使用pm2启动项目

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

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

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

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

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

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

并且这种方案需要判断的场景比较多，比如用户自然滚动在看历史消息，这时候来图片了我肯定不能直接置底，诸如此类情况暂时没有找到一个完美的解决方案
消息发送成功回执机制，目前虽然实现了较为简单的消息回执机制，但是依然不够完美，并且部署到线上后就会出错

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