تفاصيل هذا المستند استخدام استخدام واجهة برمجة تطبيقات Microsoft Direct Line في تطبيق React الأصلي ، باستخدام JavaScript و Axios و WebSocket للتواصل مع Bot Agent Agent.

---

المتطلبات المسبقة

قبل المتابعة ، تأكد من وجود ما يلي:

1. سر الخط المباشر: الحصول على سر الخط المباشر من روبوت دردشة Coilot.

2. رد فعل بيئة التنمية الأصلية: قم بإعداد مشروع React الأصلي.

3. مكتبة Axios مثبتة: إضافة Axios إلى تبعيات المشروع الخاصة بك باستخدام NPM تثبيت axios أو الغزل إضافة axios.

4. دعم WebSocket: تأكد من أن واجهة برمجة تطبيقات WebSocket متوافقة مع بيئة التطبيق الخاصة بك.

5. المعرفة الأساسية: الألفة مع javaScript ، رد فعل واجهات برمجة التطبيقات الأصلية ، والراحة.

---

جدول المحتويات

1. المصادقة

2. توليد رمز

3. تحديث الرمز المميز

4. بدء المحادثة

5. إعادة توصيل المحادثة

6. إرسال نشاط إلى الروبوت

7. استلام النشاط من الروبوت

8. إنهاء المحادثة

9. مراقبة حالة الاتصال وإعادة الاتصال

10. مراجع

---

1. المصادقة

يتطلب واجهة برمجة تطبيقات الخط المباشر سر المصادقة. الحصول على السر من بوابة خدمة Azure Bot.

---

2. توليد الرمز المميز

يتم إنشاء الرموز باستخدام السر لبدء اتصال آمن.

مثال رمز:

استيراد axios من "axios" ؛ const generateetoken = async (secret) => { const url = 'https://directline.botframework.com/v3/directline/tokens/generate' ؛ يحاول { استجابة const = await axios.post (url ، {} ، { الرؤوس: { التفويض: `Bearer $ {secret}` ، } ، }) ؛ رد response.data.token ؛ } catch (خطأ) { 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 = await axios.post (url ، {} ، { الرؤوس: { التفويض: `Bearer $ {token}` ، } ، }) ؛ رد response.data.token ؛ } catch (خطأ) { 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 = await axios.post (url ، {} ، { الرؤوس: { التفويض: `Bearer $ {token}` ، } ، }) ؛ استجابة العودة. } catch (خطأ) { 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. إعادة توصيل المحادثة

إذا فقدت الاتصال ، فيمكنك إعادة الاتصال باستخدام alightiDID و WebSocket.

مثال رمز:

const reconnectonversation = async (محادثة ، رمز) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {intervationId}؟ watermark = 0` ؛ يحاول { استجابة const = await axios.get (url ، { الرؤوس: { التفويض: `Bearer $ {token}` ، } ، }) ؛ استجابة العودة. } catch (خطأ) { 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 sensivity = async (albingId ، Token ، Activity) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {interventid}/actival` ؛ يحاول { استجابة const = في انتظار axios.post (url ، النشاط ، { الرؤوس: { التفويض: `Bearer $ {token}` ، } ، }) ؛ استجابة العودة. } catch (خطأ) { 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 = WebSocket جديد (StreamUrl) ؛ socket.onopen = () => { console.log ('WebSocket Connection.') ؛ } ؛ Socket.onmessage = (الحدث) => { const data = json.parse (event.data) ؛ console.log ("الرسالة المستلمة:" ، البيانات) ؛ onMessage (Data.Activities) ؛ } ؛ socket.onerror = (خطأ) => { console.error ("خطأ WebSocket:" ، خطأ) ؛ } ؛ socket.onclose = (الحدث) => { 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 صريحة لـ "إنهاء" محادثة.

---

9. مراقبة حالة الاتصال وإعادة الاتصال

مراقبة حالة WebSocket ، وتراجع إلى الاقتراع إذا تم فصلها.

مثال رمز:

const monitorConnection = (Socket ، strabbackTopolling) => { socket.onclose = () => { Console.Warn ('WebSocket Connection مغلق. العودة إلى الاقتراع. ") ؛ stropbacktopolling () ؛ } ؛ } ؛ const pollforactivitivities = async (محادثة ، رمز) => { const url = `https://directline.botframework.com/v3/directline/conversations/$ {interventid}/actival` ؛ يحاول { استجابة const = await axios.get (url ، { الرؤوس: { التفويض: `Bearer $ {token}` ، } ، }) ؛ إرجاع الاستجابة. } catch (خطأ) { 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. المراجع

وثائق واجهة API Microsoft Direct Line
WebSocket API
وثائق Axios
رد فعل الوثائق الأصلية

خاتمة

يوفر هذا المستند دليلًا كاملاً لدمج واجهة برمجة تطبيقات الخط المباشر في تطبيق React الأصلي باستخدام Axios و WebSocket. اتبع الخطوات المحددة للمصادقة ، وإدارة المحادثات ، والتعامل مع التواصل بشكل موثوق مع روبوت وكيل Copilot.