ドキュメント: Axios を使用した React Native アプリケーションでの Direct Line API の使用

このドキュメントでは、JavaScript、Axios、および WebSocket を使用して Copilot Agent Bot と通信する、React Native アプリケーションでの Microsoft Direct Line API の使用法について詳しく説明します。

---

前提条件

続行する前に、以下の条件が整っていることを確認してください:

1. Direct Line シークレット: Coinot チャット ボットから 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 Service ポータルからシークレットを取得します。

---

2. トークンの生成

安全な通信を開始するためにシークレットを使用してトークンが生成されます。

コード例:

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. トークンの更新

トークンには有効期限があります。有効期限が切れる前に更新してください。

コード例:

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 中国語 Web サイトの他の関連記事を参照してください。