サイト上のイベントに関する通知システム（VKontakteオーディオプレーヤーの例）

ご挨拶。

VKontakteアカウントを持ち、音楽を聴く人の多くは、あるタブでトラックをオンにしてから、別のタブで2番目のタブをオンにすると、最初のトラックが一時停止することに気付いたと思います。 さまざまな通知（新しいメッセージ、コメント/投稿への返信など）でもほぼ同じことが発生します。アクティブなタブにのみ表示されます。 これがどのように機能し、彼らのサイトでこれを行う方法に興味がある人は、habrakatを歓迎します。

理論

そして、これらはすべてHTML5 Local Storageを使用して実装されます 。 同じオーディオプレーヤーを使用してください。 Local Storageでトラックを開始すると、ウィンドウ識別子とプレーヤーのステータスが保存されます（たとえば、「プレイ」）。 （同じドメインの）別のウィンドウで別のトラックが開始すると、すべてのタブでプレーヤーが一時停止します。 などなど。

練習する

イベントデータを1つのキー、たとえば「notifier_event」に保存します。 そこで、次の形式の特定のオブジェクトの文字列表現を書きます。

var evt = { 'notifier_id': 'aAr63gd2', 'event': 'audiostate', 'event_data': {'state': 'play'}, 'event_ts': Math.round(new Date().getTime() / 1000) }; 

notifier_idフィールドは、イベントの送信元のタブのIDです。 「event」はイベントの名前、「event_data」はイベントデータ、「event_ts」はUnixタイムスタンプです。 キー値を変更するイベントが常に処理されるように、イベント時間を指定する必要があります。

イベントを受信すると、必要なハンドラーを開始し、受信したイベントに関連するすべてのアクションを実行するだけです。 それだけです:)

リスト

イベント処理

 /** * Binds storage key change event * @return void **/ Notifier.prototype.bindEvent = function() { if (!this.isAvailable()) return false; var t = this; $(window).bind('storage', function(e) { var evt = e.originalEvent; if (evt.key == t.m_localStorageKey) //    -   ,   t.handleLsEvent(JSON.parse(evt.newValue)); }); }; /** * Handles changes for certain localStorage event * @param Object evt **/ Notifier.prototype.handleLsEvent = function(evt) { switch (evt.event) { case 'audiostate': this.handleAudioStateEvent(evt); //    play/pause  break; } }; /** * Handles audiostate event * @param Object evt * @return void **/ Notifier.prototype.handleAudioStateEvent = function(evt) { if (evt.notifier_id != this.getNotifierId()) { if (evt.event_data.state == 'play') { //  -    ,      player.pause(); } } }; 

デモ

ここに例があります- トラック1 、 トラック2 。

ソースコード

ソースはGitHubリポジトリからダウンロードできます。

デモで録音された音声は、 Attribution-ShareAlike Licenseに基づいて配信されます。