網絡插座，網絡工作人員和服務工作者之間的區別-css教學-PHP中文網

The Difference Between Web Sockets, Web Workers, and Service Workers

WebSockets、Web Workers、Service Workers……這些術語你可能在閱讀或聽聞中遇到過。也許不是全部，但至少其中一個。即使你對前端開發很熟悉，也很有可能需要查找它們的含義。或者你可能像我一樣，有時會把它們混淆。這些術語看起來和聽起來都非常相似，很容易混淆。

讓我們一起分解它們，區分 WebSockets、Web Workers 和 Service Workers。不是深入細節，進行深入研究並親身體驗每一個——更像是一個小助手，以便下次需要復習時可以收藏。

快速參考

我們將從高級概述開始，進行快速比較和對比。

WebSockets

WebSocket 是一種雙向通信協議。把它想像成你和朋友之間持續不斷的通話，除非其中一方決定掛斷，否則不會結束。唯一的區別是你就是瀏覽器，你的朋友是服務器。客戶端向服務器發送請求，服務器通過處理客戶端的請求做出響應，反之亦然。

通信基於事件。建立 WebSocket 對象並連接到服務器，服務器之間的消息會觸發發送和接收它們的事件。

這意味著，當建立初始連接時，我們有一個客戶端-服務器通信，其中連接被啟動並保持活動狀態，直到客戶端或服務器選擇通過發送 CloseEvent 來終止它。這使得 WebSockets 非常適合需要客戶端和服務器之間持續且直接通信的應用程序。我見過的許多定義都將聊天應用程序列為常見用例——你鍵入消息，將其發送到服務器，觸發事件，服務器在無需反复 ping 服務器的情況下使用數據進行響應。

考慮以下場景：你正在出門的路上，決定打開 Google 地圖。你可能已經知道 Google 地圖是如何工作的，但如果你不知道，它會在你連接到應用程序後自動找到你的位置，並在你走到哪裡都跟踪它。它使用實時數據傳輸來跟踪你的位置，只要此連接處於活動狀態。這是一個 WebSocket，在瀏覽器和服務器之間建立了持久性的雙向對話，以保持數據的最新狀態。具有實時得分的體育應用程序也可能以這種方式使用 WebSockets。

WebSockets 與 Web Workers（以及我們稍後將看到的 Service Workers）之間最大的區別在於它們可以直接訪問 DOM。而 Web Workers（和 Service Workers）在單獨的線程上運行，WebSockets 是主線程的一部分，這使得它們能夠操作 DOM。

有一些工具和服務可以幫助建立和維護 WebSocket 連接，包括：SocketCluster、AsyncAPI、cowboy、WebSocket King、Channels 和 Gorilla WebSocket。 MDN 有一個包含其他服務的運行列表。

Web Workers

考慮一種情況，你需要執行大量複雜的計算，同時還要更改 DOM。 JavaScript 是一種單線程應用程序，運行多個腳本可能會破壞你試圖更改的用戶界面以及正在執行的複雜計算。

這就是 Web Workers 發揮作用的地方。

Web Workers 允許腳本在後台的單獨線程中運行，以防止腳本在主線程上相互阻塞。這使得它們非常適合增強需要大量操作的應用程序的性能，因為這些操作可以在後台的單獨線程上執行，而不會影響用戶界面的呈現。但它們不太擅長訪問 DOM，因為與 WebSockets 不同，Web Worker 在其自己的線程中主線程之外運行。

Web Worker 是一個對象，它通過使用 Worker 對象來執行腳本文件以執行任務。當我們談論 worker 時，它們往往屬於以下三種類型之一：

專用 Worker：專用 worker 只能由調用它的腳本訪問。它仍然執行典型 Web worker 的任務，例如其多線程腳本。
共享 Worker：共享 worker 與專用 worker 相反。它可以被多個腳本訪問，並且實際上可以執行 Web worker 執行的任何任務，只要它們存在於與 worker 相同的域中。
Service Workers：Service worker 充當應用程序、瀏覽器和服務器之間的網絡代理，允許腳本即使在網絡脫機時也能運行。我們將在下一節中介紹這一點。

Service Workers

有一些事情是我們作為開發人員無法控制的，其中一件事情是用戶的網絡連接。用戶連接的任何網絡都是它本身。我們只能盡最大努力優化我們的應用程序，以便它們在任何碰巧使用的連接上都能獲得最佳性能。

Service Workers 是我們可以做的一些事情之一，以逐步增強應用程序的性能。 Service worker 位於應用程序、瀏覽器和服務器之間，提供安全的後台運行的單獨線程連接，這要歸功於——你猜對了——Web Workers。正如我們在上一節中學到的那樣，Service Workers 是三種 Web Workers 之一。

那麼，你為什麼需要一個位於你的應用程序和用戶的瀏覽器之間的 service worker 呢？同樣，我們無法控制用戶的網絡連接。假設連接由於某種未知原因而中斷。這將中斷瀏覽器和服務器之間的通信，阻止數據來回傳遞。 Service worker 保持連接，充當能夠攔截請求和執行任務的異步代理——即使在網絡連接丟失後也是如此。

這就是通常所說的“離線優先”開發的主要驅動力。我們可以將資產存儲在本地緩存中而不是網絡中，如果用戶離線，則提供關鍵信息，預取內容以便用戶需要時可以使用，並提供對網絡錯誤的回退。它們是完全異步的，但與 WebSockets 不同，它們無法訪問 DOM，因為它們在自己的線程上運行。

關於 Service Workers 的另一件重要事情是它們會攔截來自你的應用程序的每個請求和響應。因此，它們有一些安全隱患，最值得注意的是它們遵循同源策略。因此，這意味著不能從 CDN 或第三方服務運行 service worker。它們還需要安全的 HTTPS 連接，這意味著你需要 SSL 證書才能運行它們。