Giter VIP home page Giter VIP logo

aermin / ghchat Goto Github PK

View Code? Open in Web Editor NEW
933.0 33.0 171.0 55.48 MB

:octocat: 📱A chat application for GitHub. React + PWA + Node(koa2) + Typescripts + Mysql + Socket.io

Home Page: https://im.aermin.top/group_chat/ddbffd80-3663-11e9-a580-d119b23ef62e

License: MIT License

JavaScript 64.23% HTML 0.67% CSS 12.39% TSQL 1.70% TypeScript 21.01%
chat im react redux koa2 mysql pwa nodejs socket-io axios

ghchat's Introduction

GitAds

GitAds

ghChat

Node.js MySQL License Author

English | 简体中文

ghChat(react版)

之所以叫ghChat,是想着以后做一些GitHub的集成,希望让这个即时通讯工具成为chat tool for github。目前只支持github授权登录,和展示github用户公开的信息,然后可以方便地在ghChat中为自己的github项目建个项目群,然后贴群链接到readme中,方便项目即时交流。

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

倘若github登录失败

查看如何设置

很可能是你的github没有设置public的email

ACF5CEB66E47AEE81B5ABD21592A3827

建议开启PWA

技术栈

前端React全家桶,PWA,后端node.js(koa2),后端支持并写了点TS(大多类型还没补 T^T) , 数据库MySQL, SocKetIO, JWT等等,具体看package.json。另外生产环境用了Nginx, SSL, Pm2等。欢迎加ghChat群交流哦,我每天都在线,也可以点击私聊我

pic

详细的项目展示图

点开查看

pic1

pic2

pic3

pic4

目前进度

点开查看
  • 账户

登录/ 注册/ 退出登录/ 多设备同时登录

  • 对github的集成

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

  • UI

响应式布局, 适配桌面端和移动端/ 大部分UI组件自己写

  • 私聊

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

  • 群聊

群聊/ 建群/ 加群/ 群资料展示/ 退群/ 编辑群资料/ 新人进群通知

  • 查询

用户搜索&&群搜索: 支持前端模糊搜索和后端模糊搜索

  • 丰富聊天方式

发图/ 发表情/ 发文件/ 下载文件/ Enter快捷键发送信息/ @某人/ 图片查看/ 发送copy的图片(如截图后粘贴可直接发图)/ 根据时间降序展示聊天页表/ 分享群|联系人给其他的人|群(应用内|外都支持)

  • 新消息提示

浏览器桌面通知/ 消息是否提示的开关设置/ 列表未读消息数目提示/ 刷新|重开|(不同账号)重登页面,列表未读消息的数目将仍然且准确显示

  • 不断的重构和优化

gzip 压缩/ 分包build文件/ 聊天内容懒加载/ 路由按需加载/ 接口请求频率限制/ WebSocket管理机制

  • 其他

机器人智能聊天回复/ 部署SSL证书/ 支持PWA/ 后端支持TS

  • TODO

支持Markdown/ 支持引用聊天内容/ 后端封装成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.prod.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

生产环境使用

点开查看

前提:在ghChat/server/ 文件夹下创建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: ''
  },
  robot_key: '', // 机器人聊天用到的key => 请自己申请 http://www.tuling123.com/
};

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/server/package.json 一并拷到到你的服务器上,然后执行npm run start:prod)

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

License

MIT

码代码不易,引用借鉴请注明出处

Contributors

感谢大佬们的pr

最后

对你有帮助或者觉得还不错可以star或者打赏下(〃'▽'〃)

打赏二维吗

donate

ghchat's People

Contributors

abbyjl avatar aermin avatar blackmatch avatar dependabot[bot] avatar gaoac avatar zouyoushun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ghchat's Issues

关于ESLint检测未修复的问题与改进建议

存在问题

项目中目前引入了 ESLlint,但是执行 lint 检测,发现仍尚存不少 error。

Code_2020-02-02 11-08-16@2x

改进建议

结合 ESLint、prettier、husky、lint-staged 进行标准编程规范自动化验证,保证 git commit 时代码必须检测通过方可正常 commit,以此保证大伙规范的统一性。

问题反馈

bug

  1. 移动端登录/注册页展示有问题, 按钮和密码框到一行了(ios夸克浏览器)
  2. 移动端功能bug, 登录后展示"浏览器不支持通知"提示, 然后白屏(ios夸克浏览器)
  3. 发送文件不成功, 没反应
  4. <link rel="manifest" href="./manifest.json"> 相对路径, 非首页就404. service-worker.js同理
  5. 重复刷新页面, 偶现报错并且白屏, 地址 https://im.aermin.top/group_chat/ddbffd80-3663-11e9-a580-d119b23ef62e?name=ghChat
    image

improve

  1. 性能(有缓存的情况下, fiora load基本在1s内, 你的在2.3s左右), MainView.js 和 RightView.js 耗时太多

  2. 样式是内联的, 所以js文件略大

  3. loading字样闪过的问题
    image

  4. https://fiora.suisuijiang.com/fiora-sw.js 这个 消息中的url不能渲染成

feature

  1. 支持粘贴发图

multilingual solution with I18

之前的Auth系统是login或者register的时候通过用户输入的userName来判断,后来支持了github auth 登录,造成有可能出现多个相同的userName,这样之前的userName Auth 登录会有bug,所以目前采用的解决方案是将userName Auth 和 Github Auth 分离开,userName Auth登录的时候将查找非github用户(github_id IS NULL)的账户密码进行校验

=>

image

demo?

Can I see a demo work somewhere?

api设计问题

你好 ,为什么这个工程的聊天信息获取都是放到了websocket中,而不是像vue-chat放在http中获取呢?有什么考量吗

Server load issue

I'm not sure if this is actually related with server load but please check this one.
I'm a fan of this project so forked and customized it.
Now before move to production, we are testing in local. It works really great when have less than 300 users.
But after that, auto-logout issue is happening, chat freezing issue is happening.
And also even though some users sending message but it isn't shown on the other user's side.
Is this related with socket.io concurrent issue? I applied all approaches introduced in google to fix this issue.
But it only increased from 300 to 350 users.
I have nginx server behind the node server.
Would be great if someone gives me a hint how to solve it or ghchat is only for small amount of users?
it can't support large amount of users?

产品设计及定位

本来是想用react技术栈重写之前写的vue-chat,写着写着变成了重构和改版, 除了为了性能和用户体验不断地重构,产品设计也改了挺多

vue-chat是模仿QQ微信的,做的偏向于相对私密的社交,比如加好友需要对方验证通过,加群前只能看到群简介

react-chat我决定搞一点不一样的,做成偏向于开放的社交,比如不需要加好友,不需要验证;搜索到该用户可以直接聊,加群前能看到当前时间之前的群聊天记录(这个feature我绞尽脑汁设计的😂,是为了加群之前看看群里的聊天质量再考虑加不加,省得加入一些不合自己口味的群,还得再次退出);支持github登录,全球最大同性交友网加持open,emmm....

koa2- remove

Hi, I'm asking for your code.
I saw that you use koa2 is a great framework, but it is only used in the authentication/login phase.
To improve the performance and make the code more homogeneous, I would use only socket.io
So it's better to remove koa2 and use socket.io also for registration and login.
What do you think about it?

UI改版

之前的UI长这样:

1

2

3

现在的长这样

4

5

6

image

新版本更干净简洁(??),会不会更丑我也母鸡,毕竟没啥审美😂

客户端中InitApp/index.js为什么会被默认初始化并执行

您好!因为现在正在学习您的代码,遇到了一些问题,想请教您一下。

  我在学习代码的过程中,在服务端跟index.js客户端进行socket通信方面遇到了问题,希望能够得到您的解答,问题就是没有理解为什么InitApp/index.js中的InitApp类中的init()函数会被默认执行,具体疑惑如下:
  在客户端的src/conpontent/PrivateChat/index.js中,在一个用户想要给另外一个用户发送信息时(例如A用户想要给B用户发送信息),A用户会通过src/conpontent/PrivateChat/index.js的51行的request.socketEmitAndGetResponse('sendPrivateMsg',data),先将要发送的信息以及B用户的信息发送到服务端,然后这个请求被服务端中server/src/app/socket/app.socket.ts接收(app.socket.ts的89行),服务端通过io.to(e).emit('getPrivateMsg', data);来将信息转发给B用户。
   在客户B的客户端中,接受服务端的socket的部分是客户端代码中的src/app/modules/InitApp/index.js的第65行,然后再通过Action和Reducer来更新客户端的网页信息。
   但是我疑惑的是为什么服务端能够直接和客户端B进行通信,因为我并没有发现InitApp/index.js这个文件被其他程序调用过。通过学习知道,InitApp中的socket部分都是为了跟服务端进行socket通信。也就是为什么InitApp/index.js这个文件会被默认执行。
   通过执行demo时候打印log,我发现只要成功登录进入主页面中,InitApp/index.js的构造函数就会被执行,这是否是一个什么机制,能够自动调用或者初始化这个InitApp对象?
   希望能够得到您的回答,谢谢!

safari 浏览器登录后刷新会先连接再断开

    你好, 应工作需要, 我把此项目后端从node转成Java, 然后改了点其它小的功能, 然后今天突然发现了问题.
    在safari浏览器中, 登录后, 一切正常, 没什么问题, 但是点 刷新,打日志发现会先连接,再断开 (而在正常情况如chrome中, 是先断开,再连接), 造成信息无法即时获取等问题
    几经查找, 原来没改造之前就有这问题😂, 目测是前端的问题,但 react 我的能力也只是在模仿编写的阶段, 有点难找原因.


截屏2020-05-28 下午6 18 46

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.