關於 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 文件中所述。

但是，範例程式碼僅允許與最近的「父級」標籤/視窗進行通信，因為每次父級連接時它都會覆蓋通信埠引用。

相反，儲存連接埠數組，並在新的「父級」連接時將每個新連接埠新增至數組。

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']);
    }
});

然後，向所有父頁面發送訊息，如下所示：

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

以上是關於 SharedWorkers 的一些註釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！