# 在线聊天-仿微信 **Repository Path**: xhwork/chat ## Basic Information - **Project Name**: 在线聊天-仿微信 - **Description**: 一个仿微信聊天项目，使用Vue3+TypeScript+SockJs+StopmJs进行开发，功能俱全，能加好友，不仅限于聊天，还能发动态等 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: http://49.234.47.109/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2023-02-28 - **Last Updated**: 2023-02-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 仿微信聊天 ## 项目预览 [仿微信聊天](http://49.234.47.109/) ## 前言 写这个项目完全是自己一时兴起，由于快大四了时间也比较充裕于是打算写个项目练练手，当然也是为以后工作夯实基础。最后写了这个聊天项目，然后就着手了解了下通讯相关的技术，最后才决定采用SockJs+StompJs来实现实时通讯。设计该项目的UI界面过程中有参考了微信PC端的界面，里面的一些UI组件有部分是直接套用Element，也有一部分是自己封装的。然后功能的话也是比较全的，不仅可以聊天(文本、表情、语音等)，还能发动态、截图等。对于消息的处理也是比较符合标准的，可以批量删除消息、撤回消息、转发消息、置顶消息的等。可能里面会有一些未知Bug，还请大家多多包涵。本人前端小白一枚，还请多多指教。（本人负责前端，另一个同学负责后端） ## 项目简介 > * 前端技术栈：Vue3+TypeScript+Element+SockJs+StompJs等 > * 后端技术栈：主要SpringBoot系列等 > * 该项目页面主要可分为主页、404页、注册和登录页面，用户必须登录才能进入到主页，否则将会进入到404页面，当然进入主页前会先进入到用户一些相关信息设置的页面（昵称、生日等），设置完这些信息后才能进入到主页，其中主页结构比较复杂，里面若干路由相互嵌套 > * 功能的话是比较全的，用户可以设置并管理自己的一些信息，如地址（国内全部地址）、生日、头像、密码等。可以申请添加好友、同意对方的好友申请，然后就是聊天了，聊天能发图片、语音、表情（借用微博里面的部分表情），聊天消息可以置顶、删除以及撤回等，聊天过程中也能看到对方正在输入...等字样。也能类似于发朋友圈一样发动态，也能及时看到好友的动态。也能对好友进行集中管理，如对好友进行不同的分组（这里只设置了一个好友对应一个分组）管理，修改好友的备注及朋友权限，可以批量删除好友 ## 注册页面 注册页面比较简单，可能难的就是里面的一些表单数据的校验逻辑，背景图片的话采用轮播形式，里面也设置了验证码功能，好像是一分钟会失效。直接上图 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-reg.png) ## 登录页面 其中也对表单进行了校验，然后背景图片采用的是刷新更新的模式，登录失败会有提示，登录成功返回一个token，如果用户是刚注册并且是第一次登录的话会将用户带到信息设置界面，否则直接进入到主页 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-login.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-set1.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-set2.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-set3.png) ## 主页 * 可以对用户进行搜索，通过搜索可以申请添加好友 * 点击头部的不同图标查可以看不同的页面功能 * 可以设置自己的一些信息，如：地址、头像、个性签名等 * 可以看到所有的聊天窗口，能将窗口置顶或者删除 * 点击某个窗口可以进入到与该用户的聊天界面 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-index.png) ### 1. 搜索并申请添加好友 通过搜索用户的账号或者昵称来查找用户，如果有的话会弹出一个用户列表，点击某一个可以查看当前用户的信息，如果该用户不是自己好友的话则可以申请添加好友，否则可以直接给该用户发送消息 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-sear.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-add.jpg) ### 2. 管理自己的各信息属性 点击自己的头像可以查看自己的信息，点击设置按钮会弹出一个设置框，里面可以上传自己的头像（图片太大会对图片进行压缩处理），可以修改密码，也能修改自己的个人信息 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-setup.png) ### 3. 聊天界面 - 用户可以选择一个窗口并与其进行聊天，聊天可以发送文字、表情、语音以及图片（图片太大会对图片进行压缩处理），聊天框采用的是富文本形式，自己乱封装的一个聊天富文本，语音最多录制60s，其格式转为mp3格式，支持在线播放，也能进行下载并保存到本地 - 点击发送消息自己可以立马看到自己发送的最新消息或者是对方发送的最新消息，并且左边窗口里面的数据也会自动更新 - 当对方正在输入时，在自己的聊天界面中也能看到对方正在输入...的字样，如果对方停止输入后，片刻后该字样也会消失 - 用户可以对消息进行不同操作，如：可以批量删除、撤回、转发等 - 当用户未读消息时，则与之该聊天窗口的未读消息数也会累加，直到用户点进去才会清除 - 点击对方或自己的头像可以查看个人信息，对对方也能进行某些信息的修改 - 能够对任意窗口进行截图并发送 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-deta.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-detaSet.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-detaEmo.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-detaOpea.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-detarecord.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-screenshot.png) ## 通讯录页面 通讯录页面主要是按备注首字母顺序展示所有好友，点击某个好友可以查看该友的各项详情信息，也可以对该好友的一些属性进行修改，鼠标右键也能对该好友进行一些操作。在这里也能查看是否有新的好友申请，也能进入到通讯管理页面进行一些更细的操作 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-friMana.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-friends.png) ### 1. 查看新的好友申请 当用户点击新朋友选项时便能查看所有的陌生朋友的好友申请，只要对方对自己发送了好友申请，自己在这里就能立马看到，无需刷新，然后就能处理申请，可以同意，也能拒绝，同意的话也能对该用户进行一些属性上的设置，如：备注、朋友权限等 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-apply.png) ### 2. 通讯管理 点击通讯管理可以进入到通讯管理页面，在这里可以查看不同选项下的好友，如：全部、不让对方看动态、不看对方动态等，也能对所有好友进行不同的分组管理，在这里可以批量修改好友的各项属性，如：分组状态、好友权限、备注等，也能对所有的分组进行增删改查 ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-friPer.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-friGroOpea.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/chat-friGroup.png) ## 动态 可以进行选择性的发动态，查看动态、自己的动态以及他人的动态，也可以对某条动态进行一些操作，如删除、不显示、点赞以及评论等，还能设置自己的动态封面等操作。 ### 1. 发表动态 - 发表动态可以包含文本、表情以及图片的一种或者任意几种，也可以进行拍照上传，上传的每张图片不能大于12MB，当图片大于0.5MB时会做压缩处理； - 可以对编辑的图片进行预览，所编辑图片的删除方式为拖拽到某个固定区域进行删除，最多可发表9张图片； - 可以对动态进行选择性的发布，如：全部、私密、部分可看、谁不可看，其中部分可看和谁不可看可以选择分组或者是若干位好友 ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-send__one.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-send__two.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-send__three.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-send__four.png) ### 2. 查看动态 #### 1）查看所有好友动态（包括自己所发动态） - 每当有新的动态时会有红色圆点提示，查看后圆点消失（实时更新） - 动态显示采用懒加载模式，第一次查看只显示最新的六条，下滑底部再次加载六条，直到加完为止，第二次查看不会再次请求数据，因为第一次查看后数据会缓存下来，如果有新的动态则会在原有的数据中再请求最新的动态数据 - 在这里可以看到自己以及好友所发的所有动态（仅限朋友权限之内），点击头像可以查看用户信息以及可以修改朋友权限等 - 也能根据自己的喜好设置自己的动态背景图片或者使用默认背景，最大12MB - 可以对每条能看到的动态进行一些操作，如：删除、不显示、点赞、评论。如果是自己的发的动态，则只能进行删除、点赞和评论，好友的动态则能不显示、点赞、评论，其中删除动态后自己和好友均不可见，不显示动态则只是自己不可见，评论的话可以评论动态也能回复他人的评论，但是双方互为好友时才能看到对方的点赞和评论，否则看不到。（所有内容都是实时更新） ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__one.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__two.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__three.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__four.png) #### 2) 查看自己的动态 只能看到自己所发的所有动态，对里面的动态只能进行删除、点赞、评论等操作，点击头像可以查看自己的一些信息（大部分操作同1）一样） ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__five.png) #### 3) 查看他人的动态 可以通过搜索用户查看陌生人或者好友的动态（仅限权限内才能看到对应的动态），对于陌生人的动态仅局限于查看，而好友的动态除了查看外还能进行点赞、评论 ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__six.png) ![](https://gitee.com/purple-orange-rain/images/raw/master/dynamic-look__seven.png)