[Html 5] SharedWorkerのケーススタディ

Html 5では、機能全体の動物園が既に飼育されており、「Html 5」全体を完全に知っている人はほとんどいないと思います。 SharedWorkerについて聞いたことがある人は、1パーセントに満たないと思います。







これは何ですか





これは一種のセッションであり、クライアント上でのみ実行されます。 さらに、単なるリポジトリとしてのセッションではなく、生きたプロセスとしてのセッション。



なぜこれが必要なのでしょうか?





これらを使用して、同じサイトのタブ間で通信できます。



また、ウェブサイトは、サーバーからブラウザに直接更新をクライアントにプッシュする、いわゆる「プッシュ」がある場合にのみ、モダンと見なすことができると思います。 このようなプッシュを実装するには、ページでWebSocket接続を確立する必要があります。 同時に、サイトの各タブはWebSocketを介して独自の接続を作成します。



これにより、サーバーの負荷が増加し、接続自体に時間がかかります(Chromeでは、localhostのNode.jsで数秒かかります)。 クライアントのブラウザのすべてのタブが1つの共通のWebSocket接続を使用するようにすることで、負荷を軽減することができます。 そして、これらのSharedWorkersはこれを助けてくれます。



どのように機能しますか?





先日、私はどういうわけかこれがすべてどのように機能するかを理解しました(このような「デバッグ」を簡単なアラートにできないという事実によって複雑になります。誓います)。 このことで作業を簡素化するために、 共有worker.jsというライブラリを書きました。



その隣には、タブ間の通信を実装する簡単な例(サンプルフォルダー)とプッシュ実装の例(websocketサンプルフォルダー)があります。 Chromeでは、すべての例はWebサーバーの下からのみ実行されます。 ハードドライブからそれらを開くだけでは機能しません(Chromeの欠陥、ChromeのローカルファイルへのAjaxも失敗します)。 Webソケットの例では、 npm install ws



およびnode server.js



が必要です。



どこで機能しますか?




ChromeとOperaで動作します。 Firefoxでは機能しません。 詳細



何がそんなに少ないの?





このトピックをグーグルで検索しようとしても、何も見つかりませんでした。 また、通常の例は見つかりませんでした(軽度に言えば、 見つかったのは汚いだけで、「含める」という言葉はありません。それなしでは、実際のアプリケーションを書くことはできません-単なる学術的な例です)。 現在、求職者はGoogleで検索できます。



リンクの詳細





この場合、ajaxのサイトでナビゲーションを記述する必要があります(たとえば、Vkontakteが行った方法など)。たとえば、サイトでタブを開き、通常のリンクを使用して同じサイトの別のページに移動すると、現在のSharedWorkerは破棄され、新しいSharedWorkerが作成されます。 これは論理的です。同じサイトでも新しいURLに切り替えると、リダイレクト先のページが最初に破棄され、次にリダイレクト先のページが作成されます。



APIの欠点





現在のApi SharedWorkerには「接続」イベントがありますが、「切断」イベントはないため、共有worker.jsライブラリ内のピア配列は閉じたタブをセルフクレンジングできません-開いたままであるとみなされます。 これはエラーにはなりません。現在のApi SharedWorkerの問題です。



All Articles