You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Desarrollar con archivos adjuntos de chat

Actualmente estás leyendo documentación de mensajería antigua de Flex. Si estás empezando con una nueva implementación de Flex, considera la posibilidad de utilizar Flex Conversations.

Los archivos adjuntos de chat permiten a los agentes y clientes enviar contenido que no sea de texto, como imágenes, pdf y videos mediante Flex Webchat. Aunque puedes hacer muchas cosas interesantes con archivos adjuntos de chat, tendrás que crear reglas y medidas de seguridad para mantener a los agentes seguros, a los clientes satisfechos y a tu empresa segura. Afortunadamente, los archivos adjuntos de chat se crearon de forma personalizable. En los siguientes ejemplos de código, puedes ver algunas de las estrategias que el equipo de Twilio ha preparado para implementar algunas situaciones comunes.

Hay muchas otras maneras de resolver estos problemas, y tus problemas serán probablemente más complejos que las situaciones que se presentan aquí. Estos ejemplos de código tienen la intención de ser un punto de partida que te ayudará a familiarizarte con algunas de las herramientas que tienes disponibles, así que, sin duda, adáptalos para que se ajusten a tus herramientas y patrones preferidos.

Utilizar Programmable Chat y Flex UI para eliminar mensajes

Cada archivo adjunto de chat está asociado a un mensaje en la API de Programmable Chat. Para eliminar un archivo que enviado, puedes eliminar el mensaje utilizando el método remove proporcionado por el SDK de Programmable Chat.

// Add a delete button. to every MessageListItem

const DeleteMessage = ({ message }) => (
   // message is the default prop passed through by the MessageListItem
   <button type="button" onClick={() => message.source.remove()}>
       delete
   </button>
);

Flex.MessageListItem.Content.add(<DeleteMessage key="delete-message" />, { sortOrder: -1 });

Acciones de sustitución para cargar archivos en el almacenamiento personal

Por defecto, los archivos adjuntos de chat utilizan el recurso multimedia del chat de Twilio para el almacenamiento de archivos. A fin de utilizar tu propio almacenamiento para los datos adjuntos de los mensajes, deberás reemplazar la acción SendMediaMessage, que se activa cuando se envía un archivo multimedia.

Necesitarás seguir estos pasos:

  1. Carga el archivo en nuestro propio almacenamiento privado.
  2. Pasa el identificador único a la acción sendMessage reemplazada en messageAttributes.
  3. Activa una acción sendMessage regular.
// Implement personal storage

const uploadFileToMyStorage = async (file) => {
   const formData = new FormData();
   formData.append("image", file);

   // Upload the file to private storage
   const res = await fetch("https://api.imgur.com/3/image", {
       method: "POST",
       headers: new Headers({
           Authorization: "Client-ID 546c25a59c58ad7"
       }),
       body: formData
   });
   return res.json();
};

// Replace the action
Flex.Actions.replaceAction("SendMediaMessage", async (payload: Flex.ActionPayload) => {
   const { file, messageAttributes, channelSid } = payload;

   // Retrieve the uploaded file location
   const res = await uploadFileToMyStorage(file);

   // Include the new media file when sending the message
   return Flex.Actions.invokeAction("SendMessage", {
       messageAttributes: {
           ...messageAttributes,
           media: {
               url: res.data.link,
               filename: file.name,
               contentType: file.type,
               size: file.size
           }
       },
       body: file.name,
       channelSid
   });
});

// Now you need to render your uploaded file. First, delete the body of the MessageBubble. Then, add a new body, including appropriate HTML that points to your uploaded file (in this example, an image tag is sufficient for rendering the image. Don’t forget your alt text!)

// Create new message bubble content
const PersonalStorageContent = ({ message }) => (
   <div>
       <img src={message.source.attributes.media.url) alt=”file uploaded from custom storage” style={{ width: "100%" }} />
   </div>
);

Flex.MessageBubble.Content.remove("body", {
   if: (props) => !!props.message.source.attributes.media
});

Flex.MessageBubble.Content.add(<PersonalStorageContent key="message-bubble-body" />, {
   if: (props) => !!props.message.source.attributes.media
});

Utilizar los enlaces de acción before para filtrar el contenido y comprobar si hay virus

Dependiendo de tu caso de uso, el filtrado de contenido y la comprobación de virus se pueden realizar de diferentes maneras, pero la mayoría de las implementaciones implicarán los enlaces de acción before. Por ejemplo, puedes utilizarlos para descargar el archivo después de filtrar el contenido o ejecutar el archivo descargado según un conjunto de directrices antes de enviarlo como mensaje.

// Check file content

Flex.Actions.addListener("beforeDownloadMedia", async (payload, cancelAction) => {

   const { message } = payload;

   const url = await message.media.getContentUrl();

   // Validate file before download (note that checkFileContent method needs to be written)

   const result = await checkFileContent(url);

   if (!result.pass) {

       // Failed to validate content of the file

       cancelAction();

   }

});

Flex.Actions.addListener("beforeSendMediaMessage", async (payload, cancelAction) => {
   const { file } = payload;

   // Validate file before sending
   const result = await checkFileContent(file);

   if (!result.pass) {
       // Failed to validate content of the file
       cancelAction();
   }
});

Flex.Actions.addListener("beforeAttachFile", async (payload, cancelAction) => {

   const { file } = payload;

   // Validate file before attaching
   const result = await checkFileContent(file);

   if (!result.pass) {
       // Failed to validate content of the file
       cancelAction();
   }
});

Utilizar Programmable Chat para cambiar los permisos de los usuarios inapropiados

A veces, un usuario de chat puede enviar archivos o mensajes inapropiados y, como agente, es recomendable que bloquees el envío de mensajes o mensajes multimedia a este usuario. Esto se puede hacer con la API REST de chat programable.

Todos los usuarios del chat están asociados con una función y permisos. Para bloquear usuarios, deberás crear una función blockedUser. En función de tus necesidades, elimina los permisos sendMessage o sendMediaMessage de la nueva función

Para bloquear a alguien, puedes actualizar la función de su recurso de miembro con Twilio Functions. Proporciona el nuevo SID de blockedUser como el parámetro roleSid. Consulta la guía sobre el uso de Functions en tu plugin para obtener soporte adicional.

Código de Twilio Functions

exports.handler = function(context, event, callback) {
    // Use context parameter to initialize Twilio client and retrieve stored environment variables
	const twilioClient = context.getTwilioClient();
	const chatServiceSid = context.CHAT_SERVICE_SID; // // Get Chat service sid from https://www.twilio.com/console/chat/dashboard
	const blockedUserSid = context.BLOCKED_USER_SID

    
    // Use the event parameter to retrieve dynamic information, like the current chat channel and the member to blockedUserSid
    const {chatChannelSid, memberSid} = event
    
    console.log(event)
    
    twilioClient.chat.services(chatServiceSid)
       .channels(chatChannelSid)
       .members(memberSid)
       .update({roleSid: blockedUserSid})
       .then(member => callback(null, member.sid))
       .catch(err => callback(err, null))
};

Código de plugin

// Create function to block user
const blockUser = (chatChannelSid, memberSid) => {
    const body = { chatChannelSid, memberSid };

    // Set up the HTTP options for your request
    const options = {
      method: 'POST',
      body: new URLSearchParams(body),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      }
    };

    // Make the network request using the Fetch API
    fetch('https://YOUR_DOMAIN.twil.io/block-user', options)
      .then(resp => resp.json())
      .then(data => console.log(data));
  }
}

// Create a button component to block users
const BlockUserButton = (props) => (
   <button type="button" onClick={() => blockUser(props.channelSid, props.member.source.sid)}>
       block
   </button>
);

// Insert Block User Button into the Flex UI
Flex.MessageBubble.Content.add(<BlockUserButton key="block-user" />, {
   if: (props) => !props.message.isFromMe
});
Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

¡Recomiéndanos y gana USD 10 en 3 pasos sencillos!

Paso 1

Obtén un enlace

Obtén un enlace gratuito de referencia personal aquí

Paso 2

Regala USD 10

Tu usuario se registra y actualiza mediante el enlace

Paso 3

Obtén USD 10

1250 SMS gratuitos
O 1000 minutos gratuitos de voz
O 12 000 chats
O más