Este documento detalla el uso de la API de línea directa de Microsoft en una aplicación react nativa, usando JavaScript, Axios y WebSocket para comunicación con un agente de copilot.

Requisitos previos

Antes de continuar, asegúrese de que lo siguiente esté en su lugar:

1. Secreto de línea directa: Obtenga el secreto de la línea directa del bot Bot de chat de coilot.

2. React Native Development Entorno: Configure un proyecto nativo de React Working.

3. Biblioteca Axios Instalada: Agregue Axios a las dependencias de su proyecto usando NPM Instalar Axios o Yarn Agregar Axios.

4. Soporte de WebSocket: Asegúrese de que la API de WebSocket sea compatible con el entorno de su aplicación.

5. Conocimiento básico: Familiaridad con JavaScript, React Native y RESTFUL APIS.

Tabla de contenido

1. Autenticación

2. generando token

3. refrescante el token

4. iniciando la conversación

5. reconectando la conversación

6. enviando actividad al bot

7. Recibir actividad del bot

8. finalizando la conversación

9. Monitoreo de estado de conexión y reconexión

10. referencias

1. Autenticación

La API de línea directa requiere un secreto para autenticar. Obtenga el secreto del portal de servicio Azure Bot.

2. Token generador

Los tokens se generan utilizando el secreto para iniciar una comunicación segura.

Ejemplo 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 la token

Los tokens tienen una vida útil limitada. Actualizarlos antes de que expiren.

Ejemplo 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. Comenzando la conversación

inicie una conversación con el bot usando el token.

Ejemplo 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 la conversación

Si la conexión se pierde, puede volver a conectar usando ConversationId y WebSocket.

Ejemplo de código:

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. Enviar actividad al bot

Enviar mensajes o actividades de usuario al bot.

Ejemplo de código:

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

7. Recibir actividad del bot

use WebSocket para escuchar las respuestas BOT en tiempo real.

Ejemplo de código:

const connectWebSocket = (streamUrl, onMessage) => {
    const socket = new WebSocket(streamUrl);

    socket.onopen = () => {
        console.log('WebSocket connection established.');
    };

    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log('Message received:', data);
        onMessage(data.activities);
    };

    socket.onerror = (error) => {
        console.error('WebSocket error:', error);
    };

    socket.onclose = (event) => {
        console.warn('WebSocket connection closed:', event);
    };

    return socket;
};

8. Terminando la conversación

termine explícitamente una conversación dejando de comunicación.

Nota: La API de línea directa no requiere una llamada API explícita para "finalizar" una conversación.

9. Monitoreo y reconexión del estado de conexión

monitorear el estado de WebSocket y el retroceso a las encuestas si se desconecta.

Ejemplo de código:

const monitorConnection = (socket, fallbackToPolling) => {
    socket.onclose = () => {
        console.warn('WebSocket connection closed. Falling back to polling.');
        fallbackToPolling();
    };
};

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

10. Referencias

• Microsoft Direct Line API Documentation
• WebSocket API
• Axios Documation
• reaccionar documentación nativa

Conclusión

Este documento proporciona una guía completa para integrar la API de línea directa en una aplicación nativa React usando Axios y WebSocket. Siga los pasos descritos para autenticar, administrar conversaciones y manejar la comunicación de manera confiable con un bot de agente de copiloto.