React.jsVueKoa

用react/vue全家桶+node.js(koa)+socke

2019-02-26  本文已影响3人  aermin

前言

一年前我花了个把月的时间仓促地写了个vue全家桶+koa+sokoet.io+mysql的应用来当做我的毕业设计---vue-chat，目前在github获得359个star，不过感觉代码实现太糙了，推荐看新写的这个😂。

毕业后我入职的公司用的是react技术栈，而且公司恰好是一个做通信应用相关的公司，所以萌生了下班业余时间用react技术栈重写一遍的想法。相比vue-chat,这个历时更长(大半年来利用空余时间不断重构迭代)，完成度相对更高，性能和代码质量相对更好（当然还有不少todo的优化空间），不再是只要求功能能跑就好了，而是不断的重构重写，也有了产品定位，而不是像vue-chat那样一味的模仿QQ和微信。

正文

ghChat(react版)

github地址

之所以叫ghChat，是想着以后做一些GitHub的集成，希望让这个即时通讯工具成为chat tool for github.

目前只支持github授权登录，和展示github用户公开的信息。

项目展示：

github对gif图有限制，我就直接截图了，具体详情建议直接线上体验。可以的话给个star支持一下 😄

image image image image image

地址

github项目地址。慷慨地给个star呀~

网站线上地址，支持直接github授权登录。

欢迎加入 "ghChat项目交流群" 这个群交流呀，可搜索群名(不用全打)加入，也可点击机器人的邀请加入(如下图)

image

技术栈

前端React全家桶，后端node.js(koa2), 数据库MySQL, 双向通信SocKet.io, jwt鉴权等等。具体看package.json哦。

本地跑项目

  1. 项目拉到本地
git clone https://github.com/aermin/react-chat.git
  1. 在react-chat文件夹下创建一个secret.js的空白文件。

如果要使用github授权登录，使用七牛云cdn，生产环境数据库和jwt的secret的单独配置，就要填充相应的配置了。

module.exports = {
  client_secret: '', // github授权登录需要的  github-> settings ->  Developer settings 那边生成获取
  db: {
    host: '', // 数据库IP
    port: , // 数据库端口
    database: '', // 数据库名称
    user: '', // 数据库用户名
    password: '', // 数据库密码
  },
  secretValue: '', // json web token 的 secret
  qiniu: { // 七牛云配置
    accessKey: '',
    secretKey: '',
    bucket: ''
  }
};
  1. 下载前端的npm包
cd react-chat

npm i
  1. 下载后端的npm包
cd cd react-chat/server 

npm i
  1. 初始化数据库
//需要先在本地建一个名为ghchat的mysql数据库
配置如下看react-chat/server/config.js

npm run init_sql    //然后查看下数据库是否init成功
  1. 跑起前端后后端的代码
npm run start

cd ..      // 返回到react-chat/目录

npm run start

ps: 本地发表情和发文件和github登录无法使用，需要自己去github和七牛云申请一些东西

文档

如果有新同学想通过此项目学习的，可以看下我写的ghChat开发历程 哦，将不断地更新总结做这个全栈项目时会遇到的问题，知识点，和坑。

目前进度

上一篇 下一篇

猜你喜欢

热点阅读