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

---

前提条件

先に進む前に、以下が整っていることを確認してください：

1。直接線の秘密：コイロットチャットボットから直接線の秘密を取得します。

2。反応ネイティブ開発環境： Working Reactネイティブプロジェクトを設定します。

3。 axiosライブラリのインストール： npmを使用してプロジェクト依存関係にaxiosを追加するaxiosまたはyarn add axios。。

4。 WebSocketサポート： WebSocketAPIがアプリケーション環境と互換性があることを確認してください。

5。基本知識： JavaScript、React Native、およびRestful APIに精通している。

---

目次

1. 認証

2. 生成token

3. トークンを更新します

4. 会話を開始

5. 会話の再接続

6. ボットへのアクティビティの送信

7. ボットからの受信アクティビティ

8. 会話を終わらせる

9. 接続ステータス監視と再接続

10. 参照

---

1。認証

ダイレクトラインAPIには、認証するための秘密が必要です。 Azure Bot Serviceポータルから秘密を取得します。

---

2。トークンの生成

トークンは、秘密を使用して生成され、安全な通信を開始します。

コード例：

'axios'からaxiosをインポートします。 const generatetoken = async（secret）=> { const url = 'https://directline.botframework.com/v3/directline/tokens/generate'; 試す { const response = axios.post（url、{}、{ ヘッダー：{ 承認： `Bearer $ {Secret}`、 }、 }）; RESPORSIN.DATA.TOKEN; } catch（error）{ console.error（ 'トークン生成エラー：'、エラー）; スローエラー; } };

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'; 試す { const response = axios.post（url、{}、{ ヘッダー：{ 承認： `BEARER $ {token}`、 }、 }）; RESPORSIN.DATA.TOKEN; } catch（error）{ console.error（ 'エラーの更新トークン：'、エラー）; スローエラー; } };

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

---

4。会話を開始します

トークンを使用してボットとの会話を開始します。

コード例：

const startConversation = async（token）=> { const url = 'https://directline.botframework.com/v3/directline/conversations'; 試す { const response = axios.post（url、{}、{ ヘッダー：{ 承認： `BEARER $ {token}`、 }、 }）; RESPONSE.DATAを返します。 } catch（error）{ Console.Error（ 'エラー開始会話：'、エラー）; スローエラー; } };

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

---

5.会話の再接続

接続が失われた場合、ConversationIDとWebSocketを使用して再接続できます。

コード例：

const reconnectConversation = async（conversation、token）=> { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversationid}？watermark = 0`; 試す { const response = axios.get（url、{ ヘッダー：{ 承認： `BEARER $ {token}`、 }、 }）; RESPONSE.DATAを返します。 } catch（error）{ console.error（ 'エラーの再接続会話：'、エラー）; スローエラー; } };

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

---

6.ボットにアクティビティを送信します

ユーザーメッセージまたはアクティビティをボットに送信します。

コード例：

const sendactivity = async（conversationId、token、activity）=> { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversationid}/activities`; 試す { const response = waing axios.post（url、activity、{ ヘッダー：{ 承認： `BEARER $ {token}`、 }、 }）; RESPONSE.DATAを返します。 } catch（error）{ console.error（ 'エラー送信アクティビティ：'、エラー）; スローエラー; } };

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

---

7。ボットからのアクティビティの受信

Websocketを使用して、ボット応答をリアルタイムでリッスンします。

コード例：

const connectwebsocket =（streamurl、onmessage）=> { const socket = new WebSocket（Streamurl）; socket.onopen =（）=> { console.log（ 'WebSocket Connectionが確立されています。'）; }; socket.onmessage =（event）=> { const data = json.parse（event.data）; console.log（ 'メッセージ受信：'、data）; onmessage（data.activities）; }; socket.onerror =（error）=> { console.error（ 'websocket error：'、error）; }; socket.onclose =（event）=> { Console.Warn（ 'WebSocket Connectionが閉じられた：'、イベント）; }; 返品ソケット。 };

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

---

8。会話を終了します

コミュニケーションを停止することにより、会話を明示的に終了します。

注：直接行APIは、会話を「終了」するための明示的なAPI呼び出しを必要としません。

---

9。接続ステータスの監視と再接続

WebSocketステータスを監視し、切断した場合のポーリングへのフォールバックを監視します。

コード例：

const MonitorConnection =（socket、fallbacktopolling）=> { socket.onclose =（）=> { Console.Warn（ 'WebSocket Connectionが閉じた。投票に戻る。'）; fallbacktopolling（）; }; }; const pollforactivities = async（conversation、token）=> { const url = `https://directline.botframework.com/v3/directline/conversations/$ {conversationid}/activities`; 試す { const response = axios.get（url、{ ヘッダー：{ 承認： `BEARER $ {token}`、 }、 }）; RESPONSE.DATA.ACTIVITIESを返します。 } catch（error）{ Console.Error（ 'アクティビティのエラーポーリング：'、エラー）; スローエラー; } };

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ドキュメント
websocketapi
axiosドキュメント
ネイティブドキュメント
• を反応する

結論

このドキュメントは、AxiosとWebsocketを使用して、直接線APIをReactネイティブアプリケーションに統合するための完全なガイドを提供します。概説された手順に従って、Copilotエージェントボットとの認証、会話の管理、およびコミュニケーションを確実に処理します。