使用websocket通讯，当一个Worker接收到服务器的状态更新后，主线程能够基于此更新触发另一个Worker与另一服务器的交互

最新推荐文章于 2024-07-08 10:04:44 发布

哈哈要多学亿点点

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量603

点赞数 17

文章标签： websocket 服务器网络协议

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

版权

为了更好地理解这个概念性示例在具体应用中的体现，我们可以构想一个简单的场景：一个实时数据同步系统，其中有两个不同的后端服务分别处理用户数据（服务器A）和库存数据（服务器B）。前端应用需要同时与这两个服务保持实时通信，确保用户界面显示的数据是最新的。

应用场景描述

假设你正在开发一个电子商务网站的后台管理系统，管理员可以同时查看和管理用户活动和商品库存。为了确保数据的即时性，你决定使用WebSocket技术来实现实时数据同步：

服务器A负责处理用户登录、登出等用户活动的实时统计。
服务器B管理商品库存的变化，比如商品的增减、售罄状态更新。

主线程功能

初始化状态：定义了globalStatus对象来追踪两个服务器的当前状态，初始时都标记为离线或未连接。
监听Worker A：当Worker A报告用户活动状态更新（statusUpdate消息），更新globalStatus.serverA，并在状态变为'updated'时，通知Worker B去获取库存状态。
监听Worker B：类似地，Worker B更新库存状态后，若状态变为'fetched'，则可能需要再次查询用户活动，确保界面数据同步（这里简化处理，仅示例化触发逻辑）。

具体应用代码示例

上述代码片段已经展示了一个基本的框架，但实际应用中，你需要确保每个Worker (workerA.js 和 workerB.js) 内部实现了与各自服务器的WebSocket连接、发送消息逻辑，以及如何处理服务器响应并将其转换成statusUpdate消息发送给主线程。

工作流示例

开始：管理员打开后台管理页面，主线程初始化，创建两个Worker并与之建立消息监听。
用户活动：用户登录事件发生，服务器A通知Worker A，Worker A通过WebSocket收到更新，转发给主线程。
状态更新：主线程接收到Worker A的更新，更新globalStatus.serverA，然后指示Worker B去查询库存状态。
库存查询：Worker B向服务器B发起请求，获取最新库存状态，更新globalStatus.serverB。
循环交互：根据业务需求，继续监听和响应不同状态，比如库存变化可能需要再次触发用户活动的查询。

主线程 (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket与Worker交互示例</title>
</head>
<body>
<script>
    let globalStatus = { serverA: 'disconnected', serverB: 'disconnected' };

    function initWebSocketWorker(url, workerFile) {
        const worker = new Worker(workerFile);
        worker.addEventListener('message', function(e) {
            const { type, source, status } = e.data;
            if (type === 'statusUpdate') {
                globalStatus[source] = status;
                console.log(`主线程收到${source}状态更新:`, globalStatus);
                if (source === 'serverA' && status === 'updated') {
                    workerB.postMessage({ type: 'fetchStatus', source: 'serverB' });
                } else if (source === 'serverB' && status === 'fetched') {
                    workerA.postMessage({ type: 'checkStatus', source: 'serverA' });
                }
            }
        });
        worker.postMessage({ action: 'init', url });
        return worker;
    }

    const workerA = initWebSocketWorker('ws://your-server-a-url', 'workerA.js');
    const workerB = initWebSocketWorker('ws://your-server-b-url', 'workerB.js');
</script>
</body>
</html>

Worker A (`workerA.js`)

self.addEventListener('message', function(e) {
    const { action, url } = e.data;
    if (action === 'init') {
        connectToWebSocket(url, 'serverA');
    } else if (action === 'checkStatus') {
        // 实现检查服务器A状态的逻辑，如发送特定查询命令
        sendCheckStatusCommand();
    }
});

function connectToWebSocket(url, source) {
    const ws = new WebSocket(url);
    ws.addEventListener('open', function() {
        console.log(`Worker A 连接到${source}`);
        self.postMessage({ type: 'statusUpdate', source, status: 'connected' });
    });
    });
    ws.addEventListener('message', function(event) {
        const data = JSON.parse(event.data);
        // 假设处理数据逻辑，然后更新状态
        self.postMessage({ type: 'statusUpdate', source, status: 'updated' });
    });
    });
    ws.addEventListener('error', function(event) {
        console.error(`Worker A 与${source}的WebSocket连接发生错误`);
    });
    ws.addEventListener('close', function(event) {
        console.log(`Worker A 与${source}的WebSocket连接已关闭`);
    });
}

function sendCheckStatusCommand() {
    // 发送特定命令到服务器A查询状态
    // 示例代码略，实际应根据WebSocket实例ws发送数据
}
</script>

Worker B (`workerB.js`)

self.addEventListener('message', function(e) {
    const { action, url } = e.data;
    if (action === 'init') {
        connectToWebSocket(url, 'serverB');
    } else if (action === 'fetchStatus') {
        // 实现从服务器B获取状态的逻辑，如发送查询命令
        fetchStatusCommand();
    }
});

function connectToWebSocket(url, source) {
    const ws = new WebSocket(url);
    ws.addEventListener('open', function() {
        console.log(`Worker B 连接到${source}`);
        self.postMessage({ type: 'statusUpdate', source, status: 'connected' });
    });
    });
    ws.addEventListener('message', function(event) {
        const data = JSON.parse(event.data);
        // 处理数据逻辑，然后更新状态
        self.postMessage({ type: 'statusUpdate', source, status: 'fetched' });
    });
    });
    ws.addEventListener('error', function(event) {
        console.error(`Worker B 与${source}的WebSocket连接发生错误`);
    });
    ws.addEventListener('close', function(event) {
        console.log(`Worker B 与${source}的WebSocket连接已关闭`);
    });
}

function fetchStatusCommand() {
    // 发送特定命令到服务器B获取状态
    // 示例代码略，实际应根据WebSocket实例ws发送数据
}
</script>

详细说明

主线程中，initWebSocketWorker函数初始化每个Worker，传入WebSocket URL和Worker脚本名称。它还监听Worker发送的状态更新消息，并根据状态变化决定是否触发其他操作。
Worker A 和 Worker B中，分别实现了WebSocket连接的建立、消息监听、错误处理和关闭监听。connectToWebSocket函数负责初始化WebSocket连接并设置相关事件监听器。sendCheckStatusCommand和fetchStatusCommand是示例函数，表示向各自服务器发送特定指令，实际应用中需实现具体的命令发送逻辑。

哈哈要多学亿点点

关注

17
点赞
踩
10

收藏

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

分享到 QQ

分享到新浪微博

扫一扫