首先容我介绍一下摸鱼聊天室，这是一款由抓鱼鸭出品，专注于摸鱼的在线聊天娱乐工具。基于Vue3、Vite 5、nodejs、koa2 和 socket.io 构建的即时通讯系统
2.0 版本上线半个月，平均日活已经达到 2000+，平均每天最高同时在线40+，日平均聊天记录达到7000+
群聊
创建房间
消息类型：文字、图片、表情、文件、md、自定义消息
消息互动
成就徽章
挂机积分
房间应用
房间公告
摸鱼应用
终端模式
聊天室机器人
后台管理
摸鱼聊天室的前身是因为我的第一款独立开发作品抓鱼鸭上有一个弹幕功能，大家可以在摸鱼的时候发弹幕互动
起初只是一个单纯的弹幕，后来用户说能不能加一个弹幕历史，然后我加了，这就是最初的摸鱼聊天室雏形
后来我把它又扩展了一下做成了一个独立模块，但是只有一个房间，用的 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，我对这个库其实用的也不是很熟练，边学边用，目前可以在代码里看到我的消息回执机制，但是部署到线上就会报错，我也是服了，有没有懂的老哥告知下咋回事
在解决完上边两个问题更想加强内容的建设，为更多的独立开发者有意思的游戏和应用做宣发，用户之所以用摸鱼聊天室也是因为这上边除了在线交流之外有很多摸鱼小游戏，我希望可以吸纳更多独立开发者把摸鱼聊天室作为产品宣发平台，作为问题反馈平台，作为产品讨论平台，不知道这个想法现不现实，大家也可以谈谈想法
之前一直闭源开发，跟摸鱼派作者沟通之后发现摸鱼派是很多人一起贡献开发的，于是我也想尝试一下让更多人参与摸鱼聊天室的发展和走向
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。