基于Vite + Vue3 + Typescript 实现在线聊天项目_vue3聊天室

前言

本项目是本人的毕业设计，在校的时候看着同学都都开始一步一步的开始准备毕设了，刚好那段时间正在了解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

1
2
3
4
5
6
7
8
9
10
11
12
13

项目地址

https://github.com/huaungwj/openIM-Web

在线运行

https://live.weikill.club