上一篇：之前写过一个个人项目，分享一下，希望对有需要的人有所帮助？ghChat(react版)除了各种聊天功能外，还支持github授权登录，并展示github用户的公开信息，然后你就可以在ghChat中轻松为你的github项目创建一个项目交流群，并将群链接发布到readme，方便自己在使用github的时候即时交流。如果以后有时间的话，我会多做一些与github的整合。地址github项目地址。如果你觉得还不错，可以大方给star吗？应用在线地址（也是项目群链接），支持直接github授权登录技术栈前端React全家桶，后端node.js（koa2）并写了一些TS、数据库MySQL、双向通信SocKet.io、jwt认证等。有关详细信息，请参阅package.json。有问题可以加入ghChat群进行交流。我每天都在线，你也可以私聊我。点击添加我项目展示：之前某个时间大部分功能的截图，其他功能和新功能直接在线体验。建议开启PWA：chrome浏览器如何开启PWA支持当前进度account[x]Login[x]Register[x]Logout[x]多设备同时登录与github集成[x]支持github授权登录[x]显示github用户公开的信息UI[x]弹窗、提示等基本组件[x]响应式布局，适配桌面和移动端。私聊[x]私聊[x]添加联系人[x]好友信息显示[x]删除联系人群聊[x]群聊[x]创建群[x]添加群[x]群信息显示[x]退出群[x]编辑群信息[x]当有人加入群时，会有提示查询[x]用户搜索&&群搜索：支持前端模糊搜索和后端模糊搜索丰富的聊天方式[x]聊天页表：按时间实时显示联系人和加入的群组按降序排列[x]发送图片[x]发布表情[x]发送文件[x]下载文件[x]输入快捷键发送信息，发送按钮变灰[x]@someone[x]图片放大查看[x]发送复制的图片（贴截图可以直接发送）[x]分享群|联系其他人|群（app内外都支持）[]提供在线表情库[]支持Markdown[]支持引用新消息提示[x]浏览器桌面通知（生产环境使用chrome桌面通知需要你的网站是HTTPS）[x]未读消息条数提示列表[x]刷新/重新打开/（不同账号）重新登录页面，列表中的未读消息条数仍会准确显示。持续重构和性能优化[x]gzip压缩[x]聊天内容懒加载，每次20条数据[x]]路由按需加载[x]接口请求频率限制[]css文件单独打包[]sql优化others[x]机器人智能聊天回复[x]部署SSL证书[x]支持PWA[x]后端用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//放一些非公开的秘密│├──src│├──app│├──context|├──控制器|├──index.ts|├──咪软件|├──routes//后端路由，与登录注册模块相关|├──server.ts|├──服务|├──socket//除了登录和注册，其他都是用socket通讯|└──工具|├──配置|├──configs.common.ts//后端通用配置|├──configs.dev.ts//后端开发配置|└──configs.prod.ts//后端生产配置└──main.ts│├──tsconfig.json│├──tslint.json│└──webpack.config.js├──src//front-结束代码│├──App.js│├──app.scss│├──资产│├──组件│├──容器│├──index.html│├──index.js│├──清单.json//PWA需要│├──modules│├───redux│├──router│├──service-worker.js//PWA需要│└──utils├──webpack.common.config.js//webpack常用设置├──webpack.config.js//生产相关的webpack配置└──webpack.dev.config.js//开发相关的webpack配置本地开发项目拉取到本地gitclonehttps://github.com/aermin/ghChat.git下载前端npm包cdghChatnpmi下载后端npm包cdghChat/servernpmi初始化数据库//需要先在本地建立一个名为ghchat的mysql数据库。数据库配置参考如下(ghChat/server/src/configs/configs.dev.ts)dbConnectionnpmruninit_sql//然后查看数据库是否init成功ps：如果要github授权登录，发送图片和文件（使用七牛云cdn），必须在文件（ghChat/server/src/configs/configs.dev.ts）中填写相应的配置，否则默认无法使用运行前后端的代码npmrunstartcd..//回到ghChat/目录npmrunstartproductionenvironment前提：创建secrets.ts文件exportdefault{port:'3000',//服务器端口dbConnection:{host:'',//数据库IPport:3306,//数据库端口database:'ghchat',//数据库名user:'',//数据库用户名密码:'',//数据库密码},client_secret:'',//github的client_secretjwt_secret:'',//jwt的secretqiniu:{//七牛云cdn配置accessKey:'',secretKey:'',bucket:''}};1.构建前端代码cdsrcnpmrunbuild:prod2.build后端代码cdsevernpmrunbuild:prod将步骤1和2生成的文件夹(build,dist)放到你的服务器上，运行dist/index.js文件（可以将ghChat/package.json和ghChat/server/ecosystem.config.js这两个文件一起复制到你的服务器，然后执行npmrunstart:prod）。不断更新和总结做这个全栈项目时会遇到的问题、知识点、坑。许可证麻省理工学院
