Este documento detalha o uso da API da Microsoft Direct Line em um aplicativo nativo do React, usando JavaScript, Axios e WebSocket para comunicação com um copilot agente bot.

---

Pré-requisitos

Antes de prosseguir, verifique se os seguintes estão no lugar:

1. Linha direta Secret: Obtenha o segredo da linha direta do Bot Bot.

2. React Ambiente de Desenvolvimento Nativo: Configure um projeto nativo de reação funcional.

3. Biblioteca AXIOS Instalada: Adicionar axios às dependências do seu projeto usando o npm install axios ou fio add axios.

4. Suporte do WebSocket: Verifique se a API do WebSocket é compatível com o seu ambiente de aplicativo.

5. Conhecimento Básico: Familiaridade com JavaScript, React Native e Restful Apis.

---

Índice

1. Autenticação

2. Gerando token

3. refrescando o token

4. Iniciando a conversa

5. reconectando a conversa

6. enviando atividade para o bot

7. recebendo atividade do bot

8. encerrando a conversa

9. Monitoramento de status da conexão e reconexão

10. referências

---

1. Autenticação

API de linha direta requer um segredo para autenticar. Obtenha o segredo do portal do serviço do Azure Bot.

---

2. Gerando token

Os tokens são gerados usando o segredo para iniciar a comunicação segura.

Exemplo de código:

import axios from 'axios';

const generateToken = async (secret) => {
    const url = 'https://directline.botframework.com/v3/directline/tokens/generate';
    try {
        const response = await axios.post(url, {}, {
            headers: {
                Authorization: `Bearer ${secret}`,
            },
        });
        return response.data.token;
    } catch (error) {
        console.error('Error generating token:', error);
        throw error;
    }
};

---

3. refrescando o token

Tokens têm uma vida útil limitada. Atualize -os antes de expirarem.

Exemplo de código:

const refreshToken = async (token) => {
    const url = 'https://directline.botframework.com/v3/directline/tokens/refresh';
    try {
        const response = await axios.post(url, {}, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data.token;
    } catch (error) {
        console.error('Error refreshing token:', error);
        throw error;
    }
};

---

4. Começando a conversa

inicie uma conversa com o bot usando o token.

Exemplo de código:

const startConversation = async (token) => {
    const url = 'https://directline.botframework.com/v3/directline/conversations';
    try {
        const response = await axios.post(url, {}, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error starting conversation:', error);
        throw error;
    }
};

---

5. Reconectando a conversa

;

Exemplo de código:

const reconectConversation = Async (conversionID, token) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversation}? Watermark = 0`; tentar { const Response = aguarda axios.get (url, { Cabeçalhos: { Autorização: `Portador $ {token}`, }, }); resposta de retorno.data; } catch (erro) { console.error ('Erro reconectando a conversa:', erro); erro de lança; } };

const reconnectConversation = async (conversationId, token) => {
    const url = `https://directline.botframework.com/v3/directline/conversations/${conversationId}?watermark=0`;
    try {
        const response = await axios.get(url, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error reconnecting conversation:', error);
        throw error;
    }
};

6. Enviando atividade para o bot

---

Envie mensagens ou atividades do usuário para o bot.

Exemplo de código:

const sendActivity = Async (conversão, token, atividade) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversation}/atividades`; tentar { const Response = aguarda axios.post (url, atividade, { Cabeçalhos: { Autorização: `Portador $ {token}`, }, }); resposta de retorno.data; } catch (erro) { console.error ('Erro enviando atividade:', erro); erro de lança; } };

const reconnectConversation = async (conversationId, token) => {
    const url = `https://directline.botframework.com/v3/directline/conversations/${conversationId}?watermark=0`;
    try {
        const response = await axios.get(url, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error reconnecting conversation:', error);
        throw error;
    }
};

7. recebendo atividade do bot

---

use o websocket para ouvir as respostas dos bots em tempo real.

Exemplo de código:

const ConnectWebSocket = (streamurl, onMessage) => { const soket = new websocket (streamurl); Socket.OnoPen = () => { console.log ('WebSocket Connection estabelecido.'); }; Socket.onMessage = (Evento) => { const data = json.parse (event.data); console.log ('mensagem recebida:', dados); onMessage (Data.Activities); }; Socket.onerror = (erro) => { console.error ('Erro do webSocket:', erro); }; Socket.Onclose = (Evento) => { console.warn ('WebSocket Connection fechado:', evento); }; Soquete de retorno; };

const reconnectConversation = async (conversationId, token) => {
    const url = `https://directline.botframework.com/v3/directline/conversations/${conversationId}?watermark=0`;
    try {
        const response = await axios.get(url, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error reconnecting conversation:', error);
        throw error;
    }
};

8. Terminando a conversa

---

encerrar explicitamente uma conversa interrompendo a comunicação.

NOTA: A API de linha direta não requer uma chamada de API explícita para "terminar" uma conversa.

9. Monitoramento e reconexão do status da conexão

---

monitore o status da websocket e fallback da pesquisa se desconectada.

Exemplo de código:

const MonitorConnection = (soquete, Fallbacktopolling) => { Socket.Onclose = () => { console.warn ('WebSocket Connection fechado. Voltando à pesquisa'); Fallbacktopolling (); }; }; const PollForActivities = Async (conversionID, token) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversation}/atividades`; tentar { const Response = aguarda axios.get (url, { Cabeçalhos: { Autorização: `Portador $ {token}`, }, }); REPORTE DE REPORTIÇÃO.DATA.ACTIVIDIDIDADES; } catch (erro) { console.error ('Pesquisa de erros para atividades:', erro); erro de lança; } };

const reconnectConversation = async (conversationId, token) => {
    const url = `https://directline.botframework.com/v3/directline/conversations/${conversationId}?watermark=0`;
    try {
        const response = await axios.get(url, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error reconnecting conversation:', error);
        throw error;
    }
};

10. Referências

---

Microsoft Direct Line API Documentation

• websocket API
• documentação do axios
• reage documentação nativa
Conclusão

Este documento fornece um guia completo para integrar a API de linha direta em um aplicativo nativo do React usando axios e websocket. Siga as etapas descritas para autenticar, gerenciar conversas e lidar com a comunicação de maneira confiável com um BOT do Copilot Agent.