/Magical-Chat

基于 React + Koa + MySQL + JWT + Socket.io 的即时通讯聊天室。

Primary LanguageJavaScript

Magical-Chat

用到的技术栈:

React + Koa + MySQL + JWT + Socket.io 的即时通讯聊天室。

用到的库:

emoji-pick-react + react-toastify + uuid + @koa/cors + axios + react-icons + styled-components

目前实现的功能:

  • 根据 QQ号 或 随机数 生成头像

  • 基于 rem + 媒体查询的 移动端适配(虽然有点鸡肋)

  • 为了提高用户体验,利用 scrollIntoView API 搭配 useRef,实现了聊天窗口滚动显示最新的消息的功能

  • 利用 socket.io 生成 WebSoet 服务器,实现了文字消息和 emoji 表情的实时发送,分别实现了群聊和私聊两种通信方式

待开发:

  • 消息提醒与消息已读

  • 展示用户 GitHub 或 blog 链接

  • 根据消息,实时更新用户列表顺序

  • ...

开发时需要注意的坑点:

  • MySQL 如果要支持emoji,字符集需要默认是utf8mb4,因为utf8只能存储 3 字节 ,而一般的 emoji 表情是 4 字节

部署时需要注意的坑点:

  • 启动端口后如果没响应先看看是否放行了改端口。

  • PM2 在使用时需要注意 Nodejs 的版本是否和本地 Nodejs 一致。

  • React 在部署时 package.json 记得加上 "homepage":".", 字段。

  • 如果后端升级成了 HTTPS,一定要注意前端在 socket 连接时用 wss 而不是 ws.

  • 因为数据库字符集是utf8mb4,使用建议使用本地的数据库连接远程服务器,然后导入项目,会方便很多。

  • 入口文件中端口号如果是 配置文件 env 中定义的常量的话,启动目录一定要和 env 是同级,不然访问不到pm2访问不到。

  • 如果前端升级成了 HTTPS,后端接口也需要部署 SSL 证书 升级成 HTTPS 才能访问资源,方法是在 PM2管理器 中映射一个新的子域名即可。