项目实现说明

运行方式

先按照.env_example中的样式配置自己的.env文件，然后运行如下命令

npm install
npx prisma migrate reset --force
npx prisma generate
npx prisma db push
npm run build
npm run start

注册、登录与鉴权

• 注册
  • 用户输入用户名和密码进行注册。系统会判断用户名是否存在。如果存在，则提示用户更换用户名，否则会把用户名和哈希加密后的密码存入数据库。用户名为"管理员"的账号为管理账号。
• 登录
  • 输入用户名和密码，服务器返回JWT token.token的payload中带有用户名和过期时间等信息，并经过服务器密钥签名防止被篡改。目前的token应该是24小时会过期。
• 鉴权
  • 每一个请求数据的后端API都要求前端发送的请求头中携带token，并且如果token无效或过期，那么会返回状态码401，如果前端接收到状态码401，就会自动切换到登录页面，并且删除所有相关的本地存储。例如，在进入chatroom以后，在localStorage里面修改token就会在自动更新消息或房间的时候被发现token无效，并自动回到登录界面。
  • 用户的所有操作都基于通过token解析得到的用户名，而不是前端暂存的用户名，防止用户名被用户篡改。

房间的创建与删除

• 创建
  • 创建房间的时候，会判断是否有相同名称的房间，如果没有，则创建成功。
• 删除
  • 只有创建房间的人或者管理员可以删除房间
  • 如果删除房间时，其它用户还在该房间中，那么他们会收到提示，并自动退出房间。
  • 考虑到多人同时删除同一个房间的情况。如果有多个人几乎同时删除一个房间，后面的人尝试删除资源时仅仅会得到返回资源已经被删除，而不会报错。
  • 删除房间之后，房间中涉及的图片与文件等信息会在服务器端被自动删除。
  • 删除房间的时候，如果用户同时点击两个房间删除，那么第二个删除操作无效。用户点击一个房间删除过程中无法再次点击。
• 自动刷新
  • 房间列表每隔一定时间进行自动刷新
• 用localStorage自动返回上一次聊天过的聊天室
  • 如果这个聊天室已经被删除，那么自动退出。

消息

文字消息

• 发送消息的时候，会禁用消息发送按钮。防止用户因错误点击导致多次发送相同的消息。
• 消息输入框支持ctrl+shift换行，防止用户在一行中写的消息过长，而难以阅读。

文件

• 上传文件会把文件上传到服务器的uploads文件夹，并且自动发送一条消息，消息包含访问文件的可用URL，以及这条消息的内容为image或者file。
• 上传图片或文件时，会在文件名前添加文件上传时间和随机字符，来确保文件名在服务器上唯一。但是下载和显示的时候，会显示用户上传时的文件名。
• 尝试显示图片时，如果图片还没有显示出来，会显示public文件(用于存放在运行前确定的静态资源)夹内部的占位图片，同加载需要显示的的图片。我在edge浏览器的控制台中控制网速模拟3G的效果可以比较明显地看到这种现象。

自动刷新

• 自动刷新仅仅会依据当前的最后一条消息，去获取新的消息，这样可以减少一点数据的传输量。
• 假设遇到网速慢导致两个请求刷新消息的请求几乎同时，或者定时的刷新和发送消息后的自动刷新几乎重合，并不会同时获取两份一样的消息，并且把这两份消息加到同一个页面中，导致一个界面中出现多条相同的消息。在实现中，如果在更新消息时，发现有其它更新函数正在运行，就会直接返回，以防止更新消息的错误重复问题。
• 切换房间时，考虑到可能会有上一个房间的消息刷新函数正在执行，可能会把上一个房间的消息错误地添加到新房间中，我在最终添加消息的时候，添加了房间号码检测的功能，一致了才会添加上去。

其它

• 房间列表可以折叠，在手机等小屏幕上使用体验会好一点
• 聊天信息的上方会显示网络连通性，原理定期是向后端的检测API发一个请求，看看有没有回应。