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>