Documentation : Utilisation de l'API Direct Line dans une application native React avec Axios

Ce document détaille l'utilisation de l'API Microsoft Direct Line dans une application React Native, utilisant JavaScript, Axios et WebSocket pour la communication avec un robot agent 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 auprès du chat Bot Coilot.

2. Environnement de développement React Native : Mettre en place un projet React Native fonctionnel.

3. Bibliothèque Axios installée : Ajoutez Axios aux dépendances de votre projet à l'aide de npm install axios ou Yarn Add Axios.

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

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

---

Table des matières

1. Authentification

2. Génération de jeton

3. Actualisation du jeton

4. Démarrer la conversation

5. Reconnecter la conversation

6. Envoi d'activité au bot

7. Réception d'activité du bot

8. Fin de la conversation

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

10. Références

---

1. Authentification

L'API Direct Line nécessite un secret pour s'authentifier. Obtenez le secret sur le portail Azure Bot Service.

---

2. Génération de jetons

Les jetons sont générés à l'aide du 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. Actualisation du jeton

Les jetons ont une durée de vie limitée. Actualisez-les avant leur expiration.

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émarrer la conversation

Initiez une conversation avec le bot à l'aide du 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 vous reconnecter en utilisant le conversationId et le 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 des utilisateurs 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. Réception d'activité du bot

Utilisez WebSocket pour écouter les réponses des robots 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

Mettre explicitement fin à une conversation en cessant la communication.

Remarque : L'API Direct Line ne nécessite pas d'appel d'API explicite pour "mettre fin" à une conversation.

---

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

Surveillez l'état de WebSocket et revenez à l'interrogation en cas de déconnexion.

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

---

10. Références

• Documentation de l'API Microsoft Direct Line
• API WebSocket
• Documentation Axios
• Documentation native de React

Conclusion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!