Dokumentasi: Menggunakan Direct Line API dalam Aplikasi React Native dengan Axios

Dokumen ini memperincikan penggunaan Microsoft Direct Line API dalam aplikasi React Native, menggunakan JavaScript, Axios dan WebSocket untuk komunikasi dengan Copilot Agent Bot.

---

Pra-syarat

Sebelum meneruskan, pastikan perkara berikut disediakan:

1. Rahsia Talian Terus: Dapatkan rahsia Talian Terus daripada Bot sembang Coilot.

2. Persekitaran Pembangunan React Native: Sediakan projek React Native yang berfungsi.

3. Pustaka Axios Dipasang: Tambahkan Axios pada kebergantungan projek anda menggunakan npm install axios atau yarn add axios.

4. Sokongan WebSocket: Pastikan API WebSocket serasi dengan persekitaran aplikasi anda.

5. Pengetahuan Asas: Kebiasaan dengan JavaScript, React Native dan API RESTful.

---

Jadual Kandungan

1. Pengesahan

2. Menjana Token

3. Menyegarkan Token

4. Memulakan Perbualan

5. Menyambung Semula Perbualan

6. Menghantar Aktiviti ke Bot

7. Menerima Aktiviti daripada Bot

8. Tamatkan Perbualan

9. Pemantauan Status Sambungan dan Penyambungan Semula

10. Rujukan

---

1. Pengesahan

API Talian Langsung memerlukan rahsia untuk mengesahkan. Dapatkan rahsia daripada portal Azure Bot Service.

---

2. Menjana Token

Token dijana menggunakan rahsia untuk memulakan komunikasi selamat.

Contoh Kod:

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. Menyegarkan Token

Token mempunyai jangka hayat yang terhad. Muat semulanya sebelum tamat tempoh.

Contoh Kod:

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. Memulakan Perbualan

Mulakan perbualan dengan bot menggunakan token.

Contoh Kod:

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. Menyambung semula Perbualan

Jika sambungan terputus, anda boleh menyambung semula menggunakan conversationId dan WebSocket.

Contoh Kod:

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. Menghantar Aktiviti ke Bot

Hantar mesej atau aktiviti pengguna kepada bot.

Contoh Kod:

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. Menerima Aktiviti daripada Bot

Gunakan WebSocket untuk mendengar respons bot dalam masa nyata.

Contoh Kod:

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. Menamatkan Perbualan

Tamatkan perbualan secara eksplisit dengan menghentikan komunikasi.

Nota: Direct Line API tidak memerlukan panggilan API yang jelas untuk "menamatkan" perbualan.

---

9. Pemantauan Status Sambungan dan Sambungan Semula

Pantau status WebSocket dan sandaran kepada tinjauan pendapat jika terputus sambungan.

Contoh Kod:

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

• Dokumentasi API Talian Langsung Microsoft
• WebSocket API
• Dokumentasi Axios
• Dokumentasi Asli React

Kesimpulan

Dokumen ini menyediakan panduan lengkap untuk menyepadukan API Direct Line ke dalam aplikasi React Native menggunakan Axios dan WebSocket. Ikut langkah yang digariskan untuk mengesahkan, mengurus perbualan dan mengendalikan komunikasi dengan pasti dengan Copilot Agent Bot.

Atas ialah kandungan terperinci Dokumentasi: Menggunakan Direct Line API dalam Aplikasi React Native dengan Axios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!