Webソケット、Webワーカー、サービスワーカーの違い-CSSチュートリアル-php.cn

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

WebSocket、Webワーカー、サービスワーカー...これらの用語は、読んだり聞いたりする際に遭遇したかもしれません。たぶんすべてではなく、少なくともそのうちの1つ。フロントエンドの開発に精通していても、それらが何を意味するかを知る必要がある可能性が高くなります。または、あなたは私のようで、時には混乱しているかもしれません。これらの用語は非常によく似ており、健全で、簡単に混乱します。

それらを分解して、ウェブケット、Webワーカー、サービスワーカーを区別しましょう。詳細に深く入り、詳細な研究を行い、それぞれを自分で体験する代わりに、少しのアシスタントのように、次回レビューする必要があるときに収集することができます。

Quick Reference

迅速な比較と比較のために、高度な概要から始めます。

websockets

WebSocketは双方向通信プロトコルです。あなたと、当事者のいずれかが電話を切ることを決定しない限り、終わらない友人との間の絶え間ない電話と考えてください。唯一の違いは、あなたがブラウザであり、あなたの友人がサーバーであることです。クライアントはサーバーにリクエストを送信し、サーバーはクライアントのリクエストを処理することで応答し、その逆も同様です。

通信はイベントに基づいています。 WebSocketオブジェクトを作成してサーバーに接続し、サーバー間のメッセージがイベントをトリガーして送信および受信します。

これは、初期接続が確立されると、クライアントサーバー通信があり、接続が開始され、クライアントまたはサーバーがCloseEventを送信して終了することを選択するまでアクティブなままであることを意味します。これにより、WebSocketsは、クライアントとサーバー間の継続的かつ直接的な通信を必要とするアプリケーションに最適です。リストチャットアプリケーションを一般的なユースケースとして見た定義の多く - メッセージを入力し、サーバーに送信し、イベントをトリガーし、サーバーはサーバーを繰り返しpingすることなくデータで応答します。

次のシナリオを検討してください。出て行って、Googleマップを開くことにしました。 Googleマップがどのように機能するかをすでに知っているかもしれませんが、そうでない場合は、アプリに接続してどこへ行っても追跡すると、自動的に場所を見つけます。この接続がアクティブである限り、リアルタイムのデータ転送を使用して場所を追跡します。これは、データを最新の状態に保つために、ブラウザとサーバーの間の永続的な双方向の会話を確立するWebSocketです。リアルタイムスコアのあるスポーツアプリケーションは、この方法でWebSocketを使用する場合もあります。

WebSocketとWebワーカー（および後で見るサービスワーカー）の最大の違いは、DOMに直接アクセスできることです。 Webワーカー（およびサービスワーカー）は別々のスレッドで実行されますが、WebSocketはメインスレッドの一部であり、DOMを操作できるようにします。

SocketCluster、Asyncapi、Cowboy、Websocket King、チャンネル、Gorilla WebSocketなど、WebSocket接続の確立と維持に役立つツールとサービスがあります。 MDNには、他のサービスを含む実行リストがあります。

その他のwebsockets情報

WebSocketsの導入 - ソケットをWeb（web.dev）
電力使用量とウェブサイト（Chris Coyier）
WebSocket API（MDN Docs）
最新のブラウザサポート（Caniuse）

webワーカー

DOMを変更しながら、多くの複雑な計算を実行する必要がある状況を検討してください。 JavaScriptは、複数のスクリプトを実行し、変更しようとしているユーザーインターフェイスと実行している複雑な計算を破壊できるシングルスレッドアプリケーションです。

これは、ウェブワーカーが出てくる場所です。

Webワーカーを使用すると、スクリプトがバックグラウンドで個別のスレッドで実行され、スクリプトがメインスレッドで互いにブロックされないようにします。これにより、ユーザーインターフェイスのレンダリングに影響を与えることなく、これらの操作をバックグラウンドの個別のスレッドで実行できるため、多くの操作を必要とするアプリケーションのパフォーマンスを強化するのに理想的です。しかし、WebSocketとは異なり、Webワーカーが独自のスレッドでメインスレッドの外で走るため、彼らはDOMへのアクセスがあまり得意ではありません。

Webワーカーは、ワーカーオブジェクトを使用してタスクを実行するためにスクリプトファイルを実行するオブジェクトです。私たちが労働者について話すとき、彼らは3つのタイプのいずれかに分類される傾向があります：

特別労働者：特別労働者は、それを呼ぶスクリプトによってのみアクセスできます。マルチスレッドスクリプトなど、典型的なWebワーカーのタスクを実行します。
株式労働者：株式労働者は、献身的な労働者の反対です。複数のスクリプトでアクセスでき、ワーカーと同じドメインに存在する限り、Webワーカーが実行するタスクを実際に実行できます。
サービスワーカー：サービスワーカーは、アプリケーション、ブラウザー、サーバー間のネットワークプロキシとして機能し、ネットワークがオフラインであってもスクリプトを実行できます。これについては、次のセクションで説明します。

その他のWebワーカー情報

「メインスレッドからオフ」（Chris Coyier）
2021年のWeb労働者の状態（Chris Coyier）

サービスワーカー

開発者として私たちが制御できないものがいくつかあり、そのうちの1つはユーザーのネットワーク接続です。ユーザーが接続するネットワークはそれ自体です。アプリケーションが最適化するように最善を尽くすことができ、使用される接続で最高のパフォーマンスを得ることができます。

サービスワーカーは、アプリケーションのパフォーマンスを徐々に強化するためにできることの1つです。サービスワーカーは、アプリケーション、ブラウザ、サーバーの間にあり、安全で別々のスレッド接続を提供して、Webワーカーのおかげでバックグラウンドで実行されます。前のセクションで学んだように、サービスワーカーは3種類のWebワーカーの1つです。

では、なぜアプリケーションとユーザーのブラウザの間にあるサービスワーカーが必要なのですか？同様に、ユーザーのネットワーク接続を制御することはできません。何らかの未知の理由で接続が中断されているとします。これにより、ブラウザとサーバー間の通信が中断され、データがやり取りされないようになります。サービスワーカーは接続されたままであり、ネットワーク接続が失われた後でも、リクエストを傍受してタスクを実行する非同期プロキシとして機能します。

これは、一般的に「オフラインファースト」開発と呼ばれるものの主な原動力です。ネットワークの代わりにローカルキャッシュにアセットを保存し、ユーザーがオフラインである場合は重要な情報を提供し、必要に応じてユーザーが使用できるようにコンテンツをプレイし、ネットワークエラーにフォールバックを提供できます。それらは完全に非同期ですが、WebSocketとは異なり、独自のスレッドで実行されるため、DOMにアクセスできません。

サービスワーカーのもう1つの重要なことは、アプリケーションからのすべての要求と応答を傍受することです。したがって、それらにはいくつかの安全リスクがあり、最も顕著なのは相同戦略に従います。したがって、これは、サービスワーカーをCDNまたはサードパーティサービスから実行できないことを意味します。また、安全なHTTPS接続が必要です。つまり、それらを実行するにはSSL証明書が必要です。