Compartir a través de

Biblioteca cliente de Chat de Comunicación de Azure para JavaScript: versión 1.5.4

  • 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í

Empezar

Prerrequisitos

  • Una suscripción de Azure .
  • Un recurso de Communication Services existente. Si necesita crear el recurso, puede usar elde Azure Portal de , el azure PowerShello la CLI de Azure .
  • Node.js

Instalar

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 obtener más información sobre cómo hacerlo, consulte nuestra documentación de agrupación de . En rollup.config.js, agregue las siguientes exportaciones de nombres personalizadas en cjs 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 agrupar en un chat de grupo 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 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 al crear un subproceso. Contiene un chatThread que es el subproceso que se creó, así como una propiedad errors 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 objeto 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, etcetera.

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

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Enviar un mensaje al subproceso

Use sendMessage método para enviar un mensaje a un subproceso identificado por threadId.

sendMessageRequest se usa para describir la solicitud de mensaje:

  • Use content para proporcionar el contenido del mensaje de chat;

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

  • Use senderDisplayName para especificar el nombre para mostrar del remitente;
  • Use type para especificar el tipo de mensaje, como "text" 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
});

Como alternativa, puede recuperar mensajes de chat sondeando el 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. Para empezar, obtendrá un nuevo token de acceso e identidad para ese usuario. El usuario necesitará ese token de acceso para 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);

Quitar usuarios de un subproceso

De forma similar a la anterior, también puede quitar usuarios de un subproceso. Para eliminarlo, deberá realizar un seguimiento de los identificadores de los participantes que ha 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 inicio rápido ha aprendido a:

  • Creación de un cliente de chat
  • Creación de un subproceso con 2 usuarios
  • Enviar un mensaje al subproceso
  • Recepción de mensajes de un subproceso
  • Quitar usuarios de un subproceso

Contribuyendo

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