vue advanced chat

chat

Patrocinadores

API/servidor de chat fácil de usar con infraestructura escalable

Características

• Compatible con todos los marcos de JavaScript (vue, angular, reaccionamiento, etc.) o ningún marco en absoluto
• Mensajería de chat en tiempo real personalizable
• Backend agnóstico
• Imágenes, videos, archivos, mensajes de voz y emojis
• Editar mensajes y responder a otros mensajes
• Sugerencias de acceso directo a los usuarios de etiquetas y emojis
• Elementos de UI para mensajes vistos, nuevos, eliminados, de escritura y sistema
• Formateo de texto: en negrita, cursiva, strikethrough, subrayado, código, multiline
• Estado de usuarios en línea / fuera de línea
• Opciones y ranuras flexibles
• Modos de tema de luz y oscuridad
• Firestore Ejemplo
• TypeScript, PWA, soporte de componentes web

Manifestación

Disfrutar ?

Ejemplo del mundo real

Una aplicación web progresiva que muestra todas las características del componente vue-advanced-chat .
Construido con notificaciones Firestore, Vuetify y Push.

Si desea obtener acceso premium al código fuente de ejemplo del mundo real, contácteme por correo electrónico.

Obtendrá una aplicación de chat completamente en funcionamiento para web y móvil:

• UI e integración de backend
• Correo electrónico, autenticación de Facebook y Google
• Mensajes en tiempo real, notificaciones de impulso del navegador, optimización de imágenes (Firebase Cloud Functions para comprimir avatares)
• Componentes UI/UX para alertas (errores, información), diálogos, etc.
• Agregue los usuarios existentes a una habitación utilizando su correo electrónico
• Enviar invitaciones por correo electrónico a usuarios no existentes
• Edición de perfil y habitaciones
• Adición y eliminación de usuarios de la sala
• Implementación optimizada de Firestore para reducir el ancho de banda y cuesta tanto como sea posible
• Gestión estatal utilizando Vuex
• Internacionalización (i18n)
• Análisis de Google
• Soporte para ayudarlo a poner el chat en funcionamiento

Tabla de contenido

• Instalación
• Uso
• API de accesorios
• Estructura de datos de accesorios
• API de eventos
• Slots con nombre
• Usando con Firestore

Instalación

 # Using npm
npm install --save vue-advanced-chat

# Using yarn
yarn add vue-advanced-chat

# Using CDN
< script src= " https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-advanced-chat.umd.js " ></script >

Vue

Registre vue-advanced-chat y emoji-picker como componentes web en su archivo de configuración:

compilerOptions: {
  isCustomElement : tagName => {
    return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
  }
}

Demostración: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main

Reaccionar

Demostración: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react

Angular / iónico

Demostración: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/angular

Uso

Puede importarlo como un componente personalizado:

 < template >
  < vue-advanced-chat
    : current-user-id = "currentUserId"
    :rooms = "JSON.stringify(rooms)"
    : messages = "JSON.stringify(messages)"
    : room - actions = "JSON.stringify(roomActions)"
  / >
</ template >

< script >
  import { register } from 'vue-advanced-chat'
  register()

  // Or if you used CDN import
  // window['vue-advanced-chat'].register()

  export default {
    data ( ) {
      return {
        currentUserId : '1234' ,
        rooms : [ ] ,
        messages : [ ] ,
        roomActions : [
          { name : 'inviteUser' , title : 'Invite User' } ,
          { name : 'removeUser' , title : 'Remove User' } ,
          { name : 'deleteRoom' , title : 'Delete Room' }
        ]
      }
    }
  }
</ script >

Notas importantes

El componente vue-advanced-chat está orientado al rendimiento, por lo tanto, debe seguir reglas específicas para que funcione correctamente.

• Utilice la asignación de matriz en lugar del método push

 // DO THIS
const rooms = [ ]
for ( let i = 0 ; i < res . length ; i ++ ) {
  rooms . push ( res )
}
this . rooms = rooms

// DON'T DO THIS
for ( let i = 0 ; i < res . length ; i ++ ) {
  this . rooms . push ( res )
} 

 // DO THIS
this . rooms [ i ] . typingUsers = [ ... this . rooms [ i ] . typingUsers , typingUserId ]

// DON'T DO THIS
this . rooms [ i ] . typingUsers . push ( typingUserId )

• Para agregar o reemplazar un elemento dentro de una matriz, use el operador de propagación

 // DO THIS
this . rooms [ roomIndex ] = room
this . rooms = [ ... this . rooms ]

// DON'T DO THIS
this . rooms [ roomIndex ] = room

// AND DON'T DO THIS
this . rooms . push ( room )

• Siga el patrón de carga de la interfaz de usuario actualizando el accesorio messagesLoaded cada vez que se obtiene una nueva habitación

 fetchMessages ( { room , options } ) {
  this . messagesLoaded = false

  // use timeout to imitate async server fetched data
  setTimeout ( ( ) => {
    this . messages = [ ]
    this . messagesLoaded = true
  } )
} 

API de accesorios

Notas importantes

Si está utilizando Vue 3, puede pasar la matriz y los accesorios de objetos normalmente: pasar propiedades DOM en Vue 3
De lo contrario, debe pasar esos accesorios como cuerdas. Por ejemplo: [messages]="JSON.stringify(messages)"

Apuntalar	Tipo	Requerido	Por defecto
height	Cadena	-	600px
current-user-id (1)	Cadena	true	-
rooms	[Cadena, matriz]	-	[]
rooms-order	desc / asc	-	desc
loading-rooms (2)	Booleano	-	false
rooms-loaded (3)	Booleano	-	false
room-id (4)	Cadena	-	null
load-first-room (5)	Booleano	-	true
rooms-list-opened	Booleano	-	true
custom-search-room-enabled (6)	Booleano	-	false
messages	[Cadena, matriz]	-	[]
room-message (7)	Cadena	-	null
username-options (8)	[Cadena, objeto]	-	{minUsers: 3, currentUser: false}
messages-loaded (9)	Booleano	-	false
room-actions (10)	[Cadena, matriz]	-	[]
menu-actions (11)	[Cadena, matriz]	-	[]
message-actions (12)	[Cadena, matriz]	-	(11)
message-selection-actions (13)	[Cadena, matriz]	-	(13)
templates-text (14)	[Cadena, matriz]	-	null
auto-scroll (15)	[Cadena, objeto]	-	{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }
show-search	Booleano	-	true
show-add-room	Booleano	-	true
show-send-icon	Booleano	-	true
show-files	Booleano	-	true
show-audio	Booleano	-	true
audio-bit-rate	Número	-	128
audio-sample-rate	Número	-	44100
show-emojis	Booleano	-	true
show-reaction-emojis	Booleano	-	true
show-new-messages-divider (16)	Booleano	-	true
show-footer (17)	Booleano	-	true
text-messages (18)	[Cadena, objeto]	-	null
text-formatting (19)	[Cadena, objeto]	-	{disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `` `
link-options (20)	[Cadena, objeto]	-	{ disabled: false, target: '_blank', rel: null }
room-info-enabled (21)	Booleano	-	false
textarea-action-enabled (22)	Booleano	-	false
textarea-auto-focus	Booleano	-	true
user-tags-enabled	Booleano	-	true
emojis-suggestion-enabled	Booleano	-	true
media-preview-enabled	Booleano	-	true
responsive-breakpoint (23)	Número	-	900
single-room (24)	Booleano	-	false
scroll-distance (25)	Número	-	60
theme (26)	light / dark	-	light
accepted-files (27)	Cadena	-	*
capture-files (28)	Cadena	-	''
multiple-files (29)	Booleano	-	true
styles (30)	[Cadena, objeto]	-	(26)
show-audio (31)	Booleano	-	true
emoji-data-source	Cadena	-	https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json

(1) Se requiere current-user-id para mostrar las acciones de UI y activar las acciones de acuerdo con el usuario utilizando el chat (ex: posición de mensajes a la derecha, etc.)

(2) loading-rooms se pueden usar para mostrar/ocultar un icono de spinner mientras las habitaciones se están cargando

(3) rooms-loaded deben establecerse en true cuando todas las habitaciones se hayan cargado. Lo que significa que el usuario no puede desplazarse para cargar más habitaciones paginadas

(4) room-id se puede usar para cargar una habitación específica en cualquier momento

(5) Se puede utilizar load-first-room para eliminar el comportamiento predeterminado de abrir la primera habitación en la inicialización

(6) custom-search-room-enabled se puede usar para usar el evento de la sala de búsqueda para llamar a su propio método para filtrar habitaciones

(7) room-message se puede usar para agregar un valor de textura predeterminado

(8) username-options se pueden usar para mostrar/ocultar mensajes de habitación Nombre de usuario de acuerdo con el número mínimo de usuarios minUsers dentro de una habitación, y si el mensaje es el usuario currentUser del usuario actual de usuario

(9) messages-loaded deben establecerse en true cuando se hayan cargado todos los mensajes de una conversación. Lo que significa que el usuario no puede desplazarse en la parte superior para cargar más mensajes paginados

(10) Se pueden usar room-actions para mostrar sus propios botones al hacer clic en el icono desplegable de cada habitación dentro de la lista de habitaciones.
Luego puede usar el evento de manejo de acciones habituales para llamar a su propia acción después de hacer clic en un botón. Ex:

 room - actions = "[
  {
    name : 'archiveRoom' ,
    title : 'Archive Room'
  }
] "

(11) menu-actions se pueden usar para mostrar sus propios botones al hacer clic en el icono de puntos verticales dentro de una habitación.
Luego puede usar el evento de menú-acción-manejador para llamar a su propia acción después de hacer clic en un botón. Ex:

 menu - actions = "[
  {
    name : 'inviteUser' ,
    title : 'Invite User'
  } ,
  {
    name : 'removeUser' ,
    title : 'Remove User'
  } ,
  {
    name : 'deleteRoom' ,
    title : 'Delete Room'
  }
] "

(12) message-actions se pueden usar para mostrar sus propios botones al hacer clic en el icono desplegable dentro de un mensaje.
Luego puede usar el evento de mensajes-acción-manejador para llamar a su propia acción después de hacer clic en un botón. Ex:

 message - actions = "[
  {
    name : 'addMessageToFavorite' ,
    title : 'Add To Favorite'
  } ,
  {
    name : 'shareMessage' ,
    title : 'Share Message'
  }
] "

Puede usar los nombres incorporados de message-actions para activar modificaciones específicas de la interfaz de usuario cuando se haga clic.
Actualmente, los nombres de acción replyMessage , editMessage y deleteMessage están disponibles.
Si messageActions no está configurado, usará los valores predeterminados a continuación.
Si no desea mostrar este menú messageActions , puede pasar una matriz vacía.

 messageActions = "[
  {
    name : 'replyMessage' ,
    title : 'Reply'
  } ,
  {
    name : 'editMessage' ,
    title : 'Edit Message' ,
    onlyMe : true
  } ,
  {
    name : 'deleteMessage' ,
    title : 'Delete Message' ,
    onlyMe : true
  } ,
  {
    name : 'selectMessages' ,
    title : 'Select'
  }
] "

(13) message-selection-actions están relacionadas con la acción de mensaje selectMessages anterior. Puede usarlo para mostrar botones de acción personalizados en el encabezado de la habitación al seleccionar un mensaje. Ex:

 messageActions="[
  {
    name: 'deleteMessages',
    title: 'Delete'
  },
  {
    name: 'forwardMessages',
    title: 'Forward'
  }
]"

(14) templates-text se pueden usar para agregar el texto de plantillas de autocompletar al escribir / en la habitación TextARea. Ex:

 templatesText = "[
  {
    tag : 'help' ,
    text : 'This is the help'
  } ,
  {
    tag : 'action' ,
    text : 'This is the action'
  }
] "

(15) auto-scroll se puede usar para cambiar el comportamiento de desplazamiento automático al enviar/recibir un mensaje. Ex:

 auto - scroll = "{
  send : {
    new : true , // will scroll down after sending a message
    newAfterScrollUp : false // will not scroll down after sending a message when scrolled up
  } ,
  receive : {
    new : false , // will not scroll down when receiving a message
    newAfterScrollUp : true // will scroll down when receiving a message when scrolled up
  }
} "

(16) show-new-messages-divider se puede usar para mostrar/ocultar el divisor de la línea azul entre mensajes vistos e invisibles.

(17) Se puede usar show-footer para ocultar el pie de página de la habitación. Por ejemplo, para evitar que los usuarios envíen cualquier mensaje o medio.

(18) text-messages se pueden usar para reemplazar los textos I18N predeterminados. Ex:

 text - messages = "{
  ROOMS_EMPTY : 'Aucune conversation' ,
  ROOM_EMPTY : 'Aucune conversation sélectionnée' ,
  NEW_MESSAGES : 'Nouveaux messages' ,
  MESSAGE_DELETED : 'Ce message a été supprimé' ,
  MESSAGES_EMPTY : 'Aucun message' ,
  CONVERSATION_STARTED : 'La conversation a commencée le :' ,
  TYPE_MESSAGE : 'Tapez votre message' ,
  SEARCH : 'Rechercher' ,
  IS_ONLINE : 'est en ligne' ,
  LAST_SEEN : 'dernière connexion ' ,
  IS_TYPING : 'est en train de taper...' ,
  CANCEL_SELECT_MESSAGE : 'Annuler Sélection'
} "

(19) Se puede usar text-formatting para agregar formateo de texto. Actualmente, el formato de código en negrita, cursiva, de Strikethrough, subrayado, en línea y de código multilínea está disponible y se puede usar en conjunción.

• Puede deshabilitar el formato de texto pasando el Prop :text-formatting="{disabled: true}" .
• Puede cambiar los caracteres de Markdown, por ejemplo :: :text-formatting="{italic: '^'}"
• Puede deshabilitar un carácter de Markdown específico, por ejemplo :: :text-formatting="{bold: null}"

Estilo	Sintaxis	Ejemplo	Producción
Atrevido	* *	*This is bold text*	Este es texto audaz
Itálico	_ _	_This text is italicized_	Este texto está en cursiva
Fusible	~ ~	~This was mistaken text~	Este era un texto equivocado
Subrayar	° °	°This text is underlined°	Este texto está subrayado
Formato anidado	* * y _ _	*This text is _extremely_ important*	Este texto es extremadamente importante

Código en línea

Ejemplo: `Este es un código en línea`

Salida: This is inline code

Código multilínea

Ejemplo: `` `Este es un código multiline```

Producción:

This is
multiline code

(20) link-options se pueden usar para deshabilitar los enlaces de URL en los mensajes o cambiar el objetivo de URLS. Ex:

: link - options = "{ disabled: true, target: '_self', rel: null }"

(21) Se puede usar room-info-enabled para activar un evento después de hacer clic en el componente del encabezado de la habitación.
Luego puede usar el evento Room-Info para llamar a su propia acción después de hacer clic en el encabezado.

(22) Se puede usar textarea-action-enabled para agregar un icono adicional a la derecha de TextAREA
Luego puede usar el evento TextAREA-Action-Handler para llamar a su propia acción después de hacer clic en el icono.

(23) Se puede usar responsive-breakpoint para colapsar la lista de habitaciones a la izquierda cuando el tamaño de la visión va por debajo del ancho especificado.

(24) Se puede usar single-room si nunca desea mostrar la lista de habitaciones a la izquierda. Todavía necesita pasar el accesorio de rooms como una matriz con un solo elemento.

(25) scroll-distance se puede usar para cambiar el número de píxeles antes de que el evento fetchMessages se active cuando se despliega para cargar más mensajes, o el evento fetchMoreRooms se activa al desplazarse hacia abajo para cargar más habitaciones.

(26) theme se puede usar para cambiar el tema del chat. Actualmente, solo están disponibles light and dark .

(27) accepted-files se pueden usar para establecer los tipos de archivos especiales permitidos en el chat. Por defecto, se permiten todos los tipos de archivos: "*" .

Ejemplo: Establecer accepted-files="image/png, image/jpeg, application/pdf" para permitir los archivos JPG PNG y PDF solamente

(28) capture-files se pueden usar para habilitar la captura directa de fotos y videos en navegadores móviles, en lugar de cargar fotos y videos existentes que ya están en el dispositivo. Vea aquí para obtener más información y valores reconocidos. Por defecto, se omite el atributo y los navegadores móviles solo ofrecerán la galería para elegir fotos y videos. Nota: Esto solo afecta los archivos adjuntos de archivos. Los mensajes de audio siempre se registran utilizando el micrófono del dispositivo.

(29) Se pueden usar multiple-files para definir si se aceptarán múltiples selecciones de archivos. Por defecto, esto es cierto.

(30) styles se pueden usar para personalizar su propio tema. Puedes encontrar la lista completa aquí

(31) show-audio se puede usar para habilitar o deshabilitar el icono de audio

styles = "{
  general : {
    color : '#0a0a0a' ,
    colorSpinner : '#333' ,
    borderStyle : '1px solid #e1e4e8'
  } ,

  footer : {
    background : '#f8f9fa' ,
    backgroundReply : 'rgba(0, 0, 0, 0.08)'
  } ,

  icons : {
    search: '#9ca6af'
  }
} "

Estructura de datos de accesorios

Sus accesorios deben seguir una estructura específica para mostrar salas y mensajes correctamente:

Accesorio de habitaciones

 rooms = "[
  {
    roomId : '1' ,
    roomName : 'Room 1' ,
    avatar : 'assets/imgs/people.png' ,
    unreadCount : 4 ,
    index : 3 ,
    lastMessage : {
      _id : 'xyz' ,
      content : 'Last message received' ,
      senderId : '1234' ,
      username : 'John Doe' ,
      timestamp : '10:20' ,
      saved : true ,
      distributed : false ,
      seen : false ,
      new : true
    } ,
    users : [
      {
        _id : '1234' ,
        username : 'John Doe' ,
        avatar : 'assets/imgs/doe.png' ,
        status : {
          state : 'online' ,
          lastChanged : 'today, 14:30'
        }
      } ,
      {
        _id : '4321' ,
        username : 'John Snow' ,
        avatar : 'assets/imgs/snow.png' ,
        status : {
          state : 'offline' ,
          lastChanged : '14 July, 20:00'
        }
      }
    ] ,
    typingUsers : [ 4321 ]
  }
] "

• Si agrega la propiedad index , sus habitaciones se ordenarán utilizando este valor. index puede ser cualquier valor clasable, como una string , datetime , timestamp , etc.

• Para cada usuario de la habitación, puede agregar la propiedad status , que puede contener el state y las propiedades lastChanged :

  • state puede estar 'online' o 'offline'
  • lastChanged es la fecha en que state se modificó por última vez.

• typingUsers es una variedad de todos los usuarios que actualmente están escribiendo un mensaje

Propiedad de mensajes

Los objetos de mensaje se representan de manera diferente dependiendo de su tipo. Se admiten texto, emoji, imagen, video y tipos de archivos.

Cada objeto de mensaje tiene un campo senderId que contiene la ID del agente correspondiente. Si senderId coincide con el Proporro currentUserId , se implementarán UI y acciones específicas.

Notas:

• username se mostrará en cada mensaje de los agentes correspondientes si al menos 3 usuarios están en la habitación
• system se utiliza para mostrar mensajes con una pantalla centrada específica
• indexId se puede usar si necesita cambiar una ID de mensaje que ya se muestra en una habitación, lo que impide una falla de animación. Por ejemplo, cuando no sabe de antemano el ID de mensaje que creará su backend.

El mensaje establece:

• saved: true marca de verificación
• distributed: true dos marcas de verificación
• seen: true dos marcas de verificación azul
• deleted: true con texto de mensaje eliminado
• failure: true en rojo rojo

 messages = "[
  {
    _id : '7890' ,
    indexId : 12092 ,
    content : 'Message 1' ,
    senderId : '1234' ,
    username : 'John Doe' ,
    avatar : 'assets/imgs/doe.png' ,
    date : '13 November' ,
    timestamp : '10:20' ,
    system : false ,
    saved : true ,
    distributed : true ,
    seen : true ,
    deleted : false ,
    failure : true ,
    disableActions : false ,
    disableReactions : false ,
    files : [
      {
        name : 'My File' ,
        size : 67351 ,
        type : 'png' ,
        audio : true ,
        duration : 14.4 ,
        url : 'https://firebasestorage.googleapis.com/...' ,
        preview : 'data:image/png;base64,iVBORw0KGgoAA...' ,
        progress : 88
      }
    ] ,
    reactions : {
      ? : [
        '1234' , // USER_ID
        '4321'
      ] ,
      ? : [
        '1234'
      ]
    } ,
    replyMessage : {
      content : 'Reply Message' ,
      senderId : '4321' ,
      files : [
        {
          name : 'My Replied File' ,
          size : 67351 ,
          type : 'png' ,
          audio : true ,
          duration : 14.4 ,
          url : 'https://firebasestorage.googleapis.com/...' ,
          preview : 'data:image/png;base64,iVBORw0KGgoAA...'
        }
      ]
    } ,
  }
] "

API de eventos

Evento	Parámetros	Dispara cuando un usuario
fetch-messages (1)	{ room, options }	Desplazado en la parte superior para cargar más mensajes
fetch-more-rooms (2)	-	Desplazado para cargar más habitaciones
send-message	{ roomId, content, files(11), replyMessage(12), usersTag }	Envió un mensaje
edit-message	{ roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag }	Editado un mensaje
delete-message	{ roomId, message }	Eliminó un mensaje
open-file	{ message, file }	Haga clic para ver o descargar un archivo
open-user-tag (3)	{ user }	Haga clic en una etiqueta de usuario dentro de un mensaje
open-failed-message	{ roomId, message }	Haga clic en el icono de falla junto a un mensaje
add-room	-	Haga clic en el icono más al lado de Searchbar
search-room (4)	{ roomId, value }	Escribió un personaje en la entrada de búsqueda de habitaciones
room-action-handler (5)	{ roomId, action }	Haga clic en el icono de puntos verticales dentro de una habitación
menu-action-handler (6)	{ roomId, action }	Haga clic en el icono de puntos verticales dentro de una habitación
message-action-handler (7)	{ roomId, action, message }	Haga clic en el icono desplegable dentro de un mensaje
message-selection-action-handler (8)	{ roomId, action, messages }	Haga clic en el botón Seleccionar dentro de un mensaje
send-message-reaction	{ roomId, messageId, reaction, remove }	Haga clic en el icono de emoji dentro de un mensaje
room-info (9)	room	Haga clic en la barra de encabezado de la habitación
toggle-rooms-list	{ opened }	Haga clic en el icono de palanca dentro de un encabezado de la habitación
textarea-action-handler (10)	{ roomId, message }	Haga clic en el icono personalizado dentro del pie de página
typing-message	{ roomId, message }	Empecé a escribir un mensaje

(1) fetch-messages se activa cada vez que se abre una habitación. Si la habitación se abre por primera vez, el parámetro options se mantendrá reset: true .
(1) fetch-messages deben ser un método que implementa un sistema de paginación. Su propósito es cargar mensajes más antiguos de una conversación cuando el usuario se desplaza en la parte superior.

(2) fetch-more-rooms se activa al desplazarse hacia abajo en la lista de habitaciones, y debe ser un método que implementa un sistema de paginación.

(3) open-user-tag se activa al hacer clic en una etiqueta de usuario dentro de un mensaje. Al crear una etiqueta de usuario escribiendo @ en el pie de página TextARea y enviando el mensaje, la etiqueta se identificará con el siguiente patrón:

 < usertag > TAGGED_USER_ID </ usertag >

Esto hará que la etiqueta se pueda hacer clic dentro de un mensaje. Ej: contenido de la etiqueta de mensaje
send-message y edit-message manejarán ese patrón para usted y lo pasarán en el parámetro content .

(4) room-action-handler es el resultado del accesorio room-actions .
Al hacer clic en un botón desde su matriz room-actions , room-action-handler le dará el nombre del botón que fue clic. Entonces puedes hacer lo que quieras con él. Ex:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'archiveRoom' :
      // call a method to archive the room
  }
}

(5) menu-action-handler es el resultado del menu-actions .
Al hacer clic en un botón desde su matriz de menu-actions , menu-action-handler le dará el nombre del botón que era hacer clic. Entonces puedes hacer lo que quieras con él. Ex:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'inviteUser' :
      // call a method to invite a user to the room
    case 'removeUser' :
      // call a method to remove a user from the room
    case 'deleteRoom' :
      // call a method to delete the room
  }
}

(6) search-room se puede habilitar mediante el uso de PROP custom-search-room-enabled . Esto le permitirá llamar a su propio método para filtrar las habitaciones buscadas.

(7) message-action-handler es el resultado del message-actions .
Al hacer clic en un botón de su matriz message-actions , message-action-handler le dará el nombre del botón que fue clic y los datos de mensajes correspondientes. Entonces puedes hacer lo que quieras con él. Ex:

 messageActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'addMessageToFavorite' :
      // call a method to add a message to the favorite list
    case 'shareMessage' :
      // call a method to share the message with another user
  }
}

(8) message-selection-actions message-selection-action-handler es el resultado del Prop.
Al hacer clic en un botón de su matriz message-selection-actions , message-selection-action-handler le dará el nombre del botón que fue clic y los datos de mensajes seleccionados correspondientes. Entonces puedes hacer lo que quieras con él. Ex:

 messageSelectionActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'deleteMessages' :
      // call a method to delete selected messaged
    case 'shareMessage' :
      // call a method to share selected messaged with another user
  }
}

(9) room-info es el resultado del accesorio room-info-enabled .

(10) textarea-action-handler es el resultado del textarea-action-enabled .

(11) Matriz de archivos donde cada archivo contiene: { blob, localUrl, name, size, type, extension }

(12) El objeto replyMessage está disponible cuando el usuario respondió a otro mensaje haciendo clic en el icono correspondiente y contiene la información del mensaje que se hizo clic.

Slots con nombre

Ejemplo:

 < vue-advanced-chat >
  < div slot = "room-header" >
    This is a new room header
  </ div >

  < div v-for = "message in messages" : slot = "'message_' + message._id" >
    < div v-if = "message.system" >
      System message: { { message . content } }
    </ div >
    < div v-else >
      Normal message: { { message . content } }
    </ div >
  </ div >

  < div v-for = "message in messages" : slot = "'message-avatar_' + message._id" >
    New Avatar
  </ div >
</ vue-advanced-chat >

Ranura	Acción
custom-action-icon	Agregue un icono personalizado dentro del pie de página
rooms-header	Agregue una plantilla en la parte superior de la lista de habitaciones (por encima de la barra de búsqueda)
room-list-item_{{ROOM_ID}}	Reemplace la plantilla de los elementos de la lista de habitaciones
room-list-info_{{ROOM_ID}}	Reemplace la información de los elementos de la lista de habitaciones
room-list-avatar_{{ROOM_ID}}	Reemplace el avatar de elementos de la lista de habitaciones
room-list-options_{{ROOM_ID}}	Reemplace la plantilla de las opciones de sala de lista
room-list-options-icon_{{ROOM_ID}}	Reemplace el icono desplegable de opciones de la lista de habitaciones
rooms-header	Reemplace el contenido por encima de la barra de búsqueda
rooms-list-search	Reemplace la barra de búsqueda
room-header	Reemplace la plantilla del encabezado de la habitación
room-header-avatar	Reemplace la plantilla del avatar del encabezado de la habitación
room-header-info	Reemplace la plantilla del texto del encabezado de la habitación
room-options	Reemplace la plantilla de las opciones de habitación
message_{{MESSAGE_ID}}	Reemplace la plantilla del cuadro de mensaje (y mensaje del sistema)
message-avatar_{{MESSAGE_ID}}	Reemplace la plantilla del avatar de mensaje
message-failure_{{MESSAGE_ID}}	Reemplace el icono de falla del mensaje
messages-empty	Reemplace la plantilla de mensaje vacío
rooms-empty	Reemplace la plantilla de habitaciones vacías
no-room-selected	Reemplace la plantilla sin habitación seleccionada
menu-icon	Reemplace el icono del menú de la habitación
toggle-icon	Reemplace el icono de la lista de habitaciones de alternar
spinner-icon-rooms	Reemplace el ícono de la ruleta de carga en la lista de habitaciones
spinner-icon-infinite-rooms	Reemplace el ícono de la ruleta de carga para cargar más habitaciones
spinner-icon-messages	Reemplace el ícono de la ruleta de carga en una habitación
spinner-icon-infinite-messages	Reemplace el ícono de la hiladora de carga para cargar más mensajes
spinner-icon-room-file	Reemplace el ícono de la hiladora de carga para cargar archivos pesados
spinner-icon-message-file_{{MESSAGE_ID}}	Reemplace el icono Spinner de carga en un mensaje que contiene una imagen
scroll-icon	Reemplace el desplazamiento al icono de mensaje más nuevo
reply-close-icon	Reemplace el icono de respuesta de respuesta
image-close-icon	Reemplace el icono de cierre de la imagen
file-icon	Reemplace el icono del archivo
files-close-icon	Reemplace el icono de cierre del archivo
edit-close-icon	Reemplace el icono Editar Cerrar
preview-close-icon	Reemplace el icono de cierre de la vista previa de los medios
emoji-picker-icon	Reemplace el icono de selección emoji
emoji-picker-reaction-icon_{{MESSAGE_ID}}	Reemplace el icono de reacción de Emoji Picker (en el cuadro de mensaje)
paperclip-icon	Reemplace el icono de PaperClip
send-icon	Reemplace el icono de envío del mensaje
eye-icon_{{MESSAGE_ID}}	Reemplace el icono del ojo (mensaje de imagen)
document-icon_{{MESSAGE_ID}}	Reemplace el icono del documento
pencil-icon_{{MESSAGE_ID}}	Reemplace el icono del lápiz
checkmark-icon_{{MESSAGE_ID}}	Reemplace el icono de marca de verificación de un mensaje
checkmark-icon_{{ROOM_ID}}	Reemplace el icono de marca de verificación de un mensaje desde la lista de habitaciones
deleted-icon_{{MESSAGE_ID}}	Reemplace el icono eliminado de un mensaje
deleted-icon_{{ROOM_ID}}	Reemplace el icono eliminado de un mensaje desde la lista de habitaciones
microphone-icon_{{ROOM_ID}}	Reemplace el icono del micrófono
dropdown-icon_{{MESSAGE_ID}}	Reemplace el icono desplegable
search-icon	Reemplace el icono de búsqueda
add-icon	Reemplace el icono Agregar habitación
audio-stop-icon	Reemplace el icono de parada de la grabadora de audio
audio-check-icon	Reemplace el icono de confirmación del registrador de audio
audio-pause-icon_{{MESSAGE_ID}}	Reemplace el icono de pausa de audio de mensaje
audio-play-icon_{{MESSAGE_ID}}	Reemplace el icono de reproducción de audio del mensaje

Usando con Firestore

Código fuente

Puede encontrar el código fuente para implementar una aplicación de chat completa con Firebase/Firestore dentro de la carpeta demo .
Para probarlo usando su propio proyecto Firebase:

• Configurar la nube Firestore (para almacenar usuarios y habitaciones) y la base de datos en tiempo real (para almacenar el estado de los usuarios en línea)
• Clone Este repositorio: git clone https://github.com/advanced-chat/vue-advanced-chat.git
• Archivo Inside demo/src/database/index.js , reemplace la línea const config = ... por su propia configuración de Firebase
• Entrar en la carpeta demo y ejecutar npm run serve

Estructura de datos

Si decide usar el mismo código que en la carpeta demo para crear su aplicación de chat, debe tener una estructura de datos de Firestore específica.
Para ayudarlo a comenzar, agregué demo/src/App.vue A Method addData para inicializar algunos datos en su base de datos Firestore.

Recopilación de usuarios

users: {
  USER_ID_1 : {
    _id : '1' ,
    username : 'User 1'
  } ,
  USER_ID_2 : {
    _id : '2' ,
    username : 'User 2'
  } ,
  USER_ID_3 : {
    _id : '3' ,
    username : 'User 2'
  }
} 

Colección de habitaciones

chatRooms: {
  ROOM_ID_1 : {
    users : [ '1' , '3' ]
  } ,
  ROOM_ID_2 : {
    users : [ '1' , '2' , '3' ]
  }
} 

Colección de mensajes dentro de un documento de habitación

messages: {
  MESSAGE_ID_1 : {
    content : 'My first message to <usertag>John</usertag>' ,
    senderId : '2' ,
    timestamp : 'December 11, 2019 at 4:00:00 PM' ,
    seen : true
  }
} 

Notas

• Debe crear un índice compuesto a las habitaciones de pedido mediante el último mensaje recibido. La forma más fácil de hacerlo es crear una habitación, luego hacer clic en la URL del mensaje de error en la consola de depuración del navegador.

Que contribuye

Tu ayuda siempre es apreciada

Licencia

Este proyecto tiene licencia bajo la licencia MIT