Coder Social home page Coder Social logo

aermin / vue-chat Goto Github PK

View Code? Open in Web Editor NEW
706.0 706.0 202.0 2.43 MB

:calling: A web chat application. Vue + node(koa2) + Mysql + socket.io

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

License: MIT License

JavaScript 38.68% Vue 51.77% HTML 0.40% CSS 3.65% TSQL 5.50%
gulp jwt-token koa2 msyql pm2 robot scss socket-io vue vue-cli vue-router vuex websocket

vue-chat's Introduction

vue-chat

目前将一直重点更新维护react版本的,此版本注重性能和代码质量,完成度更高,更用心地去写,有兴趣的同学请移步 -> react版本

线上地址

点击加入线上聊天

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

image

介绍

这是我的毕设项目,产品功能和页面参照qq,微信,TIM,不完全一样,有些是自己的想法。前后端都自己写。 感觉是一个挺不错的全栈入门项目,各种交互各种业务逻辑,不花哨,但实用。

对node(koa)和vue学习会挺有帮助,现在开源出来,接下去将继续不断完善😄欢迎star

技术栈:

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

群聊

项目展示

  • 系统组成

image

image image image

image

image

todo

2018.01.13 开始

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

2018.02.01

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

2018.02.10  吐槽一下,不得不佩服qq,微信的用户体验,功能细节挺多。。。。。

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

2018.02.11

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

2018.03.02

  • 收到添加好友请求底部tab红点提醒

2018.03.20  收拾掉不少bug :-)

  • 迁移成Electron桌面版本的,支持mac和win环境。 (Electron版本将于答辩完开源)

已开源:Electron桌面版本项目地址

2018.03.25

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

下载到本地开发环境跑

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

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

Fork 或者 下载本项目

然后进入本项目的文件夹,把vue-chat/server/init/sql 的 airchat.sql文件 拉到你的msyql客户端 run一下生成数据库(我使用的是mac下的 Sequel Pro 挺好用的,当然你用其他方式也可生成数据库也可)

npm i
npm run dev
cd server 
npm i

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

npm run start  
npm run dev

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

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

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

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

开发目录

├── LICENSE
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist  //打包后的静态资源
│   ├── index.html
│   └── static
├── index.html
├── package-lock.json
├── package.json
├── server  // 后端代码
│   ├── config.js
│   ├── controllers
│   ├── gulpfile.js
│   ├── index.js 
│   ├── init  //数据库初始化(sql文件也在这)
│   ├── middlewares 
│   ├── models
│   ├── package-lock.json
│   ├── package.json
│   ├── routes
│   └── utils 
├── src  //前端代码
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── pages
│   ├── router
│   ├── store //vuex在这
│   └── utils
└── static

材料

自己总结的

web移动端适配方案

vue-chat 打包上线小记

token,Json web token(jwt)

web移动端页面怎么调试

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

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

第三方的(在此感谢)

socket.io英文文档

socket.io中文文档

socket.io in github

socket.io-client in github

聊天机器人api

 License

MIT

vue-chat's People

Contributors

aermin avatar beary 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

vue-chat's Issues

nodejs版本注意别太旧哈

忘了说了,node我用的是v8.0.0版本
建议用v7.x及以上版本哈

image

感谢@孤独的花朵提出并解决问题

很棒,已Star

请问开发一个类似的聊天工具对初学Vue.js的适合拿来当成练手项目吗?

关于群id的

新建群的时候,不像新建用户那样有用户名作为独特唯一的标记,
那怎么办呢?

想到两种方案:

1.新增一个字段,用uuid的包生成uuid放进去
package/uuid

使用方法 :

const uuidv1 = require('uuid/v1');
uuidv1(); // ⇨ 'f64f2940-fae4-11e7-8c5f-ef356f279131'

2.在执行建群操作时返回自增id
SELECT LAST_INSERT_ID()
这个没能搞定,没能简单搞定。。。

我选择了第一个方案,没在刚开始就注意到这个问题,现在要改不少地方。。😂吃下这一堑了

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.