Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

tinyMay/airchat

Open more actions menu
 
 

Repository files navigation

airchat

介绍

这是我的毕设项目,产品功能和页面参照qq,微信,TIM,不完全一样,有些是自己的想法。前后端都写。 感觉是一个挺不错的全栈入门项目,各种交互各种业务逻辑,对node(koa)和vue学习挺有帮助,现在开源出来,接下去将继续不断完善😄欢迎star

注意协议,别拷贝去当今年的毕设项目,不然查重得gg,别给毕业找麻烦哈

技术栈:

前端vue,vue-router,vuex ,vue-cli和axios,做了移动端适配,没有用第三方组件。 后端用koa2,用gulp构建工具实现自动刷新后端代码运行。 数据库用mysql,基于Token的jwt鉴权机制,用socket.io做双向通信;

线上地址

点击线上查看

欢迎大家注册登录,加这个群聊天😄 搜群名称: 项目交流群

群聊

也可以加我为好友,用户名: hxvin

也可以注册两个账号在两个不同浏览器自己尬聊啦 😂

项目展示 (部分)

github貌似没展示完全gif图 可直接戳链接查看

gif链接1

airchat1

gif链接2

airchat2

gif链接3

airchat3

image

进度

开始 -----------------2018.01.13

  • 登录
  • 注册
  • 登出
  • 弹窗,提示等组件
  • 机器人智能聊天回复
  • 私聊
  • 群聊

-----------------2018.02.01

  • 用户资料卡
  • 加好友及验证好友请求
  • 好友请求通知
  • 删除好友
  • 未读消息提示

-----------------2018.02.10  吐槽一下,不得不佩服qq,微信的用户体验,功能细节挺多。。。。。还有,春节快到了,找我玩(茬)的bug也不少呀ಥ_ಥ

  • 搜索用户,群组
  • 创建群
  • 群资料卡
  • 加群
  • 退群
  • 修改备注

-----------------2018.02.11 一开始我只想做个简单的即时通讯而已的(认真脸),为啥抑制不住洪荒之力 orz 。暂时停更功能,先写毕设去了,毕业要紧毕业要紧🎓

  • 发布到线上
  • 修改个人信息

-----------------2018.03.02

  • 通讯录展示
  • 聊天发表情
  • 聊天发图片
  • 支持聊天代码美化,md语法
  • 用户上传头像
  • 性能优化,redis做缓存

下载到本地开发环境跑

本次开发我用了三个git分支,分别是主分支master ,开发分支dev , 线上分支online,如果你要fork到你的本地跑,请fork master分支 。

(注意下到本地后如果要体验soket.io通信互聊,用两个浏览器各打开一个账号,不能用同一个浏览器,因为我用localstorage缓存账户信息)

Fork 或者 下载本项目

然后进入本项目的文件夹,把airchat/server/init/sql 的 airchat.sql文件 拉到你的msyql客户端(我使用的是mac下的 Sequel Pro 挺好用的)

npm i
npm run dev
cd server 
npm i

接着下面两条命令执行一条就行,看着选;(如果想要修改后端代码即时保存刷新,用第一条;如果像想用chrome进行debug调试,用第二条)

npm run start  
npm run dev

打包上线,让所有人都能用到你的产品(非必须)

打包上线前需要对master分支的代码做一些修改。具体怎么修改以及后续如何打包上线,请看我单独写的一篇文章airchat 打包上线小记,希望对你有帮助。

老习惯,代码注释比较详细,需要注释而没有注释的我也尽快补上; 后面也会写几篇博客来详细介绍本项目,希望更好的帮助到入门的小伙伴(大神请略过,或者给些指导建议😄)

如果对您有帮助,希望给个start,鼓励我继续更新^ ^

材料

自己总结的

web移动端适配方案

airchat 打包上线小记

token,Json web token(jwt)

web移动端页面怎么调试

本地mysql客户端连接centos的数据库

文章都在我的博客上,欢迎star我的博客😄

第三方的(在此感谢)

socket.io英文文档

socket.io中文文档

socket.io in github

socket.io-client in github

聊天机器人api

About

📲web聊天工具。前端vue+vuex+vue-cli+vue-router+axios+scss; 后端node(koa2)+mysql+JWT(Json web token)验证身份+socket.io双向通信;前后端分离。功能页面借鉴qq,微信,TIM,有登录注册,私聊,群聊,加(删、搜)好友,加(退、建、搜)群,修改备注、个人信息,未读消息提示,机器人智能聊天等。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • Vue 54.6%
  • JavaScript 41.1%
  • CSS 3.9%
  • HTML 0.4%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.