Apakah itu pekerja Web dan cara menggunakannya dalam NextJS

Prasyarat

• Pengetahuan asas tentang ReactJS/NextJS

Apakah itu Pekerja Web

JavaScript ialah bahasa satu utas, utas yang digunakan dirujuk sebagai utas utama
Brower sebenarnya menggunakan benang lain
Pekerja web daripada API penyemak imbas ialah cara untuk anda membuat dan mendaftarkan urutan tambahan dengan JavaScript

Mengapa membuat utas lain apabila anda hanya boleh bekerja pada utas utama?

Katakan anda perlu mengira banyak data untuk melukis carta.
Pengiraan tersebut mungkin mengambil masa yang cukup lama untuk membuat halaman tidak bertindak balas
Di situlah pekerja web masuk.
Anda boleh membuat urutan baharu untuk mengira data tersebut dan apabila selesai, pekerja web boleh menghantar semula hasilnya ke utas utama

Cara menggunakan Pekerja Web dalam NextJS

Dalam sampel ini saya akan menggunakan Pekerja Web untuk mengambil API gambar anjing dan menghantar semula hasilnya ke urutan utama untuk memaparkan imej tersebut

• Mulakan projek NextJS anda seperti biasa
• Jadikan page.tsx sebagai komponen klien dengan menambah 'use client' di atas fail kerana kami mahu menggunakan react hook di sini untuk sampel ini
• Buat input dengan keadaan nilai biasa dan pengendali onChange
• Buat butang dengan acara onClick yang kami akan gunakan butang ini untuk memberitahu pekerja web untuk mengambil API
• Buat Rujukan untuk memegang contoh pekerja web
• Buat Kesan untuk memulakan pekerja web dan melampirkan acara untuk mengendalikan data yang dihantar semula oleh pekerja web dan menamatkan urutan/pekerja web selepas halaman dinyahlekapkan
• Buat keadaan untuk menahan url imej yang diterima daripada pekerja web.
• page.tsx kelihatan seperti ini

"use client";

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

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

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

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

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

    return (
        <div>
            <input
                placeholder="number of dogs"
                value={userInput}
                onChange={handleUserInputChange}
                className="mr-4 text-black"
            ></input>
            <button className="bg-green-500 text-black rounded" onClick={handleFetch}>
                fetch
            </button>
            {dogPics && dogPics.map((pic) => <img key={pic} src={pic} alt="dog pic"></img>)}
        </div>
    );
}

• Buat fail bernama worker.ts dalam folder yang sama dengan page.tsx

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

Sekarang jalankan apl anda dan semak hasilnya!

Atas ialah kandungan terperinci Apakah itu pekerja Web dan cara menggunakannya dalam NextJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!