Dokumentation: Verwendung der Direct Line API in einer React Native-Anwendung mit Axios

Dieses Dokument beschreibt die Verwendung der Microsoft Direct Line API in einer React Native-Anwendung unter Verwendung von JavaScript, Axios und WebSocket für die Kommunikation mit einem Copilot Agent Bot.

---

Voraussetzungen

Bevor Sie fortfahren, stellen Sie sicher, dass Folgendes vorhanden ist:

1. Direct-Line-Geheimnis: Erhalten Sie das Direct-Line-Geheimnis vom Coilot-Chatbot.

2. React Native-Entwicklungsumgebung: Richten Sie ein funktionierendes React Native-Projekt ein.

3. Installierte Axios-Bibliothek: Fügen Sie Axios zu Ihren Projektabhängigkeiten hinzu, indem Sie npm install axios oder Yarn add axios verwenden.

4. WebSocket-Unterstützung: Stellen Sie sicher, dass die WebSocket-API mit Ihrer Anwendungsumgebung kompatibel ist.

5. Grundkenntnisse: Vertrautheit mit JavaScript, React Native und RESTful APIs.

---

Inhaltsverzeichnis

1. Authentifizierung

2. Token wird generiert

3. Aktualisierung des Tokens

4. Das Gespräch beginnen

5. Das Gespräch wieder verbinden

6. Aktivität an den Bot senden

7. Empfangen von Aktivitäten vom Bot

8. Das Gespräch beenden

9. Überwachung des Verbindungsstatus und Wiederverbindung

10. Referenzen

---

1. Authentifizierung

Für die Direct Line API ist ein Geheimnis zur Authentifizierung erforderlich. Erhalten Sie das Geheimnis vom Azure Bot Service-Portal.

---

2. Token generieren

Token werden mithilfe des Geheimnisses generiert, um eine sichere Kommunikation zu initiieren.

Codebeispiel:

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. Aktualisieren des Tokens

Tokens haben eine begrenzte Lebensdauer. Aktualisieren Sie sie, bevor sie ablaufen.

Codebeispiel:

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. Das Gespräch beginnen

Initiieren Sie mithilfe des Tokens eine Konversation mit dem Bot.

Codebeispiel:

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. Das Gespräch wieder verbinden

Wenn die Verbindung verloren geht, können Sie die Verbindung mithilfe der ConversationId und des WebSocket wiederherstellen.

Codebeispiel:

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. Aktivität an den Bot senden

Benutzernachrichten oder Aktivitäten an den Bot senden.

Codebeispiel:

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. Empfangen von Aktivitäten vom Bot

Verwenden Sie WebSocket, um in Echtzeit auf Bot-Antworten zu warten.

Codebeispiel:

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. Das Gespräch beenden

Beenden Sie ein Gespräch explizit, indem Sie die Kommunikation beenden.

Hinweis: Für die Direct Line API ist kein expliziter API-Aufruf erforderlich, um eine Konversation zu „beenden“.

---

9. Überwachung des Verbindungsstatus und Wiederverbindung

Überwachen Sie den WebSocket-Status und greifen Sie auf Abfragen zurück, wenn die Verbindung getrennt wird.

Codebeispiel:

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. Referenzen

• Microsoft Direct Line API-Dokumentation
• WebSocket-API
• Axios-Dokumentation
• Native Dokumentation reagieren

Abschluss

Dieses Dokument bietet eine vollständige Anleitung zur Integration der Direct Line API in eine React Native-Anwendung mithilfe von Axios und WebSocket. Befolgen Sie die beschriebenen Schritte, um sich mit einem Copilot Agent Bot zu authentifizieren, Gespräche zu verwalten und die Kommunikation zuverlässig abzuwickeln.

Das obige ist der detaillierte Inhalt vonDokumentation: Verwendung der Direct Line API in einer React Native-Anwendung mit Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!