Detecting Unique Browser Tabs

Question

On every page of my sites, I am using AJAX to poll the server and retrieve a list of messages. The server maintains a list of messages and the SessionId (I'm in an ASP.NET environment, but I feel like this question is applicable to any server side technology) that the message is intended for. If a message is found for the particular SessionId, it is returned to the client side script. I use a JavaScript library to create a notification (using noty, a Jquery Notification Plugin). Once it returns a particular message, the server discards that message.

This works well if the user only has a single tab/window open for a particular site. However, let's say they have two open and they do something that causes a warning message to be generated. I have no control over which tab the notification goes to, so the user may not end up seeing the warning message.

Is there a way of uniquely identifying a browser tab? Then I could pass this as one of the parameters in my AJAX call.

Answer 1

Firstly, polling doesn't seem good mechanism. It might hit your server down when you have large number of active users. Ideally you should return a message in the response to the request that was result of invalid action.

Still below solution might work for you. It is inspired by the reply of @SergioGarcia.

Keep a hidden input just before the end of your form tag, which stores a unique ID for identifying a tab uniquely. You will store the messages on server session against unique tabID,

<input type="hidden" id="hiddenInputTabId" value="<%=getValue()%>" />

and then define getValue.

function string getValue() {
    var v = getValueFormBodyOrAccessValueDirectlyByMakingInput_a_ServerSideControl();
    if (string.IsNullOrWhiteSpace(v)) {
        return Guid.NewId();
    } else {
        return v;
    }
}

Because it is a hidden input you should get it's value in the POSTed form body, and for ajax requests below snippet should take care of sending that value in header which you can access on server side.

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader("tabId", $('#hiddenInputTabId').val());
    },
});

Same header can be check while returning the response to your polling requests and only respond message available against the provided tabId should be responded.

Answer 2

You can add a query string parameter called tabId and control it's binding to tab using javascript.

There is a functional prototype below:

$(function () {

  // from: https://developer.mozilla.org/en-US/docs/Web/API/Window.location
  function getQueryStringParameter (sVar) {
    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
  }

  // from: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
  function newGuid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
    });
  }

  window.tabId = getQueryStringParameter('tabId');

  // tabId not defined, reload the page setting it
  if (!window.tabId) {
    window.tabId = newGuid();
  }

  // on click set the tabId of each link to current page
  $(document).on('click', 'a', function (e) {
    var $this = $(this);
    var newLocation = $(this).attr("href");

    // In page links
    if (newLocation.match(/^#.+$/)) {
      return;
    }

    // Outbound links
    if (newLocation.match(new RegExp("^https?")) && !newLocation.match(new RegExp("^https?://" + window.location.host))) {
      return;
    }

    // Insert tab id
    if (newLocation.match(/(\?|&)tabId=[0-9a-f-]+/)) {
      newLocation.replace(/(\?|&)tabId=[0-9a-f-]+/, (newLocation.indexOf('?') == -1 ? "?" : "&") + "tabId=" + window.tabId);
    } else {
      newLocation += (newLocation.indexOf('?') == -1 ? "?" : "&") + "tabId=" + window.tabId;
    }

    window.location.href = newLocation;
    e.preventDefault();
  });
});

If you enter a page in your application without setting the tabId parameter on query string, it will be set to a new UUID (Guid).

When the page has a tabId parameter on query string, it defines the window.tabId variable inside your page and you can use that in your application.

When the user click on any link in your page, a javascript event will be triggered and the link url will be redirected to match the current tabId. An right click to open in new tab or a middle click will not trigger that event and the user will be sent to a new tab without the query string parameters, so the new page will create a new tabId in that page.

You can see it working here: http://codepen.io/anon/pen/sCcvK

Answer 3

You can do it by generating a unique tab id with javascript by loading your client.

I strongly recommend you to use something for intertab communication, like intercom.js, which can broadcast the messages from a single tab with a single connection to every other tabs. Intertab works with socket.io, which has long polling fallback, so it may be good in your current system as well. I agree that polling is a poor choice, and you should use websockets instead.

If you use ZMQ on the server, then in the browser you can use NullMQ either (for websockets ofc). I think it does not have intertab support, so you should make your own intertab solution to make it work. It is not so hard to write such a system, you need only a common storage, for example localStorage, but it can be even cookie... If you don't have a storage event, you have to ping that storage for changes with setInterval. You have to store there the messages, and which tab broadcasts them (probably in a semaphore) and when was the last time it pinged the storage. After that you can keep each tab in sync with the others, or by using a unique tab id, you can send customized messages to any of the tabs. If the broadcast tab has a storage timeout (it did not ping the storage for a long while), then it is probably closed, so you should assign the broadcast service to another tab.

Answer 4

So what I ended up doing was changing how my notification framework functioned in order to prevent the need for identifying unique tabs. It's just too hard to layer information on the stateless web.

Instead of using Ajax to pump messages out to the client instantly, I build them up on each page into a List<Message> property. On PreRender I render them to the client with ClientScript.RegisterStartupScript(). But if I need to send the user to another page, I started using Server.Transfer() instead of Response.Redirect() instead so that it will preserve the message queue. The new page checks the old page to see if it exists and if is the correct Type. If it is the correct type, I cast it and retrieve the message queue from the old page and add them to the new page's queue. And since Server.Transfer() doesn't update the URL on the client, I also added a JavaScript function to manually push the state to the URL in supported browsers.

I know I took this in a little different direction than I did on the question, but I think I had been approaching it wrong in the beginning.