Tyloo Chat

Tyloo-chat (imitación wechat)

La dirección de acceso en línea se cierra temporalmente

ilustrar

Esta bifurcación del proyecto ha sido optimizada y actualizada de General-Chat. ¡Gracias al jefe Genal por sus ideas de código abierto!

Todavía es hora de continuar optimizando, ¡así que estad atentos!

Si crees que es bastante bueno, ¡haga clic en Star para alentarlo!

Se ha lanzado el cliente de la versión Electron, consulte la versión para más detalles

Capturas de pantalla de algunas funciones

• Interfaz general

• Contactos

• Función de chat grupal (lista de miembros del grupo, estado en línea, soporte para agregar miembros del grupo)
• Lista de sesiones (Top/Eliminar)

• Función de retracción de mensajes

Cliente de versión Electron (ubicado en la rama Electron_version)

• Versión de Windows (exe)

• Versión Mac (DMG)

Característica

• Registro de inicio de sesión del usuario (admite inicio de sesión único integrado en sistemas de terceros)
  • Dirección de inicio de sesión único, haga clic en el botón de comunicación en línea en la esquina superior derecha después de iniciar sesión
• Chat grupal (similar al grupo QQ)
  • Invite a sus amigos a unirse al chat grupal
  • Modificar el nombre del grupo/anuncio del grupo
• Función de amigos
• Función del libro de contacto (admite el acceso a la estructura organizativa del sistema de terceros e inicia el chat directamente)
• Función de chat
  • Mochila emoji
  • Vista previa de envío de imagen/imagen
  • Enviar archivos adjuntos
  • Paginación de mensajes
  • Retracción/copia del mensaje
• Tema personalizado
• Top/Eliminar de la sesión
• Volver a conectar recordatorio
• Asistente inteligente (predeterminado, ubicado en la rama principal, utilizando el motor de búsqueda de ES requiere la creación manual de ES Thesaurus)
• Robot API de terceros (versión de demostración en línea actual, ubicada en la rama Feing_apirobot)
• La versión de Electron (ubicada en la rama Electron_version, admite la generación de clientes DMG y EXE)

Pila de tecnología

• Interfaz

  • vue cli 4.x
  • Antd para vue

• extremo posterior

  • Nidos
  • Tormenta de tormenta
  • Mysql

• Socket.io

• Elasticsearch ES Search Engine (utilizado para robots para respuestas rápidas y automáticas)

• NodeJieba Versión de nodo segmento de palabras chino

Diseño de la estructura de la tabla de bases de datos

Preparación ambiental

• mysql
• Base de datos de chat (debe crearse manualmente, tenga en cuenta que el formato de codificación de la base de datos es utf8bm64``utf8bm64``utf8bm64 ! )
• nodo V10.16.3

Cosas a tener en cuenta al extraer código

 // windows系统需要配置一下,提交时转换为LF，检出时不转换
git config --global core.autocrlf input

 // 设置为区分大小写
git config core.ignorecase false

Ejecutar el proyecto

 // client
cd client 
cnpm i
npm start 

 // server
cd server
cnpm i
npm run start 

Cómo implementar

Desplegar

Desplegar salas de chat en el centeno

Integración de terceros/inicio de sesión único

• El siguiente código de salto está integrado en el sistema de terceros, y se requieren userId y username .

 let chatUrl // 当前聊天室客户端地址
let userId // 当前系统用户userId
let username // 当前系统用户昵称

window . open ( ` ${ chatUrl } ?userId= ${ userId } &username= ${ username } ` ) ;

• La sala de chat obtiene parámetros y completa automáticamente el inicio de sesión (si es la primera vez que inicia sesión, registrará automáticamente una cuenta)

• Establezca el cliente de la sala de chat VUE_APP_ORG_URL para obtener la dirección de interfaz de la estructura organizativa del sistema de terceros

  • Establecer vue_app_org_url

   // .env.xxx
  // 此接口可以获取到第三方系统的所有部门和人员信息,注意为嵌套tree结构
  VUE_APP_ORG_URL = http : / / 127.0 .0 .1 : 8080 / api / getDeptUsersTree

  • Cambiar a la interfaz de contacto para emitir automáticamente las solicitudes

   // Contact.vue
  axios . post ( process . env . VUE_APP_ORG_URL ) . then ( ( res ) => {
      this . organizationArr = res . data . data ;
  } ) ;

  • El formato de valor de retorno es el siguiente

   interface node {
      id: string ; // id
      label: string ; // 名称
      flag: boolean ; // 是否有下级结点
      children: node [ ] ; // 下级结点
  }

  • Si no necesita integrar la estructura organizativa de terceros, simplemente borre VUE_APP_ORG_URL y personalice y modifíquela usted mismo en otras situaciones.

Descripción general de las ideas

Proceso de establecimiento de WebSocket

HACER

• @功能实现
• 消息转发
• 代码性能优化
• 群聊功能继续完善
• 微信快捷登陆
• Electron客户端检查更新

Grupo de comunicación