Communication between multiple user opened windows with same url

Question

I want to place a music player at the homepage (even maybe every page within same application/domain) and play songs on document load. But the user may open more than one instance of the page that contains this player at the same time.

So, if the user opened the windows w1, w2, w3 with same url, how to let only one window play songs at a time? For example, w1 plays, w2 and w3 do not. And when w1 is closed, w2 and w3 should be able to find this event, then elect for playing songs, and only the winner will be able to play songs.

Update：according the giving hints, I think this should be able to work:

// LOGICAL CODE
// Cookie["playerId"] - record which player instance is running
// Cookie["lastRefreshTime"] - record the running player last update time
//       when running player instance is destoried (window is closed), and timeout,
//       the left player instances should be able to modify Cookie["playerId"]  for running.
function Palyer(){
  this.playerId = randomString();
  var _this = this;
  this.refreshHandle = setInterval(function(){
    // non-running players to check whether timeout, then competing
    if( Cookie["playerId"] != _this.playerId 
        && sysTime - Cookie["lastRefreshTime"] > 1000*2){ 
      // competing for run, may have small probability going wrong
      Cookie["playerId"] = _this.palyerId; 
    }

    // running player to update timestamp for avoding timeout
    if( Cookie["playerId"] == _this.playerId){
      Cookie["lastRefreshTime"] = sysTime;
      if (!_this.isInitialized()) {
        _this.init();
      }
    }
  }, 1000);
  ...
}
var player = new Player();

Short answer, you can't! Long answer, if the new windows are opened by the first window you have some control, and can pass on some sort of flag to the opened windows, if the user just decides to randomly open the same page ten times, there's not much you can do about it, except maybe setting a cookie or using local storage to see that the page has already been opened, but then you'll have to remove that value again on window.unload etc. and it all gets very unreliable fast. — adeneo, Mar 31 '12 at 02:32

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

actually, you can do a workaround with cookies.

you check the cookies on load if you set a cookie that says a player is open.
you can declare a window closed cookie using onbeforeunload or onunload.
you can let the other windows poll the cookie value to check if a window was closed. then they can pick up from there.

but the problem is the accuracy of the cookie as well as timing.

what if the browser "skipped a beat" and forgot to declare a closed window?
what if the other tabs picked-up the close value event at the same time? both players will play?
what if the browser crashed and the window status cookie is left "open". how would you know if you came from a crash?

another way you can do this is via storage events using localStorage.

One LocalStorage per web application, with a max size of 5MB, is available for a given browser and is shared by all windows and tabs of that browser... If you run MyWebApp in multiple tabs and windows, they all share the same LocalStorage data , subject to a max limit of 5MB.(Chrome)

When data is added to, modified, or removed from LocalStorage or SessionStorage, a StorageEvent is fired within the current browser tab or window. That Storage event contains the storage object in which the event occurred, the URL of the document to which this storage applies, and both the old and the new values of the key that was changed. Any listener registered for this event can handle it.

but, the caveat, besides that it's an HTML5 tech:

Although the HTML5 spec calls for Storage events to be fired in all tabs of the same browser or all windows of the same browser, few browsers currently implement this.

Using timeout mechanism may resolve most problems you list here. I updated question and added a logical code. HTML5 may still a little far for using. — btpka3, Mar 31 '12 at 10:59

score 1 · Answer 2 · answered Mar 31 '12 at 02:39

1

@adeneo answered it: you have to use cookies to manage who has the power to play. It is complex but possible.

answered Mar 31 '12 at 02:39

Leonel Martins

2,713
1
21
24

Communication between multiple user opened windows with same url

2 Answers2