前言
本项目是本人的毕业设计,在校的时候看着同学都都开始一步一步的开始准备毕设了,刚好那段时间正在了解websocket
,于是有了个想法,毕设能不能做一个在线聊天的系统。
前端技术用到了 Vue3
+ Typescript
+ pinia
。
WebSocket
网页版的在线聊天一般分为两种方式,轮询和全双工。以传统的HTTP
形式来做,Server
没办法主动的向Client
发送消息,而像WebSocket
这种全双工形式则不太一样,二者保持长连接,并且能让Server
主动的推送消息到Client
,这就大大节省了请求资源。
目标功能
- 登录
- 注册
- 国际化
- 单聊功能
- 群聊功能
- 发送表情、文件、图片、视频、好友名片、聊天记录、消息引用
- 好友关系管理、黑名单
- 个人信息管理以及头像上传
- 置顶聊天、免打扰、已读消息
- 添加好友、添加群聊以及创建群聊
- 掉线重连
项目截图
1. 登录注册
2.聊天窗口
3.我的好友及我的群组
项目构建
# install dependencies
npm install
# serve with hot reload at localhost:3000
npm run dev
# build for production with minification
npm run build
# Lint with EsLint
npm run lint
项目地址
https://github.com/huaungwj/openIM-Web