Dsx_wechat
- This is a Vue imitation WeChat client
- Github project address: https://github.com/GGwujun/Dsx_wechat
- A Web App that imitates WeChat, has real chat and other functions, and is implemented by separating the front and back ends. The front-end is based on the Vue 2.0 framework, the back-end is based on Node.js + Express + MongoDB, and the chat function and adding friends function are implemented through Websocket.
- Welcome to follow my public account:
- Front-end technology stack: vue 2.0, vue-cli, vuex, vue-router, webpack 2.x, pug, sass, babel, etc.;
- Back-end technology stack: Node.js, Express, express-session, WebSocket(ws), MongoDB, mongoose, ES6, etc.
Intro
- I have been learning Vue for a while, but the company does not use Vue. In order to practice Vue, I have done several personal projects, large and small, and imitated the PC version of WeChat. Since sockit.io cannot be refreshed, the experience on the PC side is not good. , you need to log in again after refreshing before you can send messages to friends.
- What is mostly used in the company is ionic, a partial UI framework focusing on mobile webapps, which also uses the angularjs framework. Cordova was used for packaging, and later I thought of using Vue to make a WeChat client and packaging it with Cordova.
- At present, the hardware of mobile phones is already very good. The app experience of basic cordova packaging is still very smooth. Single-page applications with Vue can basically become native apps without any difference.
- The front-end part is built and packaged using vue-cli, and coded with vue family bucket (vue, vuex, vue-router)
- Use axios to make resource requests
- The backend is developed using the express architecture of Node.js. There are currently not many interfaces, but they will be continuously updated.
Server
- Developed using Nodejs + Express
- Realize registration, login, log out, view friends, personal homepage, add friends, one-on-one chat and group chat
- Github project address: https://github.com/GGwujun/chatserve
Preview
Download apk
Click here to download and install the apk. Currently, it only supports Android (5.0 or above) systems (because the project is still under development, some functions may not be the latest or temporarily unavailable).
New users must enter by registering an account, and registered users can log in directly. Currently, Account does not support offline messages, nor does it support adding offline users as friends (instant messaging related functions must ensure that the other party is online)
local use
Assuming you have installed Node.js , clone the repository directly to your local area, install all plug-ins and start the server. It is recommended to use Google Chrome and view it in mobile debugging mode (http://localhost:8808/).
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
Tips
- It is impossible to register or obtain data because the backend interface I configured is my server. You can download the backend code yourself and deploy it to your own server, but it is generally accessible.
- If you want to build your own server, in addition to installing node-related dependencies, you also need to install the MongoDB database.
function
The project has implemented backend server support with real chat functionality. Please transfer the backend part here
- High imitation WeChat client interface design style, with push, pop, modal, dismiss and other transition animations;
- Registration, login and logout functions can remember login status and avoid multiple logins;
- Chat room function, all online users can have group chat;
- To add a friend, you must ensure that the other party is online before you can add a friend correctly;
- Users can chat privately. Currently, the other party must be online before they can chat normally;
- Currently only text-only chat is supported.
More features to be continued...
If you think this project is good, please star and share it!
