Compartir a través de

Biblioteca cliente de Azure Communication Chat para JavaScript: versión 1.5.0

  • Artículo

Azure Communication Services para chat permite a los desarrolladores agregar funcionalidades de chat a su aplicación. Use esta biblioteca cliente para administrar subprocesos de chat y sus usuarios, y enviar y recibir mensajes de chat.

Obtenga más información sobre Azure Communication Services aquí

Introducción

Requisitos previos

Instalación de

npm install @azure/communication-chat

Compatibilidad con exploradores

Paquete de JavaScript

Para usar esta biblioteca cliente en el explorador, primero debe usar un agrupador. Para más información sobre cómo hacerlo, consulte nuestra documentación de agrupación. En rollup.config.js, agregue las siguientes exportaciones de nombres personalizadas en cjs el complemento.


cjs({
  namedExports: {
    events: ["EventEmitter"],
    "@azure/communication-signaling": ["CommunicationSignalingClient", "SignalingClient"],
    "@opentelemetry/api": ["CanonicalCode", "SpanKind", "TraceFlags"]
  }
})

Conceptos clave

Una conversación de chat se representa mediante un subproceso. Cada usuario del subproceso se denomina participante de chat. Los participantes del chat pueden chatear entre sí de forma privada en un chat de 1:1 o en un chat de grupo de 1:N. Los usuarios también obtienen actualizaciones casi en tiempo real para cuando otros escriben y cuando han leído los mensajes.

ChatClient

ChatClient es la interfaz principal para los desarrolladores que usan esta biblioteca cliente. Proporciona métodos asincrónicos para crear y eliminar un subproceso.

ChatThreadClient

ChatThreadClient proporciona métodos asincrónicos para realizar las operaciones de los participantes del mensaje y del chat en el subproceso de chat.

Ejemplos

Inicializar ChatClient

Use la dirección URL de recursos y el token de acceso de usuario para inicializar el cliente de chat.

import { ChatClient } from '@azure/communication-chat';
import { AzureCommunicationTokenCredential } from "@azure/communication-common";

// Your unique Azure Communication service endpoint
const endpointUrl = '<ENDPOINT>';
const userAccessToken = '<USER_ACCESS_TOKEN>';
const tokenCredential = new AzureCommunicationTokenCredential(userAccessToken);
const chatClient = new ChatClient(endpointUrl, tokenCredential);

Creación de un subproceso con dos usuarios

Use el método createThread para crear un subproceso de chat.

createChatThreadRequest se usa para describir la solicitud de subproceso:

  • Use topic para dar un tema de subproceso;

createChatThreadOptions se usa para establecer los parámetros opcionales para crear el subproceso:

  • Use participants para enumerar los participantes del chat que se van a agregar al subproceso;
  • Usar idempotencyToken para especificar una solicitud repetible

createChatThreadResult es el resultado devuelto por la creación de una conversación. Contiene un chatThread que es el subproceso que se creó, así como una errors propiedad que contendrá información sobre los participantes no válidos si no se pudieron agregar al subproceso.

const createChatThreadRequest = {
  topic: "Hello, World!"
};
const createChatThreadOptions = {
  participants: [
    {
      id: { communicationUserId: '<USER_ID>' },
      displayName: '<USER_DISPLAY_NAME>'
    }
  ]
};
const createChatThreadResult = await chatClient.createChatThread(
  createChatThreadRequest,
  createChatThreadOptions
);
const threadId = createChatThreadResult.chatThread.id;

Creación de un chatThreadClient

ChatThreadClient le permitirá realizar operaciones específicas de un subproceso de chat, como actualizar el tema del subproceso de chat, enviar un mensaje, agregar participantes al subproceso de chat, etc.

Puede inicializar un nuevo ChatThreadClient mediante el getChatThreadClient método de ChatClient con un identificador de subproceso existente:

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Envío de un mensaje al subproceso

Utilice el método sendMessage para enviar un mensaje a un subproceso identificado mediante threadId.

sendMessageRequest se utiliza para describir la solicitud del mensaje:

  • Utilice content para proporcionar el contenido del mensaje de chat.

sendMessageOptions se usa para describir los parámetros opcionales de la operación:

  • Utilice senderDisplayName para especificar el nombre para mostrar del remitente.
  • Use type para especificar el tipo de mensaje, como "texto" o "html".

sendChatMessageResult es el resultado devuelto al enviar un mensaje, contiene un identificador, que es el identificador único del mensaje.

const sendMessageRequest =
{
  content: 'Hello Geeta! Can you share the deck for the conference?'
};
const sendMessageOptions:SendMessageOptions = {
  senderDisplayName: "Jack",
  type: "text"
};
const sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
const messageId = sendChatMessageResult.id;

Recepción de mensajes de un subproceso

Con la señalización en tiempo real, puede suscribirse para escuchar nuevos mensajes entrantes y actualizar los mensajes actuales en la memoria en consecuencia.


// open notifications channel
await chatClient.startRealtimeNotifications();
// subscribe to new notification
chatClient.on("chatMessageReceived", (e) => {
  console.log("Notification chatMessageReceived!");
  // your code here
});

También puede recuperar mensajes de chat mediante el sondeo del método listMessages a intervalos especificados.

for await (const chatMessage of chatThreadClient.listMessages()) {
   // your code here
}

Agregar usuarios a un subproceso

Una vez creado un subproceso, puede agregar y quitar usuarios de ese subproceso. Al agregar usuarios, se les concede acceso para poder enviar mensajes al subproceso. Tendrá que empezar obteniendo un nuevo token de acceso e identidad para ese usuario. El usuario necesitará ese token de acceso para poder inicializar su cliente de chat. Más información sobre los tokens aquí: Autenticación en Azure Communication Services


const addParticipantsRequest =
{
  participants: [
    {
      id: { communicationUserId: '<NEW_PARTICIPANT_USER_ID>' },
      displayName: 'Jane'
    }
  ]
};

await chatThreadClient.addParticipants(addParticipantsRequest);

Eliminación de usuarios de un subproceso

De forma similar a la anterior, también puede quitar usuarios de un subproceso. Para eliminar, deberá realizar un seguimiento de los identificadores de los participantes que haya agregado.


await chatThreadClient.removeParticipant({ communicationUserId: '<MEMBER_ID>' });

Suscripción al estado de conexión de las notificaciones en tiempo real

La suscripción a eventos realTimeNotificationConnected y realTimeNotificationDisconnected permite saber cuándo está activa la conexión al servidor de llamadas.


// subscribe to realTimeNotificationConnected event
chatClient.on('realTimeNotificationConnected', () => {
  console.log("Real time notification is now connected!");
  // your code here
});

// subscribe to realTimeNotificationDisconnected event
chatClient.on('realTimeNotificationDisconnected', () => {
  console.log("Real time notification is now disconnected!");
  // your code here
});

Solución de problemas

Pasos siguientes

En este tutorial, ha aprendido a hacer lo siguiente:

  • Creación de un cliente de chat
  • Creación de un subproceso con 2 usuarios
  • Envío de un mensaje al subproceso
  • Recepción de mensajes de un subproceso
  • Eliminación de usuarios de un subproceso

Contribuciones

Si desea contribuir a esta biblioteca, lea la guía de contribución para obtener más información sobre cómo compilar y probar el código.