写个即时聊天应用(React相关、PWA、Socket.io、Node(Koa2, TS)、MySQL)

前文: 之前写的个人项目,分享一下,希望对有需要的人有帮助😄

除了各种聊天功能,还支持github授权登录,和展示github用户公开的信息,然后可以方便地在ghChat中为自己的github项目建个项目交流群,贴群链接到readme中,方便自己在使用github时即时交流。之后有时间的话会多做一些跟github的集成。

地址

github项目地址觉得还不错的可以慷慨地star下😄

应用线上地址(也是项目的群链接),支持直接github授权登录

技术栈

前端React全家桶,后端node.js(koa2)和写了点TS, 数据库MySQL, 双向通信SocKet.io, jwt鉴权等等。具体看package.json。有疑问的可以加ghChat群交流哦,我每天都在线,也可以私聊我,点击加我

项目展示:

之前某个时间的大部分功能的截图,其他功能和新功能直接线上体验

目前进度

  • 账户

    • 登录
    • 注册
    • 退出登录
    • 多设备同时登录
  • 对github的集成

    • 支持github授权登录
    • 展示github用户公开的信息
  • UI

    • 弹窗,提示等基础组件
    • 响应式布局, 适配桌面端和移动端。
  • 私聊

    • 私聊
    • 添加联系人
    • 好友资料展示
    • 删除联系人
  • 群聊

    • 群聊
    • 建群
    • 加群
    • 群资料展示
    • 退群
    • 编辑群资料
    • 有人加入群时会有提示
  • 查询

    • 用户搜索&&群搜索: 支持前端模糊搜索和后端模糊搜索
  • 丰富聊天方式

    • 聊天页表:实时按时间降序展示联系过的人和加入的群
    • 发图
    • 发表情
    • 发文件
    • 下载文件
    • Enter快捷键发送信息,发送按钮灰亮
    • @某人
    • 图片放大查看
    • 发送copy的图片(如截图后粘贴可直接发图)
    • 分享群|联系人给其他的人|群(应用内|外都支持)
    • 提供在线表情库
    • 支持Markdown
    • 支持Quote
  • 新消息提示

    • 浏览器桌面通知(生产环境下,使用chrome的桌面通知需要你的网站是HTTPS的)
    • 列表未读消息数目提示
    • 刷新/重开/(不同账号)重登页面,列表未读消息的数目将仍然且准确显示
  • 不断的重构和性能优化

    • gzip 压缩
    • 聊天内容懒加载,每次获取20条数据
    • 路由按需加载
    • 接口请求频率限制
    • css文件单独打包
    • sql优化
  • 其他

    • 机器人智能聊天回复
    • 部署SSL证书
    • 支持PWA
    • 后端用TS重写
    • 后端封装成sdk
    • 国际化
    • CI/CD

项目结构图

├── LICENSE
├── README-zh_CN.md
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── server //后端代码
│   ├── ecosystem.config.js
│   ├── init // 初始化mysql数据库的脚本
│   ├── nodemon.json
│   ├── package-lock.json
│   ├── package.json
│   ├── secrets.ts // 放一些非公开的secret
│   ├── src
│     ├── app
│     ├── context
|     ├── controllers
|     ├── index.ts
|     ├── middlewares
|     ├── routes // 后端路由,跟登录注册模块有关
|     ├── server.ts
|     ├── services
|     ├── socket // 除了登录注册,其他都用socket 来通信
|     └── utils
|     ├── configs
|       ├── configs.common.ts // 后端通用配置
|       ├── configs.dev.ts // 后端开发配置
|       └── configs.prod.ts // 后端生产配置
    └── main.ts
│   ├── tsconfig.json
│   ├── tslint.json
│   └── webpack.config.js
├── src // 前端代码
│   ├── App.js
│   ├── app.scss
│   ├── assets
│   ├── components
│   ├── containers
│   ├── index.html
│   ├── index.js
│   ├── manifest.json // PWA需要
│   ├── modules
│   ├── redux
│   ├── router
│   ├── service-worker.js // PWA需要
│   └── utils
├── webpack.common.config.js  // 通用webpack设置
├── webpack.config.js //生产相关的webpack配置
└── webpack.dev.config.js //开发相关的webpack配置

本地开发

  1. 项目拉到本地
git clone https://github.com/aermin/ghChat.git
  1. 下载前端的npm包
cd ghChat
npm i
  1. 下载后端的npm包
cd ghChat/server
npm i
  1. 初始化数据库
//需要先在本地建一个名为ghchat的mysql数据库
数据库配置参考如下(ghChat/server/src/configs/configs.dev.ts) 的dbConnection

npm run init_sql    //然后查看下数据库是否init成功

ps: 如果要使用github授权登录,发图片和发文件(使用七牛云cdn),就要在文件(ghChat/server/src/configs/configs.dev.ts)填充相应的配置了,否则默认无法使用

  1. 跑起前端和后端的代码
npm run start
cd ..      // 返回到ghChat/目录
npm run start

生产环境使用

前提:创建secrets.ts文件

export default {
  port: '3000', // server 端口
  dbConnection: {
    host: '', // 数据库IP
    port: 3306, // 数据库端口
    database: 'ghchat', // 数据库名称
    user: '', // 数据库用户名
    password: '', // 数据库密码
  },
  client_secret: '', // github的client_secret
  jwt_secret: '', // jwt的secret
  qiniu: { // 七牛云cdn配置
    accessKey: '',
    secretKey: '',
    bucket: ''
  }
};

1.build前端代码

cd src
npm run build:prod

2.build后端代码

cd sever
npm run build:prod
  1. 把步骤1,2产生的文件夹(build, dist)放到你的服务器上, 把dist/index.js文件跑起来

(可以把ghChat/package.json,ghChat/server/ecosystem.config.js 两个文件一并拷到到你的服务器上,然后执行npm run start:prod)

文档

这边开坑了一篇ghChat开发历程 ,将不断地更新总结做这个全栈项目时会遇到的问题,知识点,和坑。

License

MIT

原文链接:segmentfault.com

上一篇:testcli
下一篇:resolveme

相关推荐

  • 面试题 —淘宝网现场面试题49题(JVM+算法+Redis+Mysql+Spring)

    淘宝一面: 面试介绍 1)自我介绍? 2)项目介绍? 3)遇到的最大困难是什么?怎么解决的? 4)你觉得你能怎么优化这个项目? 面试题目 1)讲一下JVM 2)讲一下JVM的分代回收以及具体算法 3...

    2 年前
  • 阿里云部署 2.mysql

    下载 直接使用yum快速搭建 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm yum ...

    1 年前
  • 阿里云centOS部署vue全家桶+node+koa2+mongo项目

    写在前面 文章有丢丢长,前端开发第一次部署项目,有问题请及时提出,以免误导其他童鞋,轻拍~, 更新系统 sudo yum update 安装mongo 1. 添加MongoDB源 在/etc/yum....

    1 年前
  • 造轮子 - EGGJS的MySQL操作库

    最近学习eggjs,学习过程中使用官方推荐的MySQL库,感觉官方库不太好用,基础的CURD没问题。但是复杂点的操作就不行了,虽然官方还有一个egg-sequelize,但是这个这并不妨碍我造轮子。

    1 年前
  • 通过koa2和Promise.race()构造一个超时取消的ajax。

    MDN上说: 你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与DOM请求的...

    2 年前
  • 适合初学者的koa2+mongodb初体验

    前言      笔者的前端开发已经有些时日了,对于node一直保留着最初的恐惧,倘若一座不可跨越的高山,思前想后终于迈出最后一步,踏入了开拓自己视野的新视界,希望在看这篇文章的你可以一起跟我动手尝试...

    1 年前
  • 详解React项目的服务端渲染改造(koa2+web

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料。成功踩坑。 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动...

    3 年前
  • 记一次GraphQL真正的详细入门(原生,koa2,vue中的实战, 建议收藏)分享会

    记录了组内技术分享会, 有同样需求的同学可以参考一下 分享全程下来时间大约 55分钟 前言 痛点:网上找的资料,文章, GraphQL的官网,一看就是很‘自我’的大神写的(太烂了)完全管读者能不能看懂...

    4 个月前
  • 记一次 React + Koa + Mysql 构建个人博客

    前言 由于一直在用 vue 写业务,为了熟悉下 react 开发模式,所以选择了 react。数据库一开始用的是 mongodb,后来换成 mysql 了,一套下来感觉 mysql 也挺好上手的。

    2 年前
  • 解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

    前言 最近用 Node 写一个小玩意,需要用到 MySQL 数据库,现在用得最广泛的是 mysql 这个库。然后呢,现在 ORM 这么火,干脆也上 ORM 吧,正好我也不会可以学习一下,于是找到了 S...

    4 年前

官方社区

扫码加入 JavaScript 社区