Web 实时树洞项目

主要功能

用户可以实时地接收到其他用户发送的消息，登录以后能够发送实时消息。类似一个公共的聊天室。

项目简介

本项目是一个基于 Vue3、Express/Node.js、MySql 的前后端分离全栈 Web项目。

前端共 4 个页面，分别为：

1. 主页面：能够查看所有用户发送过的消息，还会不断地接收到其他用户发送的实时消息。
2. 用户页面：能够查看用户本人发送过的消息 和 用户点过赞的消息。
3. 设置页面：修改用户信息、修改密码（未完成）、注销账号（未完成）。
4. 关于页面：该应用程序的简介。

项目文件结构：

本仓库根目录的 web文件夹 为前端项目；server文件夹 为后端项目。

主要实现技术及难点

1. 实时消息推送

使用 SSE（Server-Sent Events）技术实现 服务器 向 客户端 单向地 发送 实时消息。

为什么使用 SSE（Server-Sent Events）：

我希望用户无需登录也能收到其他用户发送的实时消息，而用户发送新消息则需要登录，服务器端接收新消息的接口需要使用 jwt 校验 用户的登录状态。

所以使用 轻量化的 SSE 来实现 服务器 向客户端 单向 发送实时消息；客户端发送消息，则使用简单 HTTP 请求。

2. UI 组件设计

本项目是出于学习的目的做的，所以我尝试 参考优秀的开源 UI组件库 来实现自己的 UI组件。主要的成果有：

1. 基础组件： Button按钮、Avatar头像框、Popup弹出层、Tip下拉框。
2. 表单组件： Form表单、Input输入框、Radio单选框、Textarea文本框、头像上传组件。参考 Element plus 实现了简单的参数校验功能；头像上传组件结合了 vue-cropper库，实现了图片裁切和预览的功能。
3. 菜单组件：Menu菜单、MenuItem菜单项。实现了 垂直 和 水平 样式，以及可选的路由功能。

设计 UI 组件花费了我很多时间和精力，主要思考的问题是如何实现组件的复用。

待完成的功能

本项目的主要功能（即接收/发送实时消息的功能）已经完成。但还有以下功能还未实现。

1. 用户修改密码、注销账号的功能未完成。
2. 点赞相关的功能未完成。
3. 后端的 token 过期处理，以及 token 的自动刷新。
4. 前端 错误请求 的处理不够优雅，冗余代码多。