{"id":13493932,"url":"https://github.com/tangdaohai/chat","last_synced_at":"2025-03-28T13:31:29.344Z","repository":{"id":137233600,"uuid":"57020901","full_name":"tangdaohai/chat","owner":"tangdaohai","description":"一个基于 koa2 与 react 的聊天项目","archived":false,"fork":false,"pushed_at":"2020-01-13T06:20:15.000Z","size":1186,"stargazers_count":23,"open_issues_count":1,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-31T08:37:35.293Z","etag":null,"topics":["koa2","react","socket-io","wechat"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tangdaohai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-25T07:30:52.000Z","updated_at":"2021-04-10T06:53:25.000Z","dependencies_parsed_at":"2024-01-16T09:52:15.500Z","dependency_job_id":"df75fb5b-c751-479f-b60a-7cddda76c634","html_url":"https://github.com/tangdaohai/chat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangdaohai%2Fchat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangdaohai%2Fchat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangdaohai%2Fchat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangdaohai%2Fchat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangdaohai","download_url":"https://codeload.github.com/tangdaohai/chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246037343,"owners_count":20713398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["koa2","react","socket-io","wechat"],"created_at":"2024-07-31T19:01:20.117Z","updated_at":"2025-03-28T13:31:28.355Z","avatar_url":"https://github.com/tangdaohai.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Chat\n\n\u003e 此项目已经不再维护，而且版本已经很古老了，`React 相关的知识不建议使用本库作为学习参考`。\n\nnode, koa2 + socket.io + React\n\n### 安装  node \u003e= 6.0\n\n    git clone https://github.com/tangdaohai/chat\n    npm install\n\n### 写在前面\n\n这是一个使用了 koa2 全家桶与 react 全家桶的一个聊天项目.\n后期打算加入 vue 与 ng2 模块的方式.\n\n对于此项目的架构我深深考虑, 揣摩了好多次, 如果你有什么好建议欢迎发我邮箱进行讨论.\n\n如果有任何关于这个项目的问题请随时 isssues.\n\n\u003e ps: 特别声明, 关于 React 端的 UI 资源全部来自于 [dribbble](https://dribbble.com).\n感谢设计师们……\n\n登陆: [https://dribbble.com/shots/3043497-Login-Register/attachments/638824](https://dribbble.com/shots/3043497-Login-Register/attachments/638824)\n\nchat: [https://dribbble.com/shots/3136091-Chat-Web-App/attachments/664059](https://dribbble.com/shots/3136091-Chat-Web-App/attachments/664059)\n\n设置: [https://dribbble.com/shots/2864249-Account-settings/attachments/590588](https://dribbble.com/shots/2864249-Account-settings/attachments/590588)\n\n### 启动之前的准备\n\n##### * 依赖: mongodb 这个是最重要的, 需要创建为项目创建一个 chat 的数据库, 然后为这个数据库添加一个有读写权限的账号, 在配置中修改为你的账号. `server/configure/ 在这个目录下`\n\n* pm2 倒不是必须的, 没有pm2也可以启动只不过不是后台运行而已……\n\n* 内置了 webpack 的运行命令所以webpack 也不是必须的\n\n### 启动项目\n```\n    //npm 命令说明\n    npm start   //使用nodemon启动node,为了node端热更新。\n    npm run dev\n    //这两个都是启动开发模式, 开发者模式在 koa 中集成了 webpack 与 热替换模块, 所以这个模式下面不会生成实体 js,css 与 html 文件, 在 webpack 管理的内存中存放.\n\n    npm run prod //启动线上环境部署\n    npm run pm2 //将进程托管给pm2, 此模式会一直在后台运行\n    //这两个都是线上配置模式, 区别也只是在与 webpack 的配置. 会进行 js,css 分离,压缩,md5戳. html 也会自动压缩,会自动添加 js,css 路径\n\n    npm run build //按照线上部署模式webpack进行打包.\n```\n\n### 关于 css 布局\n\nreact 中的所有布局方式为 flex + position, 正在慢慢在细节上添加一些动画. 对 css 研究不深,所以关于 css 方面可能处理的并不优雅, 欢迎指点……\n\n### 部分截图(再次感谢 dribble 上设计师们……)\n\n1. 登陆\n\n![登陆](./docs/login.png)\n\n2. 登陆与注册间的动画\n\n![登陆与注册](./docs/login-animation.png)\n\n3. chat 界面\n\n![chat-1](./docs/chat-1.png)\n![chat-2](./docs/chat-2.png)\n![chat-3](./docs/chat-3.png)\n\n4. setting 比较简陋……\n\n![setting](./docs/setting.png)\n\n\u003e 未完待续……\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangdaohai%2Fchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangdaohai%2Fchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangdaohai%2Fchat/lists"}