如何定义一个全局状态变量，在主线程和两个worker线程中交互,主线程接收到worker线程传来的服务器端的状态变化，就会触发发指令给另外一个线程

最新推荐文章于 2024-09-14 16:03:56 发布

哈哈要多学亿点点

最新推荐文章于 2024-09-14 16:03:56 发布

阅读量425

点赞数 12

文章标签：交互 javascript html

本文链接：https://blog.csdn.net/m0_60329232/article/details/139426957

版权

设计思路

定义全局状态对象：首先，明确你需要在主线程和Worker线程间共享哪些状态，并定义一个全局状态对象来存储这些状态。
使用websocket进行通信：使用websocket作为通信桥梁，但这次要更加系统地管理状态更新。当状态发生变化时，由更改状态的线程通过websocket发送状态更新消息。
状态更新处理：每个线程（包括主线程和两个Worker线程）都需要监听，并在接收到状态更新消息时同步本地状态。

主线程（index.html）

这是整个应用的协调中心，它不仅负责与WebSocket服务器的通信，还要管理两个Worker线程（lightWorker.js 和 fanWorker.js）的状态同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket & Worker 状态同步示例</title>
</head>
<body>
    <script>
        // WebSocket连接初始化
        const socket = new WebSocket('ws://your-websocket-server-url');
        const globalStatus = { light: 'off', fan: 'off' }; // 全局状态

        // 初始化Worker
        const lightWorker = new Worker('lightWorker.js');
        const fanWorker = new Worker('fanWorker.js');

        // WebSocket事件处理
        socket.addEventListener('open', onOpen);
        socket.addEventListener('message', onMessage);
        socket.addEventListener('error', onError);
        socket.addEventListener('close', onClose);

        function onOpen() {
            console.log('WebSocket连接成功');
            // 连接成功后，发送当前状态到服务器
            sendStatusToServer();
        }

        function onMessage(event) {
            const data = JSON.parse(event.data);
            if (data.type === 'statusUpdate') {
                // 从服务器接收到状态更新，更新本地状态并同步到Worker
                setState(data.key, data.value, 'server');
            }
        }

        function onError(error) {
            console.error('WebSocket错误:', error);
        }

        function onClose() {
            console.log('WebSocket连接已关闭');
        }

        // 状态更新函数
        function setState(key, value, source) {
            if (globalStatus[key] !== value) {
                globalStatus[key] = value;
                console.log(`${key}状态更新为: ${value}`);
                // 同步到所有Worker
                sendStatusToWorker(lightWorker);
                sendStatusToWorker(fanWorker);
                // 同步到服务器
                sendStatusToServer({ key, value });
            }
        }

        // 向服务器发送状态
        function sendStatusToServer(update = globalStatus) {
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify({ type: 'statusUpdate', ...update }));
            }
        }

        // 向Worker发送状态
        function sendStatusToWorker(worker) {
            worker.postMessage({ action: 'statusUpdate', status: globalStatus });
        }

        // 监听Worker的请求
        lightWorker.onmessage = fanWorker.onmessage = function(e) {
            if (e.data.action === 'requestStatus') {
                sendStatusToWorker(e.target);
            }
        };

        // 初始化时发送状态给Worker
        sendStatusToWorker(lightWorker);
        sendStatusToWorker(fanWorker);
    </script>
</body>
</html>

`lightWorker`线程

负责处理与灯光状态相关的逻辑，监听状态更新，并在需要时向主线程请求状态。

self.addEventListener('message', (event) => {
    const data = event.data;
    switch (data.action) {
        case 'statusUpdate':
            console.log('灯的状态更新为:', data.status.light);
            // 这里可以添加控制灯光行为的代码
            break;
        default:
            console.warn('未识别的action:', data.action);
    }
});

// 示例：定时向主线程请求状态更新
setTimeout(() => {
    self.postMessage({ action: 'requestStatus' });
}, 1000);

`fanWorker`线程

与lightWorker.js相似，但专注于处理风扇状态。

self.addEventListener('message', (event) => {
    const data = event.data;
    switch (data.action) {
        case 'statusUpdate':
            console.log('风扇的状态更新为:', data.status.fan);
            // 控制风扇行为的代码
            break;
        default:
            console.warn('未识别的action:', data.action);
    }
});

// 示例：定时向主线程请求状态更新
setTimeout(() => {
    self.postMessage({ action: 'requestStatus' });
}, 2000);

上述代码，将得到一个系统，它不仅能够通过WebSocket与服务器实时同步状态，还能在主线程和两个Worker线程之间高效地共享状态更新，确保状态的一致性和实时性。

哈哈要多学亿点点

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫