web-dev-qa-db-ja.com

ブラウザのタブ間でWebSocketを共有していますか？

ブラウザのタブごとではなく、ブラウザごとに1つのソケットが必要です。どうすればそれを達成できますか？有望だった共有ウェブワーカーについて読んだ。そのためのリファレンスもありがたいです。残念ながら、私の知る限り、共有WebワーカーはまだmozillaまたはInternet Explorerに実装されていません。では、この場合はどうすればよいですか？サーバー側のnode.jsに取り組んでいます。

javascripthtmlnode.jswebsocketweb-worker
36
singhsumit

この質問を見て、ついに共有ソケットを実装し、数日前にライブラリに追加しました。 IE6を含むほとんどのブラウザーで動作するようですが、Operaを除きます。 Operaの場合、アンロードイベントの代わりに定期的なチェックを使用できます。

https://github.com/flowersinthesand/portal/issues/21 で関連する問題を確認してください

クッキーを残す

  1. Cookieを設定して、共有ソケットがあることを通知します。
  2. ソケットが閉じたら、そのCookieを削除して、共有ソケットがないことを通知します。

参照してください https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-65

共有ソケットの共有と使用

  1. StorageイベントとlocalStorageの使用-localStorageは、値が設定および削除されたときにstorageイベントを発生させます。
    1. StorageEventおよびlocalStorageがサポートされていることを確認してください。
    2. キーでイベントをフィルターするストレージイベントハンドラーを追加します。ソケットのURLをキーとして使用しました
    3. ストレージ属性を削除するソケットのクローズイベントを追加
    4. 通知するには、前のキーを使用してデータをストレージに設定します

共有： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L531-568

共有の使用： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L851-89

  1. Window.openメソッドの使用-共有ウィンドウの名前がわかっている場合は、そのウィンドウの参照を取得して、そのプロパティにアクセスできます。
    1. すべてのブラウザはwindow.openメソッドをサポートしていますが、Chrome=のような一部のブラウザは、返されたウィンドウのプロパティへのアクセスを禁止しています。
    2. Name属性がキーであるiframeを取得または作成します。ソケットのURLを使用しましたが、IEでは、iframeタグのname属性でWord以外の文字を使用できません。
    3. IframeのcontentWindowは共有ウィンドウ参照です。各ウィンドウのリスナーを格納するためのコールバック変数を設定します。
    4. 通知するには、単にデータを使用してコールバックを呼び出します。 IE 8以下では、文字列のみを他のウィンドウの関数に渡すことができ、共有ウィンドウが破壊される可能性があることに注意してください。

共有： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L571-605

共有の使用： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-929

注意

  1. 上記の実装では、シグナリングはブロードキャストであるため、データはターゲットを示す必要があります。ターゲットプロパティを使用しました。親にはp、子にはcを使用しました。
  2. 追加の変数を使用してソケットを共有しました：オープン-共有ソケットが開いているかどうか、子-共有者のリスト。コードとコメントは、詳細を理解するのに役立ちます。

私の回答がお役に立てば幸いです。

8
Donghwan Kim

場合によっては、タブ間の通信にlocalStorageオブジェクトを使用しました。 localStorageオブジェクトには、同じOriginの別のタブまたはウィンドウに一部のデータが変更されたことを通知するイベントシステムがあります（ http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows -using-localstorage / ）。アイデアは、ソケットのあるタブにタイムスタンプと受信したデータをローカルストレージに書き込ませることです。タイムスタンプが古すぎる場合-おそらくソケットのあるタブが閉じられているため-別のタブがソケット接続を開始し、データとタイムスタンプを更新できます。

6
Alex

EventEmittersと同じインターフェースを使用してタブ間でデータを送信するために、localStorageを共有通信チャネルとして使用しています。サーバーに接続するタブを決定するリーダー選出アルゴリズムと組み合わせて、すべてのフォロワーイベントからすべてのソケットイベントをリーダータブにリレーしたり、その逆を行ったりします。最後に、リーダータブはすべてのイベントをサーバーに転送し、受信したすべてのイベントを他のすべてのクライアントにブロードキャストします。これがコードです：

5
Kaustubh Karkare

2016年の回答は、このブログに記載されている Shared Web Workers である必要があります。

https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/

5
vanthome

理想とはほど遠いですが、フラッシュローカル接続を使用して1つのWebSocket接続をセットアップし、それをタブや複数のブラウザーで共有できます。

詳細については、 http://help.Adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/LocalConnection.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6 を参照してください。

3
Tom

構築を開始する準備をしている設計について、私はまだこれを理論化しています。しかし、私は組み合わせることを考えています

-WebSockets -Local Storageおよび-Cross Window Messaging

私の理論では、すべてのタブですべてのページが読み込まれるときに実行されるソケットエンジンをJavaScriptで作成しますが、接続がすでに確立されている場合はシャットダウンします。

サイトへの最初のヒットで、GUIDを作成し、ローカルストレージに保存します。このGUIDは、ユーザーのPCへのブラウザー/ログインを一意に識別します。

ソケットサーバーが接続を受け入れると、そのGUIDが使用され、そのGUIDによる新しい要求は「999接続がすでに確立されています」などのようなものを返します。

1つが実行されると、タブ間で共有するデータをJSON blobに変換し、他のタブで受信したときにそれをオブジェクトに戻すことにより、他のタブにクロスウィンドウメッセージングをシードします。したがって、どのタブが接続であっても、ソケットサーバーですべての着信/発信メッセージを処理します。次に、クロスウィンドウメッセージングを介して他のタブで送受信します。そして理論的には、これはiframeやポップアップウィンドウでも機能するはずです。

このシステム全体は、私たちが構築しているCRMライクなシステムと、ライブチャットシステムおよびチケットボードのロードされたフォームの自動データ更新を実行します。

私の夢のシナリオは、ユーザーAがチケット1000を凝視し、ユーザーBがチケット1000を更新する場合、ユーザーAのチケットを更新したい場合、そしてユーザーAが更新前に変更を行った場合、吹き飛ばさないようにデータ移行ポップアップを提供したいです。ユーザーBが変更されました

-このレコードの編集中にユーザーBが競合する変更を行いました "ユーザーB：ファーストネーム->ボブ" [テイク] "ユーザーA：ファーストネーム->ロバート" [キープ]

3
Ryan Mann

現在、socket.ioを実装する方法に解決策があるように思わないでください。 this video、5番目のセグメントのGuillermo Rauchをチェックしてください。彼もそれを挑戦だと考えています。

1
almypal

https://github.com/nodeca/tabex を参照してください

クロス集計通信には追加のレイヤーが必要です。 TabexはFayeの使用例を持っています。他のwebsocketトランスポート（socket.ioなど）も同様に使用できます。

1
Vitaly

実際には、これらの問題のいくつかを回避することは困難です。たとえば、ネットワークが安定していないときに切断します。結局のところ、ページは、最初はさまざまなテキストドキュメント（RFCドキュメントなど）を交換することを目的としています。と不安定な転送アプローチ（私が思うにHTTPプロトコルをセットアップする最初の目的）

もちろん、それを解決するには、上記のように共有ワーカーを使用するか、共有部分と公開部分の情報をLocalStorageに保存することをお勧めします

LocalStorage の基本的な使用法の紹介へのリンクは次のとおりです

それが本当にあなたを願っていることを願っています！（実際にはまだです）

0
Chopping