Pekerjaan latar di Sveltekit dengan bullmq

Adakah apl SvelteKit anda bergelut dengan tugas seperti menghantar e-mel, mengubah saiz imej atau memproses data? Dengan BullMQ, anda boleh memuatkan kerja berat ini ke latar belakang dan memastikan apl anda sepantas kilat. Dalam siaran ini, kami akan menunjukkan kepada anda cara untuk menyediakannya dan menangani tugas dunia sebenar seperti profesional. Mari selami!

tl;dr Sediakan pekerja BullMQ dalam hooks.server.js. Lihat contoh

Apakah BullMQ?

BullMQ ialah perpustakaan Node.js untuk mencipta dan mengurus baris gilir kerja dengan Redis. Ia membantu anda menjalankan tugas yang memakan masa di latar belakang dengan cekap. Dengan ciri terbina dalam seperti percubaan semula, penjadualan kerja dan kawalan serentak, BullMQ menjadikan pengendalian aliran kerja yang kompleks dalam apl anda mudah dan boleh dipercayai.

Langkah 1: Pasang kebergantungan

Mula-mula, pasang ioredis (pelanggan Redis untuk node.js) dan bullmq:

pnpm i -D ioredis bullmq

Walaupun anda boleh menambah kerja pada baris gilir bullmq daripada persekitaran tanpa pelayan seperti Vercel, pekerja mesti berjalan pada pelayan node.js tradisional yang tahan lama. Oleh itu, gantikan adapter-auto dengan adapter-node:

pnpm rm @sveltejs/adapter-auto && pnpm i -D @sveltejs/adapter-node

Jangan lupa untuk mengemas kini konfigurasi Svelte anda (svelte.config.js) dengan penyesuai nod yang baru dipasang.

Langkah 2: Sediakan Barisan Kerja dan Pemproses

Seterusnya, mari sediakan baris gilir kerja BullMQ dan pemprosesnya. Cipta fail .js dalam direktori src/lib/server/:

// src/lib/server/background-jobs.js

import { REDIS_URL } from "$env/static/private";
import { Queue, Worker } from "bullmq";
import IORedis from "ioredis";

const Q_NAME = "q";

export const jobsQueue = new Queue(Q_NAME, {
  connection: new IORedis(REDIS_URL),
});

const sleep = (t) => new Promise((resolve) => setTimeout(resolve, t * 100));

export const setupBullMQProcessor = () => {
  new Worker(
    Q_NAME,
    async (job) => {
      for (let i = 0; i <= 100; i++) {
        await sleep(Math.random());
        await job.updateProgress(i);
        await job.log(`Processing job at interval ${i}`);

        if (Math.random() * 200 < 1) throw new Error(`Random error at ${i}`);
      }

      return `This is the return value of job (${job.id})`;
    },
    // https://docs.bullmq.io/bull/patterns/persistent-connections#maxretriesperrequest
    { connection: new IORedis(REDIS_URL, { maxRetriesPerRequest: null }) }
  );
};

Di sini, kami juga telah mencipta fungsi utiliti yang memberi contoh kepada pekerja BullMQ untuk mendengar dan memproses kerja dalam baris gilir Q_NAME.

Kami perlu memanggil fungsi ini dalam fail hooks.server.js kami—sama ada di peringkat atas atau dalam cangkuk init.

// src/hooks.server.js

// ...
import { building } from "$app/environment";
import { setupBullMQProcessor } from "$lib/server/background-jobs";
// ...
if (!building) {
  setupBullMQProcessor();
}
// ...

Semakan !bangunan melangkau penyediaan pekerja (dan seterusnya sambungan Redis) semasa pembinaan, mempercepatkan proses.

? BullMQ kini sedia untuk digunakan dalam apl SvelteKit kami ?

Masa demo

Untuk menguji persediaan, mari buat titik akhir POST untuk membuat giliran kerja.

// src/routes/+server.ts

import { jobsQueue } from "$lib/server/background-jobs";

export const POST = async () => {
  const { id: jobId } = await jobsQueue.add("job", {});

  /*
  The following code passes the job's progress to the client as a stream.
  If you don't need to update the client with the progress, you can skip
  the following. You can also use web-sockets or polling for that.
  */
  const stream = new ReadableStream({
    async pull(controller) {
      const job = await jobsQueue.getJob(jobId);
      controller.enqueue(
        JSON.stringify(
          job.failedReason
            ? { error: job.failedReason }
            : job.returnvalue
            ? { data: job.returnvalue }
            : { progress: job.progress }
        )
      );
      controller.enqueue("\n");

      if (job.finishedOn) {
        controller.close();
      }

      // wait for 1-second before sending the next status update
      await new Promise((r) => setTimeout(r, 1e3));
    },
  });

  return new Response(stream, {
    headers: { "content-type": "text/plain" },
  });
};

Dan pada bahagian hadapan, mari tambah butang untuk mencetuskan titik akhir di atas dan seterusnya menunjukkan status kerja:

<!-- src/routes/+page.svelte -->

<script>
  let result = $state();

  $inspect(result);

  const handleClick = async () => {
    const response = await fetch("/", { method: "post" });
    const reader = await response.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      result = JSON.parse(new TextDecoder().decode(value));
    }

    setTimeout(() => (result = undefined), 3e3);
  };
</script>

{#if result?.error}
  <div>



<p>Here is the output:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173785153552047.jpg" alt="background jobs demo using sveltekit and bullmq" loading="lazy"    style="max-width:90%"  style="max-width:90%" data-animated="true"></p>


<hr>

<h3>
  
  
  Bonus ?
</h3>

<p>You can also mount a bull-board dashboard in your SvelteKit app for easy monitoring of background jobs.</p>

<p>Install bull-board dependencies<br>
</p>

<pre class="brush:php;toolbar:false">pnpm i -D @bull-board/api @bull-board/hono @hono/node-server hono

dan ubah suai hooks.server.js anda:

// src/hooks.server.js

import { building } from "$app/environment";
import { jobsQueue, setupBullMQProcessor } from "$lib/server/background-jobs";
import { createBullBoard } from "@bull-board/api";
import { BullMQAdapter } from "@bull-board/api/bullMQAdapter";
import { HonoAdapter } from "@bull-board/hono";
import { serveStatic } from "@hono/node-server/serve-static";
import { Hono } from "hono";

if (!building) {
  setupBullMQProcessor();
}

const bullboard = (() => {
  const serverAdapter = new HonoAdapter(serveStatic);

  createBullBoard({
    queues: [new BullMQAdapter(jobsQueue)],
    serverAdapter,
  });
  const app = new Hono({ strict: false });
  const basePath = "/jobs";
  serverAdapter.setBasePath(basePath);
  app.route(basePath, serverAdapter.registerPlugin());

  return app;
})();

export const handle = async ({ event, resolve }) => {
  if (event.url.pathname.match(/^\/jobs($|\/)/)) {
    return bullboard.fetch(event.request);
  }

  return resolve(event);
};

Kemudian lawati /jobs untuk melihat papan pemuka bull-board

Atas ialah kandungan terperinci Pekerjaan latar di Sveltekit dengan bullmq. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!