使用原生webWorker,适用于vue或者react

64 阅读1分钟

1:编写worker文件

    const workercode = () => {
      const doSomething = (data) => {
        // do something with data
        return data;
      };
      self.onmessage = function (e) {
        const res = doSomething(e.data);
        self.postMessage(res);
      };
    };

    let code = workercode.toString();
    code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));

    const blob = new Blob([code], { type: "application/javascript" });
    const worker_script = URL.createObjectURL(blob);

    export default worker_script;

2:react中使用

    import React from "react";
    import worker_script from "./testWorker";
    export default class IcCallStatus extends React.Component {
      render() {
        return <div >
          <button onClick={()=>{
             this.worker.postMessage("100");
          }}>test</button>
        </div>;
      }

      constructor(props) {
        super(props);
        this.state = {};
      }

      componentDidMount() {
        this.worker = new Worker(worker_script);
        this.worker.onmessage = function (e) {
          console.log("e:", e.data);
        };
        this.worker.postMessage("100");
      }

      componentWillUnmount() {}
    }

2:vue中使用

    <template>
      <div>
        <button @click="test">test</button>
      </div>
    </template>

    <script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import worker_script from "./testWorker.js";
    const worker = ref(null);

    const test = ()=>{
      worker.value.postMessage("test");
    }

    onMounted(() => {
      worker.value = new Worker(worker_script);
      worker.value.onmessage = function (e: MessageEvent) {
          console.log("e:", e.data);
      };
    })
</script>