【Github】项目名:Vchat – 用vue+node+mongodb构建的社交聊天系统
项目简介
Vchat是一个社交聊天系统,由wuyawei开发。该项目是作者在学习过程中编写的,使用了vue+node+mongodb技术栈,包含一整套前后端交互,目前版本为V0.9.0且仍在更新,但作者表示不再维护且部分地方可读性较差。项目启动需要node、npm和mongodb,默认mongodb的IP地址为127.0.0.1:27017可在配置文件修改。
项目启动步骤
- cd chatRoom && npm install(安装前端依赖)
- npm run build(编译前端代码)
- cd.. && cd chatServer && npm install(安装后端依赖)
- npm run create(初始化数据库,如号码池、表情包)
- npm start(启动服务,然后在浏览器打开localhost:9988)
项目架构与技术栈
前端
主要采用vue全家桶,包括使用脚手架构建项目、vuex状态管理、vue – router控制路由、axios进行前后端交互。
后端
基于node搭建服务,使用express框架。通信方面采用socket.io进行前后端通信,数据库使用mongoDB,存储用户、好友、群聊、消息、表情、号码池等数据。
功能概览
登录注册
用户注册时会随机从号码池(存在mongodb)获取一个code号码,有特定的号码段分配给用户和群聊。注册时要判断账号是否存在,随机取得的code要标记为已使用,用户密码用md5加密。登录支持账号和code两种方式,登录时要判断用户是否已注册。后端设置全局中间件管理登录权限,前端用axios设置拦截器处理登录相关情况。
消息相关
消息种类多样,包括好友或加群申请、回复申请、入群通知、聊天消息(文字、图片、表情、文件)等。消息发送基于已连接的socket.io,且所有消息会存储到mongodb中,切换房间可获取历史消息,当前房间只追加最新消息,默认展示最新100条消息。
加入房间与多房间操作
可加入会话列表中的房间,也可手动操作。多房间操作时,Vchat用房间id区分消息来源,以解决socket接收消息不区分房间的问题。
项目总结
本文介绍了Vchat项目的设计流程和部分功能实现思路,项目在开发过程中有不少坑点。如果你对这个项目感兴趣,欢迎查看源码,也欢迎大家在issues中提出优化完善的建议,同时文末有q群欢迎一起学习交流,期待大家的留言讨论。
项目地址
数据统计
数据评估
本站链氪巴士提供的Vchat:用vue+node+mongodb构建的社交聊天系统都来源于网络,不保证外部链接的准确性和完整性,同时,对于该外部链接的指向,不由链氪巴士实际控制,在2024年12月6日 上午12:00收录时,该网页上的内容,都属于合规合法,后期网页的内容如出现违规,可以直接联系网站管理员进行删除,链氪巴士不承担任何责任。
