بروتوكول HTTP وطريقة عمل الAPI في تطبيقات الويب

title: "🔥 بناء هوك رياكت غير متصل بالمزود لتدفق الذكاء الاصطناعي" date: 2026-05-10 tags:

• react
• ai
• frontend
• fullstack
• react-hooks image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=1200&q=80" share: true featured: false description: "تعلم كيفية إنشاء هوك رياكت خفيف غير متصل بالمزود لتدفق الذكاء الاصطناعي، مما يسمح بالتبديل السلس بين مزودي الذكاء الاصطناعي المختلفين دون إعادة كتابة الجزء الأمامي."

مقدمة

عند بناء تطبيقات المحادثة التي تعمل بالذكاء الاصطناعي باستخدام رياكت، يعتمد المطورون غالبًا على مكتبات متصلة ارتباطًا وثيقًا بمزودي الذكاء الاصطناعي المحددين، مثل OpenAI أو Claude. ومع ذلك، يمكن أن يؤدي هذا النهج إلى حبس البائع، مما يجعل من الصعب التبديل بين المزودين أو الهجرة إلى منصة مختلفة. في هذه المقالة، سنستكشف كيفية بناء هوك رياكت غير متصل بالمزود يمكنه بث بيانات المحادثة التي تعمل بالذكاء الاصطناعي من أي مزود، دون الحاجة إلى تغييرات كبيرة في رمز الجزء الأمامي. النهج التقليدي لبناء تطبيقات المحادثة التي تعمل بالذكاء الاصطناعي يتضمن استخدام مكتبة مصممة خصيصًا لمزود الذكاء الاصطناعي المحدد. غالبًا ما تبث هذه المكتبات البيانات مباشرة من واجهة برمجة تطبيقات المزود، باستخدام عميل رقيق على قمة خلفية المزود. ومع ذلك، يمكن أن يكون هذا النهج مقيدًا، لأنه يتطلب إعادة كتابة رمز الجزء الأمامي كلما تم تغيير مزود الذكاء الاصطناعي أو هجرة التطبيق إلى منصة مختلفة.

الجسم الرئيسي

لذلك، كيف يمكننا بناء هوك رياكت يمكنه بث بيانات المحادثة التي تعمل بالذكاء الاصطناعي من أي مزود، دون ارتباط بمزود خلفي أو منصة محددة؟ الفكرة الرئيسية هي أن بث المحادثة التي تعمل بالذكاء الاصطناعي هو في الأساس ثلاث أحداث: data و end و error. من خلال التركيز على هذه الأحداث، يمكننا إنشاء هوك غير متصل بالمزود. هنا مثال على كيفية تنفيذ هذا الهوك:

import { useState, useEffect } from 'react';
const useAiChat = (provider: any) => {
  const [messages, setMessages] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    const handleData = (data: any) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    };
    const handleEnd = () => {
      console.log('انتهت جلسة المحادثة');
    };
    const handleError = (error: any) => {
      setError(error);
    };
    provider.on('data', handleData);
    provider.on('end', handleEnd);
    provider.on('error', handleError);
    return () => {
      provider.off('data', handleData);
      provider.off('end', handleEnd);
      provider.off('error', handleError);
    };
  }, [provider]);
  return { messages, error };
};

في هذا المثال، يأخذ هوك useAiChat كائن provider كargument، والذي من المتوقع أن يبث أحداث data و end و error. يستخدم الهوك hooks useState و useEffect لإدارة حالة جلسة المحادثة ومعالجة الأحداث التي يبثها المزود.

باستخدام دا الهوك، ممكن نبدل بين مقدمي الذكاء الاصطناعي المختلفين بسهولة، من غير ما نحتاج نغير الكود في الجانب الأمامي بشكل كبير. مثلاً، ممكن نستخدم الهوك مع OpenAI، Claude، أو أي مقدم تاني بيعمل Events data و end و error.

الخلاصة

في المقالة دي، شوفنا ازاي نعمل هوك رياكت معمى عن مقدمي الذكاء الاصطناعي لخدمة البث، و ده بيسمح بالتبديل السلس بين مقدمي الذكاء الاصطناعي المختلفين من غير ما نكتب كود الجانب الأمامي تاني. بالتركيز على الأحداث الأساسية لخدمة بث الدردشة بالذكاء الاصطناعي، ممكن نعمل هوك مرن و قابل لإعادة الاستخدام و سهل الصيانة. سواء كنت بتبني تطبيق دردشة ب رياكت أو بتهجره لمشروع تاني، الهوك ده ممكن يساعدك تسهل كودك و تقلل من الاعتماد على مقدم الخدمة. فا روح جربه – و هتكون مستقبلك شاكرلك!