Ce document détaille l'utilisation de l'API Microsoft Direct Line dans une application native React, en utilisant JavaScript, Axios et WebSocket pour la communication avec un bot d'agent de copilote.

Pré-requis

Avant de continuer, assurez-vous que les éléments suivants sont en place:

1. Secret de ligne directe: Obtenez le secret de ligne directe à partir du bot de chat Coilot.

2. React Native Development Environment: Configurez un projet React Native React.

3. Axios Library installée: Ajouter Axios à vos dépendances de projet à l'aide de NPM Install Axios ou Yarn Ajouter Axios.

4. Assistance WebSocket: Assurez-vous que l'API WebSocket est compatible avec votre environnement d'application.

5. Connaissances de base: Familiarité avec JavaScript, React Native et Resful API.

Table des matières

1. Authentification

2. Génération de jetons

3. rafraîchissant le jeton

4. Démarrage de la conversation

5. reconnecter la conversation

6. Envoi de l'activité au bot

7. recevant l'activité du bot

8. terminant la conversation

9. surveillance de l'état de connexion et reconnection

10. références

1. Authentification

L'API de ligne directe nécessite un secret pour s'authentifier. Obtenez le secret du portail de service Azure Bot.

2. Génération de jeton

Les jetons sont générés en utilisant le secret pour initier une communication sécurisée.

Exemple de code:

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. Rafraîchir le jeton

Les jetons ont une durée de vie limitée. Actualisez-les avant d'expirer.

Exemple de code:

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. Début la conversation

initier une conversation avec le bot en utilisant le jeton.

Exemple de code:

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. reconnecter la conversation

Si la connexion est perdue, vous pouvez reconnecter à l'aide du ConversationId et WebSocket.

Exemple de code:

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. Envoi d'activité au bot

Envoyer des messages ou des activités utilisateur au bot.

Exemple de code:

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. Recevoir l'activité du bot

Utilisez WebSocket pour écouter les réponses de bot en temps réel.

Exemple de code:

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. Mettre fin à la conversation

terminez explicitement une conversation en cessant de communication.

Remarque: L'API de ligne directe ne nécessite pas un appel API explicite pour "mettre fin" une conversation.

9. Surveillance et reconnexion de l'état de la connexion

Surveillance de l'état WebSocket, et se replient à son interrogation si elle est déconnectée.

Exemple de code:

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. Références

• Documentation de l'API Microsoft Direct Line
• API WebSocket
• documentation axios
• Réagir la documentation native

Conclusion

Ce document fournit un guide complet pour intégrer l'API de ligne directe dans une application native React à l'aide d'Axios et WebSocket. Suivez les étapes décrites pour authentifier, gérer les conversations et gérer la communication de manière fiable avec un bot d'agent de copilote.