Skip to content

feng0537/wchat-vue

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WChat By Vue 2.0

个人作品,已开源,希望和大家一起学习和进步。

WChat 是一款模仿iOS端微信的 Web App,具有真实的聊天等功能,并采用前后端分离的方式来实现。前端基于 Vue 2.0 框架,后端基于 Node.js + Express + MongoDB,聊天功能和添加好友功能通过 Websocket 实现。

前端技术栈: vue 2.0、vue-cli、vuex、vue-router、webpack 2.x、pug、sass、babel等;

后端技术栈:Node.js、Express、express-session、WebSocket(ws)、MongoDB、mongoose、ES6等。

在线预览

点击这里在线查看效果,建议使用谷歌浏览器,并开启手机调试模式(由于项目仍在开发中,部分功能可能不是最新、或暂不可用)。

新用户必须通过注册账号进入,已注册用户可直接登录进入。目前占不支持离线消息,也不支持添加离线用户为好友(即时通信相关功能必须保证对方在线)

本地使用

假设你已安装 Node.js,那么直接克隆仓库到本地,安装完所有插件并启动服务器。 建议使用谷歌浏览器并在手机调试模式下查看(http://localhost:8808/)。

# clone
git clone https://github.com/moohng/wchat-vue.git

# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd wchat-vue
npm install

# 开启本地服务器 监听8808端口
npm run dev

效果演示

登陆

Login

注销

Logout

聊天

Chat

添加好友

add friend

功能说明

该项目已实现后端服务器的支持,具有真实的聊天功能。后端部分请转移这里

  • 高仿iOS端的界面设计风格,具有push、pop、modal、dismiss等转场动画;
  • 注册、登陆和注销功能,可记住登录状态,避免多次登录;
  • 聊天室功能,所有在线用户可进行群聊;
  • 添加好友,目前必须保证对方在线才能正确添加;
  • 用户私聊,目前必须保证对方在线方可正常聊天;
  • 目前只支持纯文本聊天。

更多功能请待续...

如果您觉得该项目不错, 欢迎star和分享!

About

一款基于Vue 2的仿微信Web App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • Vue 65.5%
  • JavaScript 33.3%
  • Other 1.2%