Wechat Wecat

Nosotros gato

introducir

• Proyecto de chat instantáneo basado en Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB
• La parte de funciones se refiere a WeChat, con algunas funciones interesantes agregadas. Los comentarios del código del proyecto son muy detallados y es un buen proyecto introductorio completo para aprender Vue, Node.js y koa.
• El front-end y la implementación del proyecto se completan de forma independiente. Si hay alguna imperfección en varias interacciones y varias funciones de lógica empresarial, no dude en mencionarla.

Visualización del proyecto

1. Iniciar sesión

2. Regístrate

3. Recuperar contraseña

4. El registro se realizó correctamente, seleccione avatar.

5. Panel principal

6. Agregar amigos

7. Panel de información de amigos

8. Enviar mensajes y archivos

9. Panel multifunción, enviar emoticones

10. Menú de configuración personalizado

11. Página de administrador, información de usuario.

12. Consulta todos los registros de chat.

13. Detalles del historial de chat

14. Documentación API

Estructura del directorio

1. el servidor es el servidor
2. público es un archivo estático
3. db es la copia de seguridad de exportación de MongoDB
4. src es la carpeta del proyecto

Tutorial de instalación

1. Clona el proyecto git clone https://github.com/imzusheng/Wecat.git
2. directorio raíz del proyecto cd, instalar dependencias npm install
3. Ejecutar servicio npm run serve
4. cd ./server y luego instale las dependencias del servidor npm install
5. Importar la base de datos mongorestore -d wecat ./db
6. Ejecute el servidor npm run dev

cuenta de prueba

ID de usuario: [email protected]
contraseña: a123456

HACER

• Acceso
• Evitar inicios de sesión duplicados
• Hora del último inicio de sesión
• Ubicación de inicio de sesión reciente (provincia-ciudad-distrito)
• Registrarse (verificación por correo electrónico)
• Recuperar contraseña (verificación por correo electrónico)
• Seleccionar avatar de usuario
• desconectar
• Chat de igual a igual con amigos
• Conexión de latido del corazón de WS y reconexión de desconexión
• Avisos de amigos en línea y fuera de línea
• Agregar amigos y verificar solicitudes de amistad
• Notificación de solicitud de amistad
• Recordatorio de mensaje no leído
• Buscar usuarios
• Configuración personalizada del usuario
• Carga diferida del historial de chat
• Estado de entrada de amigos actualizado en tiempo real
• El título del sitio web muestra la cantidad de mensajes no leídos en tiempo real
• Los amigos con los que conversaste recientemente están fijados en la parte superior
• Gestión de back-end
• Carga de imágenes y archivos del chat (carga múltiple)
• Vista previa y descarga de imágenes y archivos de chat
• chat grupal
• Tarjeta de perfil de usuario
• eliminar amigo
• Crear un grupo
• tarjeta de información del grupo
• Únete a un grupo
• abandonar el grupo

Pila de tecnología relacionada

• Vue CLI 3
• Vuex
• Nodo.js
• Elemento-ui
• axios
• MongoDB
• koa2
• WebSockets
• ws

Notas y resumen

• Carga de varios archivos en partes
• Implementado en el directorio no raíz del sitio web en el modo Historial del enrutador Vue
• La supervisión del teclado js implementa la combinación de teclas Ctrl + Intro para enviar mensajes.
• Utilice el módulo ES6 para encapsular su propio servicio Websocket

acerca de

• Correo electrónico [email protected]
• Dirección del proyecto
• Acerca de mí
• github
• casa rural