Dsx_wechat
- Ceci est un client WeChat imitant Vue
- Adresse du projet Github : https://github.com/GGwujun/Dsx_wechat
- Une application Web qui imite WeChat, possède un véritable chat et d'autres fonctions, et est implémentée en séparant le front-end et le back-end. Le front-end est basé sur le framework Vue 2.0, le back-end est basé sur Node.js + Express + MongoDB, et la fonction de chat et la fonction d'ajout d'amis sont implémentées via Websocket.
- Bienvenue à suivre mon compte public :
- Pile technologique frontale : vue 2.0, vue-cli, vuex, vue-router, webpack 2.x, pug, sass, babel, etc.
- Pile technologique back-end : Node.js, Express, express-session, WebSocket(ws), MongoDB, mongoose, ES6, etc.
Introduction
- J'apprends Vue depuis un certain temps, mais l'entreprise n'utilise pas Vue. Afin de pratiquer Vue, j'ai également réalisé plusieurs projets personnels, grands et petits, et imité la version PC de WeChat puisque sockit.io ne peut pas être actualisé. , l'expérience côté PC n'est pas bonne, vous devez vous reconnecter après avoir actualisé avant de pouvoir envoyer des messages à des amis.
- Le plus utilisé dans l'entreprise est ionic, un framework d'interface utilisateur partiel axé sur les applications Web mobiles, qui utilise également le framework AngularJS. Cordova a été utilisé pour l'empaquetage, et plus tard j'ai pensé à utiliser Vue pour créer un client WeChat et l'emballer avec Cordova.
- À l'heure actuelle, le matériel des téléphones mobiles est déjà très bon. L'expérience d'application du packaging de base Cordova est toujours très fluide. Les applications d'une seule page avec Vue peuvent fondamentalement devenir des applications natives sans aucune différence.
- La partie front-end est construite et empaquetée à l'aide de vue-cli, et codée avec le bucket de la famille vue (vue, vuex, vue-router)
- Utilisez axios pour faire des demandes de ressources
- Le backend est développé en utilisant l'architecture express de Node.js. Il n'existe actuellement pas beaucoup d'interfaces, mais elles seront continuellement mises à jour.
Serveur
- Développé avec Nodejs + Express
- Réalisez l'inscription, la connexion, la déconnexion, l'affichage des amis, la page d'accueil personnelle, l'ajout d'amis, le chat en tête-à-tête et le chat de groupe
- Adresse du projet Github : https://github.com/GGwujun/chatserve
Aperçu
Télécharger l'apk
Cliquez ici pour télécharger et installer l'apk. Actuellement, il ne prend en charge que les systèmes Android (5.0 ou supérieur) (le projet étant encore en développement, certaines fonctions peuvent ne pas être les plus récentes ou temporairement indisponibles).
Les nouveaux utilisateurs doivent entrer en créant un compte et les utilisateurs enregistrés peuvent se connecter directement. Actuellement, le compte ne prend pas en charge les messages hors ligne, ni l'ajout d'utilisateurs hors ligne en tant qu'amis (les fonctions liées à la messagerie instantanée doivent garantir que l'autre partie est en ligne)
utilisation locale
En supposant que vous avez installé Node.js , clonez le référentiel directement dans votre région, installez tous les plug-ins et démarrez le serveur. Il est recommandé d'utiliser Google Chrome et de l'afficher en mode débogage mobile (http://localhost:8808/).
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
Conseils
- Il est impossible de s'inscrire ou d'obtenir des données car l'interface backend que j'ai configurée est mon serveur. Vous pouvez télécharger vous-même le code backend et le déployer sur votre propre serveur, mais il est généralement accessible.
- Si vous souhaitez créer votre propre serveur, en plus d'installer les dépendances liées aux nœuds, vous devez également installer la base de données MongoDB.
fonction
Le projet a implémenté la prise en charge du serveur backend avec une véritable fonctionnalité de chat. Veuillez transférer la partie backend ici
- Style de conception d'interface client WeChat à haute imitation, avec des animations push, pop, modales, rejet et autres animations de transition ;
- Les fonctions d'enregistrement, de connexion et de déconnexion peuvent mémoriser l'état de connexion et éviter plusieurs connexions ;
- Fonction de salle de discussion, tous les utilisateurs en ligne peuvent discuter en groupe ;
- Pour ajouter un ami, vous devez vous assurer que l'autre partie est en ligne avant de pouvoir ajouter un ami correctement ;
- Les utilisateurs peuvent discuter en privé. Actuellement, l'autre partie doit être en ligne avant de pouvoir discuter normalement.
- Actuellement, seul le chat textuel est pris en charge.
Plus de fonctionnalités à suivre...
Si vous pensez que ce projet est bon, n'hésitez pas à le mettre en vedette et à le partager !
