文件：在帶有 Axios 的 React Native 應用程式中使用 Direct Line API

本文檔詳細介紹了在 React Native 應用程式中使用 Microsoft Direct Line API，使用 JavaScript、Axios 和 WebSocket 與 Copilot Agent Bot 進行通訊。

---

先決條件

繼續之前，請確保滿足以下條件：

1。 Direct Line 秘密： 從 Coilot 聊天機器人取得 Direct Line 秘密。

2。 React Native 開發環境： 設定一個工作的 React Native 專案。

3。已安裝 Axios 庫： 使用 npm install axios 或 yarn add axios 將 Axios 新增至專案依賴項。

4。 WebSocket 支援： 確保 WebSocket API 與您的應用程式環境相容。

5。基礎： 熟悉 JavaScript、React Native 和 RESTful API。

---

目錄

1. 驗證

2. 產生令牌

3. 刷新令牌

4. 開始對話

5. 重新連結對話

6. 傳送活動給機器人

7. 從機器人接收活動

8. 結束對話

9. 連線狀態監控與重連

10. 參考文獻

---

1. 認證

Direct Line API 需要金鑰進行驗證。從 Azure Bot 服務入口網站取得金鑰。

---

2. 生成Token

使用秘密產生令牌來啟動安全通訊。

程式碼範例：

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. 刷新Token

代幣的壽命是有限的。在過期之前刷新它們。

程式碼範例：

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. 開始對話

使用令牌與機器人發動對話。

程式碼範例：

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. 重新連結對話

如果連線遺失，您可以使用conversationId和WebSocket重新連線。

程式碼範例：

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. 向機器人發送活動

向機器人發送用戶訊息或活動。

程式碼範例：

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. 從機器人接收活動

使用 WebSocket 即時監聽機器人回應。

程式碼範例：

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. 結束對話

透過停止溝通來明確結束對話。

注意：Direct Line API 不需要明確 API 呼叫來「結束」對話。

---

9. 連線狀態監控與重連

監控 WebSocket 狀態，如果斷開連線則回退到輪詢。

程式碼範例：

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. 參考文獻

• Microsoft Direct Line API 文件
• WebSocket API
• Axios 文件
• React Native 文件

結論

本文檔提供了使用 Axios 和 WebSocket 將 Direct Line API 整合到 React Native 應用程式中的完整指南。請依照概述的步驟進行身份驗證、管理對話並可靠地處理與 Copilot Agent Bot 的通訊。

以上是文件：在帶有 Axios 的 React Native 應用程式中使用 Direct Line API的詳細內容。更多資訊請關注PHP中文網其他相關文章！