Partilhar via

Biblioteca de cliente do Azure Communication Chat para JavaScript - versão 1.5.4

  • Artigo

Os Serviços de Comunicação do Azure para Chat permitem que os programadores adicionem capacidades de chat às respetivas aplicações. Use esta biblioteca de cliente para gerenciar threads de bate-papo e seus usuários, além de enviar e receber mensagens de bate-papo.

Leia mais sobre os Serviços de Comunicação do Azure aqui

Primeiros passos

Pré-requisitos

  • Uma subscrição do Azure.
  • Um recurso de Serviços de Comunicação existente. Se precisar criar o recurso, você pode usar odo Portal do Azure, odo Azure PowerShell ou oda CLI do Azure.
  • Node.js

Instalação

npm install @azure/communication-chat

Suporte do navegador

Pacote JavaScript

Para usar essa biblioteca de cliente no navegador, primeiro você precisa usar um bundler. Para obter detalhes sobre como fazer isso, consulte nossa documentação de agregação de . No rollup.config.js, adicione as seguintes exportações de nomes personalizados em cjs plug-in.


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

Conceitos-chave

Uma conversa de bate-papo é representada por um tópico. Cada usuário no tópico é chamado de participante do bate-papo. Os participantes do bate-papo podem conversar uns com os outros em particular em um bate-papo 1:1 ou se amontoar em um bate-papo em grupo 1:N. Os usuários também recebem atualizações quase em tempo real para quando os outros estão digitando e quando leram as mensagens.

ChatClient

ChatClient é a interface principal para desenvolvedores que usam essa biblioteca de cliente. Ele fornece métodos assíncronos para criar e excluir um thread.

ChatThreadClient

ChatThreadClient fornece métodos assíncronos para fazer as operações de mensagem e participantes do bate-papo dentro do thread de chat.

Exemplos

Inicializar o ChatClient

Use a URL do recurso e o token de acesso do usuário para inicializar o 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);

Criar um thread com dois usuários

Use o método createThread para criar um thread de chat.

createChatThreadRequest é usado para descrever a solicitação de thread:

  • Use topic para dar um tópico de tópico;

createChatThreadOptions é usado para definir os parâmetros opcionais para criar o thread:

  • Use participants para listar os participantes do bate-papo a serem adicionados ao tópico;
  • Use idempotencyToken para especificar uma solicitação repetível

createChatThreadResult é o resultado retornado da criação de um thread. Ele contém um chatThread que é o thread que foi criado, bem como uma propriedade errors que conterá informações sobre participantes inválidos se eles não puderem ser adicionados ao thread.

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;

Criar um ChatThreadClient

O ChatThreadClient permitirá que você execute operações específicas para um tópico de bate-papo, como atualizar o tópico do tópico do bate-papo, enviar uma mensagem, adicionar participantes ao tópico do bate-papo, etc.

Você pode inicializar um novo ChatThreadClient usando o método getChatThreadClient do ChatClient com uma ID de thread existente:

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Enviar uma mensagem para o tópico

Use sendMessage método para enviar uma mensagem para um thread identificado por threadId.

sendMessageRequest é usado para descrever a solicitação de mensagem:

  • Use content para fornecer o conteúdo da mensagem de chat;

sendMessageOptions é usado para descrever os parâmetros opcionais de operação:

  • Use senderDisplayName para especificar o nome de exibição do remetente;
  • Use type para especificar o tipo de mensagem, como 'texto' ou 'html';

sendChatMessageResult é o resultado retornado do envio de uma mensagem, ele contém um ID, que é o ID exclusivo da mensagem.

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;

Receber mensagens de um thread

Com sinalização em tempo real, você pode se inscrever para ouvir novas mensagens recebidas e atualizar as mensagens atuais na memória de acordo.


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

Como alternativa, você pode recuperar mensagens de bate-papo pesquisando o método listMessages em intervalos especificados.

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

Adicionar usuários a um thread

Depois que um thread é criado, você pode adicionar e remover usuários desse thread. Ao adicionar usuários, você dá a eles acesso para poder enviar mensagens para o thread. Você precisará começar obtendo um novo token de acesso e identidade para esse usuário. O usuário precisará desse token de acesso para inicializar seu cliente de chat. Mais informações sobre tokens aqui: Autenticar nos Serviços de Comunicação do Azure


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

await chatThreadClient.addParticipants(addParticipantsRequest);

Remover usuários de um thread

Semelhante ao acima, você também pode remover usuários de um thread. Para remover, você precisará rastrear os IDs dos participantes que você adicionou.


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

Subscrever o estado da ligação de notificações em tempo real

A subscrição de eventos realTimeNotificationConnected e realTimeNotificationDisconnected permite-lhe saber quando a ligação ao servidor de chamadas está ativa.


// 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
});

Solução de problemas

Próximos passos

Neste guia de início rápido, você aprendeu como:

  • Criar um cliente de chat
  • Criar um thread com 2 usuários
  • Enviar uma mensagem para o tópico
  • Receber mensagens de um thread
  • Remover usuários de um thread

Contribuição

Se você quiser contribuir para esta biblioteca, leia o guia de contribuição para saber mais sobre como criar e testar o código.