Node.js socket.io 與反應 web 工人

Question

我有一個與 socket.io、React.js 和 Webworkers 相關的項目

組件 A 和 B 是主頁組件的子組件。 組件A和B也用作標簽。 如果 A 已安裝，則 B 已卸載，反之亦然。

當一個組件第一次被渲染時，web worker 應該開始從 socket.io 服務器拉取數據。 即使在卸載后，數據拉取也應該在后台運行，並且當用戶再次安裝時，應該顯示從 web 工作人員獲得的相同組件數據。

我創建了一個像這樣的 web 工人

rr-bf-worker.ts

import { socket } from "../services/socket";

onmessage = function () {
  console.log("::RR/BF worker started...");
  socket.on("RR/BF-data", (data: [string[]]) => {
    postMessage(data);
  });
};

然后在組件中

rr-bf-table.tsx

import React, { useEffect, useContext, useState } from "react";
import ReusableTable from "./reusable/reusable-table";
export default function RRBFTable() {
  const [rows, setRows] = useState<[string[]]>();

  

  useEffect(() => {
    console.log("Here");
    const myWorker = new Worker("../workers/rr-bf-worker");

    myWorker.postMessage("start");
    myWorker.onmessage = (e: any) => {
      console.log("Time Taken", e.data);
    };
  }, []);

  if (typeof rows === "undefined") {
    return <p>Please wait...</p>;
  } else {
    return <ReusableTable rows={rows} />;
  }
}

但這甚至不叫工人。 代碼出了什么問題？

這是完整代碼此外，如果需要，這是我的后端代碼

Answer 1

我看到你正在使用 webpack 所以你必須像這樣導入你的工人（ https://webpack.js.org/guides/web-workers/ ）：

new Worker(new URL('./worker.js', import.meta.url));

現在我不確定 url 在你的情況下應該是什么，但我認為這三個中的一個應該可以工作：

const myWorker = new Worker(new URL("../workers/rr-bf-worker", import.meta.url));

const myWorker = new Worker(new URL("../workers/rr-bf-worker.js", import.meta.url));

const myWorker = new Worker(new URL("../workers/rr-bf-worker.ts", import.meta.url));