{"id":14982089,"url":"https://github.com/aermin/vue-chat","last_synced_at":"2025-04-04T09:09:58.947Z","repository":{"id":40792120,"uuid":"117393438","full_name":"aermin/vue-chat","owner":"aermin","description":":calling: A web chat application.   Vue + node(koa2) + Mysql + socket.io","archived":false,"fork":false,"pushed_at":"2022-12-22T10:36:48.000Z","size":2488,"stargazers_count":709,"open_issues_count":50,"forks_count":198,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-28T08:09:42.234Z","etag":null,"topics":["gulp","jwt-token","koa2","msyql","pm2","robot","scss","socket-io","vue","vue-cli","vue-router","vuex","websocket"],"latest_commit_sha":null,"homepage":"https://im.aermin.top/group_chat/ddbffd80-3663-11e9-a580-d119b23ef62e","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aermin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-14T01:49:27.000Z","updated_at":"2025-03-02T18:50:32.000Z","dependencies_parsed_at":"2023-01-30T07:15:39.368Z","dependency_job_id":null,"html_url":"https://github.com/aermin/vue-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/aermin%2Fvue-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aermin%2Fvue-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aermin%2Fvue-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aermin%2Fvue-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aermin","download_url":"https://codeload.github.com/aermin/vue-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149505,"owners_count":20891954,"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":["gulp","jwt-token","koa2","msyql","pm2","robot","scss","socket-io","vue","vue-cli","vue-router","vuex","websocket"],"created_at":"2024-09-24T14:04:45.884Z","updated_at":"2025-04-04T09:09:58.929Z","avatar_url":"https://github.com/aermin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-chat    \n\n## 目前将一直重点更新维护react版本的，此版本注重性能和代码质量，完成度更高，更用心地去写，有兴趣的同学请移步 -\u003e [react版本](https://github.com/aermin/react-chat)\n\n\n## 线上地址\n\n[点击加入线上聊天](https://im.aermin.top)\n\n欢迎加入 \"ghChat项目交流群\" 这个群交流呀，可搜索群名(不用全打)加入，也可点击机器人的邀请加入(如下图)\n\n![image](https://user-images.githubusercontent.com/24861316/53296199-6337a200-3845-11e9-8435-3f5480cca602.png)\n\n\n### 介绍\n\n这是我的毕设项目，产品功能和页面参照qq，微信，TIM，不完全一样，有些是自己的想法。前后端都自己写。\n感觉是一个挺不错的全栈入门项目，各种交互各种业务逻辑，不花哨，但实用。\n\n对node（koa）和vue学习会挺有帮助，现在开源出来，接下去将继续不断完善😄欢迎star\n\n### 技术栈：\n\n前端vue，vue-router,vuex ，vue-cli和axios，scss,用rem做了移动端适配，没有用第三方组件。\n后端用koa2，用gulp构建工具实现自动刷新后端代码运行。\n数据库用mysql，基于Token的jwt鉴权机制，用socket.io做双向通信；\n\n \n![群聊](https://user-gold-cdn.xitu.io/2018/3/1/161e03584988b916?w=326\u0026h=251\u0026f=jpeg\u0026s=32371)\n\n### 项目展示 \n\n- 系统组成\n\n![image](https://user-images.githubusercontent.com/24861316/41090200-47c9c28e-6a76-11e8-8147-f9f771b3d70d.png)\n\n\n![image](https://pic3.zhimg.com/v2-e910ab47a384372da02ebeb1e9394f6e_b.gif)\n![image](https://pic3.zhimg.com/v2-555e1045f4e55b0877b65be1e3832242_b.gif)\n![image](https://pic2.zhimg.com/v2-a2b249f27021fc0db4f7ee87950e2601_b.gif)\n\n![image](https://user-images.githubusercontent.com/24861316/41090733-8bc710d0-6a77-11e8-94b9-9d6d698ed162.png)\n\n\n![image](https://user-images.githubusercontent.com/24861316/41091157-834856ac-6a78-11e8-923e-31fdaae84a01.png)\n\n### todo\n\n\u003e 2018.01.13  开始\n\n- [x] 登录\n- [x] 注册\n- [x] 登出\n- [x] 弹窗，提示等组件\n- [x] 机器人智能聊天回复\n- [x] 私聊\n- [x] 群聊\n\n\u003e 2018.02.01\n\n- [x] 用户资料卡\n- [x] 加好友及验证好友请求\n- [x] 好友请求通知\n- [x] 删除好友\n- [x] 未读消息提示\n\n\u003e 2018.02.10  吐槽一下，不得不佩服qq，微信的用户体验，功能细节挺多。。。。。\n\n- [x] 搜索用户，群组\n- [x] 创建群\n- [x] 群资料卡\n- [x] 加群\n- [x] 退群\n- [x] 修改备注\n\n\u003e 2018.02.11 \n\n- [x] 发布到线上\n- [x] 修改个人信息  \n \n\u003e 2018.03.02\n\n- [x] 收到添加好友请求底部tab红点提醒\n\n\u003e 2018.03.20  收拾掉不少bug :-)  \n\n- [x] 迁移成Electron桌面版本的，支持mac和win环境。 ~~（Electron版本将于答辩完开源）~~\n\n已开源：[Electron桌面版本项目地址](https://github.com/aermin/electron-vue-chat)\n\n\u003e 2018.03.25 \n\n- [ ] 通讯录展示\n- [ ] 聊天发表情\n- [ ] 聊天发图片\n- [ ] 支持聊天代码美化，md语法\n- [ ] 用户上传头像\n- [ ] 性能优化，redis做缓存\n- [x] 实现react版本的\n\n### 下载到本地开发环境跑\n\n本次开发我用了三个git分支，分别是主分支master ，开发分支dev ， 线上分支online，如果你要fork到你的本地跑，请fork master分支 。\n\n（注意下到本地后如果要体验soket.io通信互聊，用两个浏览器各打开一个账号，不能用同一个浏览器，因为我用localstorage缓存账户信息）\n\nFork 或者 下载本项目\n\n然后进入本项目的文件夹，把vue-chat/server/init/sql 的 airchat.sql文件 拉到你的msyql客户端 run一下生成数据库(我使用的是mac下的 `Sequel Pro` 挺好用的，当然你用其他方式也可生成数据库也可)\n\n```js\nnpm i\n```\n```js\nnpm run dev\n```\n```js\ncd server \n```\n```js\nnpm i\n```\n接着下面两条命令执行一条就行，看着选；（如果想要修改后端代码即时保存刷新，用第一条；如果像想用chrome进行debug调试，用第二条)\n\n```js\nnpm run start  \n```\n```js\nnpm run dev\n```\n\n### 打包上线，让所有人都能用到你的产品(非必须)\n\n打包上线前需要对master分支的代码做一些修改。具体怎么修改以及后续如何打包上线，请看我单独写的一篇文章[vue-chat 打包上线小记](https://github.com/aermin/blog/issues/28)，希望对你有帮助。\n\n\u003e 老习惯，代码注释比较详细，需要注释而没有注释的我也尽快补上;\n后面也会写几篇博客来详细介绍本项目，希望更好的帮助到入门的小伙伴(大神请略过，或者给些指导建议😄)\n\n##### 如果对您有帮助，希望给个star，鼓励我继续更新^ ^\n\n### 开发目录\n\n```\n├── LICENSE\n├── README.md\n├── build\n│   ├── build.js\n│   ├── check-versions.js\n│   ├── logo.png\n│   ├── utils.js\n│   ├── vue-loader.conf.js\n│   ├── webpack.base.conf.js\n│   ├── webpack.dev.conf.js\n│   └── webpack.prod.conf.js\n├── config\n│   ├── dev.env.js\n│   ├── index.js\n│   └── prod.env.js\n├── dist  //打包后的静态资源\n│   ├── index.html\n│   └── static\n├── index.html\n├── package-lock.json\n├── package.json\n├── server  // 后端代码\n│   ├── config.js\n│   ├── controllers\n│   ├── gulpfile.js\n│   ├── index.js \n│   ├── init  //数据库初始化(sql文件也在这)\n│   ├── middlewares \n│   ├── models\n│   ├── package-lock.json\n│   ├── package.json\n│   ├── routes\n│   └── utils \n├── src  //前端代码\n│   ├── App.vue\n│   ├── assets\n│   ├── components\n│   ├── main.js\n│   ├── pages\n│   ├── router\n│   ├── store //vuex在这\n│   └── utils\n└── static\n```\n\n### 材料\n\n#### 自己总结的 \n\n[web移动端适配方案](https://github.com/aermin/blog/issues/8)\n\n[vue-chat 打包上线小记](https://github.com/aermin/blog/issues/28)\n\n[token，Json web token（jwt）](https://github.com/aermin/blog/issues/24)\n\n[web移动端页面怎么调试](https://github.com/aermin/blog/issues/9)\n\n[本地mysql客户端连接centos的数据库](https://github.com/aermin/blog/issues/7)\n\n文章都在[我的博客](https://github.com/aermin/blog)上，欢迎star我的博客😄\n\n#### 第三方的(在此感谢) \n\n[socket.io英文文档](https://socket.io/docs/server-api/)\n\n[socket.io中文文档](https://zhuanlan.zhihu.com/p/29148869)\n\n[socket.io  in github](https://github.com/socketio/socket.io/)\n\n[socket.io-client in github](https://github.com/socketio/socket.io-client)\n\n[聊天机器人api](http://www.tuling123.com/)\n\n###  License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faermin%2Fvue-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faermin%2Fvue-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faermin%2Fvue-chat/lists"}