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

前言

本项目是本人的毕业设计，在校的时候看着同学都都开始一步一步的开始准备毕设了，刚好那段时间正在了解websocket，于是有了个想法，毕设能不能做一个在线聊天的系统。
前端技术用到了 Vue3 + Typescript + pinia 。

WebSocket

网页版的在线聊天一般分为两种方式，轮询和全双工。以传统的HTTP形式来做，Server没办法主动的向Client发送消息，而像WebSocket这种全双工形式则不太一样，二者保持长连接，并且能让Server主动的推送消息到Client，这就大大节省了请求资源。\

目标功能

• 登录
• 注册
• 国际化
• 单聊功能
• 群聊功能
• 发送表情、文件、图片、视频、好友名片、聊天记录、消息引用
• 好友关系管理、黑名单
• 个人信息管理以及头像上传
• 置顶聊天、免打扰、已读消息
• 添加好友、添加群聊以及创建群聊
• 掉线重连

项目截图

1. 登录注册

2.聊天窗口

3.我的好友及我的群组

项目构建

# install dependencies
npm install 

![dc694b4db91745779115dd1cc60e80fd_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62096915555346c6959632ead03e4ff1~tplv-k3u1fbpfcp-watermark.image?)
# serve with hot reload at localhost:3000 
npm run dev 

# build for production with minification 
npm run build 

# Lint with EsLint

npm run lint

项目地址

github.com/huaungwj/op…

在线运行

live.weikill.club