阿里巴巴网站建设哪家好,wordpress djiango,网站做支付借口多少钱,室内设计手绘图 基础入门Web Worker#xff08;消息传递机制#xff09;
定义#xff1a;是为了在浏览器中提供多线程支持#xff0c;允许 JavaScript 在后台线程运行#xff0c;而不阻塞主线程。它非常适合执行耗时的计算任务或处理大量数据#xff0c;避免主线程#xff08;通常是 UI 线程消息传递机制
定义是为了在浏览器中提供多线程支持允许 JavaScript 在后台线程运行而不阻塞主线程。它非常适合执行耗时的计算任务或处理大量数据避免主线程通常是 UI 线程被阻塞从而保证用户界面的流畅性。应用运行后台任务执行长时间运行的计算或操作诸如图像处理、文件处理、大数据分析等。它并不直接与网络通信或实时消息传递相关。原理创建Web Worker分配一个新的线程即后台线程它一个独立的执行上下文和主线程相互隔离且不能直接操作 DOM 或访问主线程中的变量它和主线程之间的通信是异步的通常是通过 postMessage 和 onmessage 方法进行数据传输。 // 创建一个 Worker
const worker new Worker(worker.js);// 发送消息到 Worker
worker.postMessage({ type: start, data: 1000 }); // 1000ms 的间隔// 接收 Worker 返回的消息
worker.onmessage (event) {console.log(event.data); // 输出 Worker 返回的数据
};// 停止 Worker
worker.postMessage({ type: stop });应用计时器 // worker.js
let setIntervaler null
let count 0// 启动定时器
function start(timeout) {setIntervaler setInterval(() {postMessage({type: next,data: count})}, timeout)
}// 停止定时器并关闭 Worker
function stop() {clearInterval(setIntervaler)count 0 // 重置计数self.close() // 关闭 Worker
}// 监听来自主线程的消息
self.addEventListener(message, (e) {let { type, data } e.data // 解构消息数据switch (type) {case start:start(data) // 启动定时器breakcase stop:stop() // 停止定时器breakdefault:break}
})templatedivh1Web Worker 定时器/h1p计数: {{ count }}/pbutton clickstartTimer :disabledisRunning启动定时器/buttonbutton clickstopTimer :disabled!isRunning停止定时器/button/div
/templatescript setup
import { ref, onUnmounted } from vue;// 定义 Vue 组件的状态
const count ref(0);
const isRunning ref(false);// 创建 Worker 实例
// src\utils\worker.js
const worker new Worker(new URL(../utils/worker.js, import.meta.url));// 监听 Worker 返回的数据
worker.onmessage (e) {const { type, data } e.data;switch (type) {case ready:console.log(data); // Worker 已准备好break;case next:count.value data; // 更新计数器break;default:break;}
};// 启动定时器
const startTimer () {worker.postMessage({ type: start, data: 1000 }); // 1000 毫秒1秒为定时器间隔isRunning.value true; // 更新状态为运行中
};// 停止定时器
const stopTimer () {worker.postMessage({ type: stop });isRunning.value false; // 更新状态为停止
};// 清理 Worker 实例
onUnmounted(() {worker.terminate(); // 组件销毁时终止 Worker
});
/scriptstyle scoped
button {margin: 10px;padding: 10px;font-size: 16px;
}
/styleWebSocket握手连接通信
定义是一种在客户端和服务器之间建立持久连接的协议它允许双方在连接建立后进行双向实时通信。WebSocket 主要用于需要实时数据更新的应用场景如实时聊天、在线游戏、股票行情、推送通知等应用客户端和服务器之间可以保持一个长连接允许实时交换数据适合实时应用程序的场景。原理用 HTTP 协议进行握手建立连接通信将转为基于 TCP 的实时双向通信全双工通信可以随时从客户端或服务器端通过 send 方法发送数据通过 onmessage 监听接收到的消息。 // 创建 WebSocket 连接
const socket new WebSocket(ws://example.com/socket);// 连接成功后发送消息
socket.onopen () {socket.send(Hello, server!);
};// 接收来自服务器的消息
socket.onmessage (event) {console.log(Message from server:, event.data);
};// 发送消息给服务器
socket.send(Another message);// 关闭连接
socket.close();总结
特性Web WorkerWebSocket主要目的后台线程处理计算任务避免阻塞主线程双向实时通信实时数据交换通信方式主线程与 Worker 通过消息传递客户端与服务器之间的持久连接双向通信适用场景长时间运行的计算任务数据处理实时应用程序如聊天、推送通知、在线游戏通信延迟主要用于计算任务没有即时通信需求适合低延迟、高实时性的双向通信关闭方式worker.terminate() 或 self.close()socket.close() 追更
Web Worker 是一个独立的线程当你调用 self.close() 时Worker 被终止所有的状态如定时器也会丢失。
因此想要再次启动定时器则不关闭Worker直到组件被销毁 // worker.js
let setIntervaler null;
let count 0;
let isRunning false; // 标志定时器是否正在运行// 启动定时器
function start(timeout) {if (!isRunning) {isRunning true; // 标记定时器已启动setIntervaler setInterval(() {postMessage({type: next,data: count});}, timeout);}
}// 停止定时器
function stop() {if (isRunning) {clearInterval(setIntervaler);isRunning false; // 标记定时器已停止}
}// 监听来自主线程的消息
self.addEventListener(message, (e) {const { type, data } e.data;switch (type) {case start:start(data); // 启动定时器break;case stop:stop(); // 停止定时器break;default:break;}
});templatedivh1Web Worker 定时器/h1p计数: {{ count }}/pbutton clickstartTimer :disabledisRunning启动定时器/buttonbutton clickstopTimer :disabled!isRunning停止定时器/button/div
/templatescript setup
import { ref, onUnmounted } from vue;// 定义 Vue 组件的状态
const count ref(0);
const isRunning ref(false);// 创建 Worker 实例保持 Worker 持续存在
const worker new Worker(new URL(../utils/worker.js, import.meta.url));// 监听 Worker 返回的数据
worker.onmessage (e) {const { type, data } e.data;switch (type) {case ready:console.log(data); // Worker 已准备好break;case next:count.value data; // 更新计数器break;default:break;}
};// 启动定时器
const startTimer () {if (!isRunning.value) {worker.postMessage({ type: start, data: 1000 }); // 1000 毫秒1秒为定时器间隔isRunning.value true; // 更新状态为运行中}
};// 停止定时器
const stopTimer () {if (isRunning.value) {worker.postMessage({ type: stop });isRunning.value false; // 更新状态为停止}
};// 清理 Worker 实例
onUnmounted(() {worker.terminate(); // 组件销毁时终止 Worker
});
/scriptstyle scoped
button {margin: 10px;padding: 10px;font-size: 16px;
}
/style
