关于 SharedWorkers 的一些注释

我最近需要在一个项目中实现一个共享工作线程。尽管它们非常有用，但在通常的地方找不到太多信息，因此这里有一些提示可能会帮助来自神秘未来的搜索者。

背景

sharedworkers 是一类特殊的 webworker，可以在多个选项卡、窗口或其他（常规）web worker 之间共享。

在我的应用程序中，我需要一个流程来轮询新的应用程序事件（例如，客户完成购买），并向登录的管理员（或更具体地说，那些登录的管理员）显示通知（使用通知 api）在选择接收通知的管理员中）。

管理员可以在多个选项卡或窗口中打开应用程序，因此让每个选项卡轮询新事件会很浪费。无论打开的选项卡或窗口有多少，我只希望每个事件有一个通知。

sharedworker 来救援！每个打开的选项卡或窗口共享一个工作程序，该工作程序在后台进行轮询，并且每个新事件仅显示一个通知。

使用vite创建共享worker

第一个挑战是在我基于 vite 的设置中加载共享工作线程。

如果您在开发模式下运行 vite，vite 会从不同的域和端口（例如 http://[::1]:5173/）提供脚本，这是行不通的，因为共享工作线程必须遵守同源策略。

我为网络工作者尝试了各种 vite 解决方法：

• 由于同源政策要求，官方的 vite web worker 方法不适用于 共享 worker。
• 共享工作线程不支持 blob url。
• 将工作线程内联为 base64 字符串不起作用，因为浏览器将它们视为不同的工作线程：对于网络工作线程来说很好，但对于共享工作线程则不然。

最后，我创建了一条新路由来从开发中的资源目录或暂存和实时环境中的构建目录提供脚本。

route::addroute('get', '/notifications-shared-worker.js', function () {
    // if in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationwatcherworker.js'), ['content-type' => 'text/javascript']);
    } else {
        // otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationwatcherworker.js'), ['content-type' => 'text/javascript']);
    }
});

然后我使用该路由作为 url 创建共享工作线程：

const worker = new sharedworker('/notifications-shared-worker.js');

调试共享工作线程

您很快就会发现共享工作线程中的任何语法或运行时错误都不会出现在您的开发工具中。也不会有任何控制台记录/警告/信息调用。

这个很简单，将 chrome://inspect/#workers 粘贴到您的 url 栏中，找到共享工作人员并单击“inspect”。现在您有了一个专门用于共享工作人员的开发工具窗口。

与主选项卡或窗口通信

要与“父”选项卡进行通信，请使用 port.postmessage 方法，如 mdn sharedworker 文档中所述。

但是，示例代码仅允许与最近的“父级”选项卡/窗口进行通信，因为每次父级连接时它都会覆盖通信端口引用。

相反，存储端口数组，并在新的“父级”连接时将每个新端口添加到数组中。

const ports = [];

onconnect = (e) => {
    // get the port for this new connection
    const port = e.ports[0];
    // add it to our array of ports
    ports.push(port);
...
}

然后，向所有父页面发送消息，如下所示：

ports.forEach(port => port.postMessage({ 
    message: "Hello, world!", 
    flavor: "vanilla" 
}));

以上就是关于 SharedWorkers 的一些注释的详细内容，更多请关注其它相关文章！