شرط أساسي

• المعرفة الأساسية بـ ReactJS/NextJS

ما هو عامل الويب

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

لماذا تنشئ سلاسل رسائل أخرى بينما يمكنك فقط العمل على الخيط الرئيسي؟

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

كيفية استخدام Web Worker في NextJS

في هذه العينة، سأستخدم Web Worker لجلب واجهة برمجة تطبيقات صور الكلاب وإرسال النتيجة مرة أخرى إلى سلسلة الرسائل الرئيسية لعرض تلك الصور

• أبدأ مشروع NextJS كالمعتاد
• اجعل page.tsx مكون عميل عن طريق إضافة "استخدام العميل" أعلى الملف لأننا نريد استخدام خطافات التفاعل هنا لهذه العينة
• إنشاء مدخلات بحالة القيمة المعتادة ومعالج onChange
• قم بإنشاء زر باستخدام حدث onClick وسنستخدم هذا الزر لإخبار عامل الويب بإحضار واجهة برمجة التطبيقات
• إنشاء مرجع للاحتفاظ بمثيل عامل الويب
• قم بإنشاء تأثير لتهيئة عامل الويب وإرفاق حدث للتعامل مع البيانات التي يرسلها عامل الويب مع عامل الخيط/الويب وإنهائه بعد إلغاء تحميل الصفحة
• قم بإنشاء حالة للاحتفاظ بعناوين URL للصور التي يتم تلقيها من عامل الويب.
• يبدو page.tsx هكذا

"use client";

import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";

export default function Home() {
    const [userInput, setUserInput] = useState("");
    const workerRef = useRef();
    const [dogPics, setDogPics] = useState();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        

            
            
                fetch
            
            {dogPics && dogPics.map((pic) => )}
        
    );
}

• قم بإنشاء ملف يسمى عامل.ts في نفس المجلد مثل page.tsx

self.onmessage = async (e: MessageEvent) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

الآن قم بتشغيل التطبيق وتحقق من النتيجة!