문서: Axios를 사용하는 React Native 애플리케이션에서 Direct Line API 사용-JS 튜토리얼-php.cn

문서: Axios를 사용하는 React Native 애플리케이션에서 Direct Line API 사용

DDD

풀어 주다： 2025-01-14 14:33:48

원래의

189명이 탐색했습니다.

Documentation: Using Direct Line API in a React Native Application with Axios

이 문서에서는 Copilot Agent Bot과 통신하기 위해 JavaScript, Axios 및 WebSocket을 사용하여 React Native 애플리케이션에서 Microsoft Direct Line API를 사용하는 방법을 자세히 설명합니다.

전제조건

계속하기 전에 다음 사항이 충족되었는지 확인하세요.

1. 직통 비밀 번호: 코일럿 채팅 봇에서 직통 비밀 번호를 얻습니다.

2. React Native 개발 환경: 작동하는 React Native 프로젝트를 설정하세요.

3. Axios 라이브러리 설치: npm install axios 또는 Yarn add axios를 사용하여 프로젝트 종속성에 Axios를 추가합니다.

4. WebSocket 지원: WebSocket API가 귀하의 애플리케이션 환경과 호환되는지 확인하세요.

5. 기본 지식: JavaScript, React Native 및 RESTful API에 대한 지식

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 설명서
웹소켓 API
Axios 문서
React 네이티브 문서

결론

이 문서는 Axios 및 WebSocket을 사용하여 Direct Line API를 React Native 애플리케이션에 통합하기 위한 완전한 가이드를 제공합니다. 설명된 단계에 따라 Copilot Agent Bot을 사용하여 인증, 대화 관리 및 통신을 안정적으로 처리하세요.

위 내용은 문서: Axios를 사용하는 React Native 애플리케이션에서 Direct Line API 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!