1 Star 7 Fork 2

紫橙雨 / 在线聊天-仿微信

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MulanPSL-2.0

仿微信聊天

项目预览

仿微信聊天

前言

写这个项目完全是自己一时兴起,由于快大四了时间也比较充裕于是打算写个项目练练手,当然也是为以后工作夯实基础。最后写了这个聊天项目,然后就着手了解了下通讯相关的技术,最后才决定采用SockJs+StompJs来实现实时通讯。设计该项目的UI界面过程中有参考了微信PC端的界面,里面的一些UI组件有部分是直接套用Element,也有一部分是自己封装的。然后功能的话也是比较全的,不仅可以聊天(文本、表情、语音等),还能发动态、截图等。对于消息的处理也是比较符合标准的,可以批量删除消息、撤回消息、转发消息、置顶消息的等。可能里面会有一些未知Bug,还请大家多多包涵。本人前端小白一枚,还请多多指教。(本人负责前端,另一个同学负责后端)

项目简介

  • 前端技术栈:Vue3+TypeScript+Element+SockJs+StompJs等
  • 后端技术栈:主要SpringBoot系列等
  • 该项目页面主要可分为主页、404页、注册和登录页面,用户必须登录才能进入到主页,否则将会进入到404页面,当然进入主页前会先进入到用户一些相关信息设置的页面(昵称、生日等),设置完这些信息后才能进入到主页,其中主页结构比较复杂,里面若干路由相互嵌套
  • 功能的话是比较全的,用户可以设置并管理自己的一些信息,如地址(国内全部地址)、生日、头像、密码等。可以申请添加好友、同意对方的好友申请,然后就是聊天了,聊天能发图片、语音、表情(借用微博里面的部分表情),聊天消息可以置顶、删除以及撤回等,聊天过程中也能看到对方正在输入...等字样。也能类似于发朋友圈一样发动态,也能及时看到好友的动态。也能对好友进行集中管理,如对好友进行不同的分组(这里只设置了一个好友对应一个分组)管理,修改好友的备注及朋友权限,可以批量删除好友

注册页面

注册页面比较简单,可能难的就是里面的一些表单数据的校验逻辑,背景图片的话采用轮播形式,里面也设置了验证码功能,好像是一分钟会失效。直接上图

登录页面

其中也对表单进行了校验,然后背景图片采用的是刷新更新的模式,登录失败会有提示,登录成功返回一个token,如果用户是刚注册并且是第一次登录的话会将用户带到信息设置界面,否则直接进入到主页

主页

  • 可以对用户进行搜索,通过搜索可以申请添加好友
  • 点击头部的不同图标查可以看不同的页面功能
  • 可以设置自己的一些信息,如:地址、头像、个性签名等
  • 可以看到所有的聊天窗口,能将窗口置顶或者删除
  • 点击某个窗口可以进入到与该用户的聊天界面

1. 搜索并申请添加好友

通过搜索用户的账号或者昵称来查找用户,如果有的话会弹出一个用户列表,点击某一个可以查看当前用户的信息,如果该用户不是自己好友的话则可以申请添加好友,否则可以直接给该用户发送消息

2. 管理自己的各信息属性

点击自己的头像可以查看自己的信息,点击设置按钮会弹出一个设置框,里面可以上传自己的头像(图片太大会对图片进行压缩处理),可以修改密码,也能修改自己的个人信息

3. 聊天界面

  • 用户可以选择一个窗口并与其进行聊天,聊天可以发送文字、表情、语音以及图片(图片太大会对图片进行压缩处理),聊天框采用的是富文本形式,自己乱封装的一个聊天富文本,语音最多录制60s,其格式转为mp3格式,支持在线播放,也能进行下载并保存到本地
  • 点击发送消息自己可以立马看到自己发送的最新消息或者是对方发送的最新消息,并且左边窗口里面的数据也会自动更新
  • 当对方正在输入时,在自己的聊天界面中也能看到对方正在输入...的字样,如果对方停止输入后,片刻后该字样也会消失
  • 用户可以对消息进行不同操作,如:可以批量删除、撤回、转发等
  • 当用户未读消息时,则与之该聊天窗口的未读消息数也会累加,直到用户点进去才会清除
  • 点击对方或自己的头像可以查看个人信息,对对方也能进行某些信息的修改
  • 能够对任意窗口进行截图并发送

通讯录页面

通讯录页面主要是按备注首字母顺序展示所有好友,点击某个好友可以查看该友的各项详情信息,也可以对该好友的一些属性进行修改,鼠标右键也能对该好友进行一些操作。在这里也能查看是否有新的好友申请,也能进入到通讯管理页面进行一些更细的操作

1. 查看新的好友申请

当用户点击新朋友选项时便能查看所有的陌生朋友的好友申请,只要对方对自己发送了好友申请,自己在这里就能立马看到,无需刷新,然后就能处理申请,可以同意,也能拒绝,同意的话也能对该用户进行一些属性上的设置,如:备注、朋友权限等

2. 通讯管理

点击通讯管理可以进入到通讯管理页面,在这里可以查看不同选项下的好友,如:全部、不让对方看动态、不看对方动态等,也能对所有好友进行不同的分组管理,在这里可以批量修改好友的各项属性,如:分组状态、好友权限、备注等,也能对所有的分组进行增删改查

动态

可以进行选择性的发动态,查看动态、自己的动态以及他人的动态,也可以对某条动态进行一些操作,如删除、不显示、点赞以及评论等,还能设置自己的动态封面等操作。

1. 发表动态

  • 发表动态可以包含文本、表情以及图片的一种或者任意几种,也可以进行拍照上传,上传的每张图片不能大于12MB,当图片大于0.5MB时会做压缩处理;
  • 可以对编辑的图片进行预览,所编辑图片的删除方式为拖拽到某个固定区域进行删除,最多可发表9张图片;
  • 可以对动态进行选择性的发布,如:全部、私密、部分可看、谁不可看,其中部分可看和谁不可看可以选择分组或者是若干位好友

2. 查看动态

1)查看所有好友动态(包括自己所发动态)

  • 每当有新的动态时会有红色圆点提示,查看后圆点消失(实时更新)
  • 动态显示采用懒加载模式,第一次查看只显示最新的六条,下滑底部再次加载六条,直到加完为止,第二次查看不会再次请求数据,因为第一次查看后数据会缓存下来,如果有新的动态则会在原有的数据中再请求最新的动态数据
  • 在这里可以看到自己以及好友所发的所有动态(仅限朋友权限之内),点击头像可以查看用户信息以及可以修改朋友权限等
  • 也能根据自己的喜好设置自己的动态背景图片或者使用默认背景,最大12MB
  • 可以对每条能看到的动态进行一些操作,如:删除、不显示、点赞、评论。如果是自己的发的动态,则只能进行删除、点赞和评论,好友的动态则能不显示、点赞、评论,其中删除动态后自己和好友均不可见,不显示动态则只是自己不可见,评论的话可以评论动态也能回复他人的评论,但是双方互为好友时才能看到对方的点赞和评论,否则看不到。(所有内容都是实时更新)

2) 查看自己的动态

只能看到自己所发的所有动态,对里面的动态只能进行删除、点赞、评论等操作,点击头像可以查看自己的一些信息(大部分操作同1)一样)

3) 查看他人的动态

可以通过搜索用户查看陌生人或者好友的动态(仅限权限内才能看到对应的动态),对于陌生人的动态仅局限于查看,而好友的动态除了查看外还能进行点赞、评论

木兰宽松许可证, 第2版 木兰宽松许可证, 第2版 2020年1月 http://license.coscl.org.cn/MulanPSL2 您对“软件”的复制、使用、修改及分发受木兰宽松许可证,第2版(“本许可证”)的如下条款的约束: 0. 定义 “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。 “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。 “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。 “法人实体”是指提交贡献的机构及其“关联实体”。 “关联实体”是指,对“本许可证”下的行为方而言,控制、受控制或与其共同受控制的机构,此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。 1. 授予版权许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可,您可以复制、使用、修改、分发其“贡献”,不论修改与否。 2. 授予专利许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的(根据本条规定撤销除外)专利许可,供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求,不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地,就“软件”或其中的“贡献”对任何人发起专利侵权诉讼(包括反诉或交叉诉讼)或其他专利维权行动,指控其侵犯专利权,则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。 3. 无商标许可 “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可,但您为满足第4条规定的声明义务而必须使用除外。 4. 分发限制 您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发,不论修改与否,但您必须向接收者提供“本许可证”的副本,并保留“软件”中的版权、商标、专利及免责声明。 5. 免责声明与责任限制 “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下,“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。 6. 语言 “本许可证”以中英文双语表述,中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致,以中文版为准。 条款结束 如何将木兰宽松许可证,第2版,应用到您的软件 如果您希望将木兰宽松许可证,第2版,应用到您的新软件,为了方便接收者查阅,建议您完成如下三步: 1, 请您补充如下声明中的空白,包括软件名、软件的首次发表年份以及您作为版权人的名字; 2, 请您在软件包的一级目录下创建以“LICENSE”为名的文件,将整个许可证文本放入该文件中; 3, 请将如下声明文本放入每个源文件的头部注释中。 Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details. Mulan Permissive Software License,Version 2 Mulan Permissive Software License,Version 2 (Mulan PSL v2) January 2020 http://license.coscl.org.cn/MulanPSL2 Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v2 (this License) with the following terms and conditions: 0. Definition Software means the program and related documents which are licensed under this License and comprise all Contribution(s). Contribution means the copyrightable work licensed by a particular Contributor under this License. Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License. Legal Entity means the entity making a Contribution and all its Affiliates. Affiliates means entities that control, are controlled by, or are under common control with the acting entity under this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity. 1. Grant of Copyright License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not. 2. Grant of Patent License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution, where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed. The patent license shall not apply to any modification of the Contribution, and any other combination which includes the Contribution. If you or your Affiliates directly or indirectly institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken. 3. No Trademark License No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in Section 4. 4. Distribution Restriction You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software. 5. Disclaimer of Warranty and Limitation of Liability THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 6. Language THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION SHALL PREVAIL. END OF THE TERMS AND CONDITIONS How to Apply the Mulan Permissive Software License,Version 2 (Mulan PSL v2) to Your Software To apply the Mulan PSL v2 to your work, for easy identification by recipients, you are suggested to complete following three steps: i Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner; ii Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package; iii Attach the statement to the appropriate annotated syntax at the beginning of each source file. Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details.

简介

一个仿微信聊天项目,使用Vue3+TypeScript+SockJs+StopmJs进行开发,功能俱全,能加好友,不仅限于聊天,还能发动态等 展开 收起
Vue 等 4 种语言
MulanPSL-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/purple-orange-rain/chat.git
git@gitee.com:purple-orange-rain/chat.git
purple-orange-rain
chat
在线聊天-仿微信
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891