Detecting Browser Close or Tab Close without Impacting other functionality - javascript

I want to invalidate the session when the user close the tab or browser in my GWT Application. I saw lot of threads Confirm Browser Exit in GWT but didn't get the solution which i am looking for. This should not fire when user refresh the browser(it shouldn't invalidate the session) and even it should not fire when user navigate to other screen or download any file.Any Idea?

There is no way to tell the difference between closing a window or navigating away in various ways. You may be able to get around refreshing a page issue by creating a timer on the server side to see if a user requests your page again within a certain period of time, but it's not clear what benefits you get.
From a user experience view, you should offer a Sign Out (Log out) button or something similar, so a user can clearly indicate an intent to leave your app. Also, you can set an inactive timeout on your session, to invalidate session after a period of inactivity.

Related

What is the most reliable event to listen for when window is closed

I am building an online game, and one feature involves being able to put up a game request on the site so that other users can see it, and maybe accept it. For this site, I want to remove the game request of a user when they close the page, by either navigating to another page on the site, closing it altogether, following a link, etc. so that other users who are still online don't respond to a dead request.
The issue is, I was planning on writing code to do that and put it in an event listener that listens for the closing of the page, but apparently, some of the events have issues with them, according to MDN:
Unload/beforeunload: This event apparently does not fire reliably on mobile, especially when the user opens another app without closing the browser, and closes the browser with the app manager afterward. I imagine this could lead to problems on the phone, but this is my default option for now.
Visibility: MDN's suggested alternative to unload, the change in visibility event would fire when a mobile user opens another app, but it also fires when they open another tab in the browser. This would mean they would have to sit there looking at the lobby page until someone accepted their game request, which is not ideal.
Disconnection: Another thing I was thinking about was listening to the disconnection event fired by a socket (I am using socket.io to manage user connections) but I imagine that a disconnection due to a bad network can also fire this event, even if it is momentary. A user would then have to remake their request; also not ideal.
These are my main 3 options for now, and my question is: Is there an event that fires when a page is closed that I can listen to, that works like unload but also accounts for mobile users' issues as mentioned above? Or maybe something like the visibility change, but does not fire when they go to another tab? Or something else entirely that sidesteps both of these issues.
Use window.onbeforeunload. This allows you to do a few actions before the window either refreshes or is closed. For instance, you could store something to localStorage or a cookie to store that something happened. The reason why this maybe hasn't been reliable is because your script has to be quick. You only have a certain amount of time before the page unloads. Here is an example of something you could do.
window.onbeforeunload = function() {
document.cookie = 'goodbye=true';
}
Then you could check for this cookie when the page loads. If your page is on mobile, the browser may do nothing when a cookie is set or something is set to localStorage because of privacy measure. This simply is how it is.
You could use a combination of the different options. Assuming you can reliably detect whether they are on mobile or not. If they are on mobile, use the visibility event. If they are on desktop, use the unload event.
Another option is on the visibility change you could send a "I might be disconnecting" message and then use a setTimeout() to send a follow up message 5 seconds later saying "never mind!" Then on the server side you could set a "disconnect timeout" that waits 10 seconds for the "never mind!" message. If it doesn't receive it within 10 seconds, then drop the user and assume they disconnected.
I would use beforeunload but also prepare for the unreliability. When it works, it removes the request like you describe. Then also make it up so when a user responds to the game request, it pings back to the original user. If the ping fails, say something like "oops they left." If the ping goes through, query the original user "you got a response. do you still want to play?"

Best way to transport JavaScript data between tabs/windows

I have a server that pushes a notification using SignalR to a user. The current setup on JS is the tab with current focus will get the notification (all other tabs are on pause since they’re not on focus). Once the user switches tabs, they won’t see any notification since the first tab already received it.
Question: What’s the best practice for other tabs to see the notification (if it hasn’t been processed yet by the first tab)? Is it to create a session on the user end and track it between browsers? Or possibly keep it on the server and it’ll keep pushing it to every tab until it’s processed by one of the tabs?
You can use window.onfocus and window.onblur to detect when a user visits tab.:
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

Socket.IO with multipul tabs of browser

I am using socket.io in my node.js application to give real time experience to my users. But due to leak of my experience with socket.io, I have some doubt with browser tab management. Let me explain first.
My website does not allowed login to user from multipul browser at a time. means If someone login from one browser, and then try to login from another browser, I have to kill previous login session. Means my socket.io emit messages to previous browser's all tab for logout, but my second browser's all tab should not get message for logout. How Do I do this?
Another question is I want to count distinct logged in users for my deshboard. But with multipul tabs, count is showing wrong figger. (eg. Single user accessing website from single browser but from 2 or more tabs, on server, socket client is showing each connection for tab, Here I need just one count. How Do I get it?
If some one has example/sample regarding above user case, please share it, so new coumer will gets help from it.
thanks

How to detect/stop a user opening a new browser window?

This is in context to an ASP.Net application. The application makes use of a specific data which is set for a page. After this data has been set all the operations from this page onwards use the set data.
The problem is that if the user opens another tab with a competing data it overwrites the older data for the same session and for the same user which invalidates the operations on the first tab.
I know the suggested way is to refactor the code to remove such coupling but that is not possible. Here's another thread that discussed this but didn't specify any solutions other than refactoring the code (http://stackoverflow.com/questions/632062/ways-to-detect-ctrl-n-or-when-a-user-opens-a-new-window)
So, how can I detect (and notify the user) or stop the user from opening another tab - through javascript/Jquery?
You could set a session variable isActive and set it to true, along with all the other session data when the user opens the application the first time. After this, if the user opens another tab, check to see if isActive is true. If it is, inform the user and don't set the data again.
In pseudo-code, your logic should flow like this
if (!isActive)
//set session data
else
//alert the user: You have another active session
This would be a better solution because there is no guarantee the user does not visit the page to set the session, then temporarily turn off Javascript to launch a new tab without you being notified.
You should realize that you cannot prevent multiple pages being open on the same site by the same user. A user can always do such an operation using multiple different browsers on the same computer or browsers on different computers. As such, what you really need to do is to design your application to either just handle this situation gracefully or detect such a conflict and decide what the safest action is to take when it occurs (chances are, at the server, you either ignore the data from all sessions but one or you somehow merge them all together). What the safe action is depends upon what the data is or how it was changed.
The most straightforward option is to coin a new server-based session for the user each time the user visits and, at the server, invalidate all previous sessions so any older session that tries to make any future updates to the server will be denied because of an invalid session. This prevents any sort of multi-session data conflict.
If you want to be able to inform the user when their session becomes invalid, you could do a slow poll of the server (say once every 20 mins) as long as the window is open and on your site to check the session validity such that you can inform the user when their session has expired.

How to safely destroy a session when leaving a site?

I'm looking for a well-supported way to capture a user leaving a page -- by typing in a new URL, clicking a bookmark, etc. -- to destroy the session so that a person cannot use the 'back' button to return to the site logged in.
Searches have turned up body onbeforeunload=..., an IE-ism that is supposedly supported by other current browsers, but is there a better or more official browser- and server side technology-neutral HTML/JavaScript way to do this?
The only way to do that, imo, is to use a keep alive on a short leash from your site. I.E. do an ajax keep alive to the server to keep your session active, and if they browse away, the keep alive disappears and thus the session expires. Kinda a brute force method though...

Categories