12

I'm trying to detect if user has my website open in one tab, then opens it in another tab. This should then show a warning to the user on the newly opened tab.

Right now I'm sending a "keep alive" ajax call every second back to the server. This then logs the "last active" time in the database with a unique ID. When a new page is loaded it checks if that user (identified by a userID) was active within the last 2 seconds.

This feels very inefficient. It also doesn't perform well when the user refreshes the page. (which takes less than 2 seconds). I've made the 2 second check longer than the keepalive call to allow for slower connections.

Q) Am I going about this the right way or is there an easier way of doing this? I heard Gmail and Facebook might do something similar but I can't find the site function in which they do it.


Actual code uses lots of in-house functions so here's the general idea:

Pseudo code:

Page load;
[index] PHP: Save tabsessionid, userid, datecreated, lastactive, phpsessionid into database;
[index] JS: Every second, send tabsessionid to keepalive.php
[keepalive] PHP: Check if another session exists in the last 2 seconds
[keepalive] PHP:        If exists -> Return "-1"; else -> return "1";
[keepalive] PHP: Update tabsessionid's last active time.

I've tried some of the solutions here but warning the newer tab, not the older one seems to be the tricky part in terms of keeping down latency/time.

Community
  • 1
  • 1
Jamie Taylor
  • 4,709
  • 5
  • 44
  • 66
  • 1
    The first thing that crossed my mind: Why not use `sessionStorage` and keep track of tabs there. Listen on the `onbeforeunload` event to know when the user has closed a tab. – Johan Oct 11 '13 at 07:56
  • is `onbeforeunload` reliable enough? I read another solution somewhere saying that you couldn't guarantee it would fire in time. I should also have mentioned this needs to work cross-browser - another complication. Editing that into my post now. – Jamie Taylor Oct 11 '13 at 07:58
  • http://stackoverflow.com/questions/3185105/how-to-detect-the-windownew-tab-close-event That should probably be enough as far as the event goes. And sessionStorage is supported everywhere but ie7 if I recall correctly. – Johan Oct 11 '13 at 08:02
  • Sorry, when I said cross browser, I meant if a user opens a tab in Chrome, then a tab in Firefox, it would warn them in Firefox too. Trying to think of better ways to rephrase the question D: – Jamie Taylor Oct 11 '13 at 08:08
  • I think you are going about it the right way. IMO, it's one of those classic problems of trying to maintain state over the stateless nature of HTTP so the solution is always going to feel like hard work. But what you've suggested sounds like a very similar solution I've used for a similar problem I had in the past. – Dave B 84 Oct 11 '13 at 08:10
  • _“This should then show a warning to the user on the newly opened tab.”_ – and _why_ should it do that? What’s the reason for this warning? – CBroe Oct 11 '13 at 09:23
  • @CBroe The site this is used on includes a media editor, by editing the same content in two different windows, it increases the chance of conflicts. Think of this as a lock on editing until the initial process is complete. – Jamie Taylor Oct 11 '13 at 09:25
  • Well then I would advise the user to the problem _beforehand_, and leave checking to the time when the user _submits_ data – if the data on the server is still in the original state, then changes can be saved, otherwise they are rejected. – CBroe Oct 11 '13 at 09:28
  • Changes are submitted as they're made, live. But I'll try to see if I can build something like this in, thanks! – Jamie Taylor Oct 11 '13 at 09:29
  • You should keep version of the content, initially at 1, with each submited edit it increases. Submited edits must include version number, which is compared to the current one and the edit is refused if they don't match. It's also possible to make ajax calls to ask for the current version, and warn the user his version is outdated. – Marek Oct 11 '13 at 10:25
  • Brilliant suggestion, This is probably what we will do, simple too! If you'd like to post below, I'll accept your answer! – Jamie Taylor Oct 11 '13 at 10:30
  • @JamieTaylor I added a new answer. – Marek Oct 11 '13 at 12:49

4 Answers4

3

This is just an idea you have to work on:

javascript variables are local to the tab, cookies are common. You can give each tab an id and pass it around in links and forms*. This id would be stored in a cookie as the active tab id. if a tab finds it does not have and id set, and there's active tab id set, it can use another cookie to ask if there's still such tab with this id, or was closed (and sure, it has to regulary check for this "ask" cookie and answer). Exact implementation depends on what you want to do.

I hope I explained myself clear.

EDIT:

*There's window.name js property, you can use it as window id, and you don't need to pass it around.

Marek
  • 7,337
  • 1
  • 22
  • 33
3

You should keep version of the content, initially at 1, with each submited edit it increases. Submited edits must include version number, which is compared to the current one and the edit is refused if they don't match. It's also possible to make ajax calls to ask for the current version, and warn the user his version is outdated.

The sql update should look like this:

UPDATE table SET .... WHERE id = :id AND version = :version

Then check affected rows, if it's 0, there was a concurent update. This way you won't encounter race condition.

Marek
  • 7,337
  • 1
  • 22
  • 33
1

I think u should send data (maybe simple HEAD request) to server from every window with param, contains user uid and window id(random generated once on page load), and check if exists same uid with multiple window id;

Seem this is only way.

FrimInc
  • 31
  • 2
1

Shall I say that it is inappropriate solution to whatever your problem is?

Even if you find a dirty-workaround to prevent people from multi-tabbing on your site, you will not beat the incognito mode. If you do, please do a favour and file the bug report for that browser.

alandarev
  • 8,349
  • 2
  • 34
  • 43
  • The userID I'm recording is only available after the user logs into the site. That's what I'm using to identify people. – Jamie Taylor Oct 11 '13 at 08:00
  • Alright, thank you for clarification. This might help: http://stackoverflow.com/questions/368653/how-to-differ-sessions-in-browser-tabs – alandarev Oct 11 '13 at 08:08