Best way to transport JavaScript data between tabs/windows - javascript

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

Related

Detecting Browser Close or Tab Close without Impacting other functionality

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.

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.

End user session when on new browser tab

We have a financial application in which when a user opens a link in a new tab and closes the previous one his session is still active in the new tab. This can create issues of Cross Site Request Forgery which , to us, is a big issue. Talking to our developers about this in implementing something that uses onload or unload (as described here http://www.liferay.com/community/forums/-/message_boards/message/2948770) said that the way the application is build (Java+faces+jboss+tomact) will create issues as the use will be logged out each time he clicks on a menu. This is because the function is called whenever a user navigates from one page to another.
Is there a way around this issue without using the unload/onload Javascript function?
It is impossible to detect the user closing the page without using javascript.
However, it would be more user-friendly if you stored multiple CSRF tokens instead of just a single one (e.g. up to 10). When one is used, only this one is invalidated and when a new one is necessary, the oldest one is deleted.
This ensures people can work in multiple tabs while still having CSRF protection.

What's the best way to keep track of live notifications to send to a user?

I'm using a growl-like plugin for jQuery send live messages to users to share activity on the site. Right now I only update the user with notifications that happened since the user's last access on the site. However, when I have multiple tabs open on the site, only some of the tabs get the notifications due to the long polling requests as a tab can flush the notification before the other tabs get them.
What is the best way to implement a notification system where each tab will display the messages at the same time? Perhaps also to maintain a level of persistence so that, say, the notifications will stay on the page for 15 seconds even if a user navigates to a different page?
You can use window.localStorage object as a buffer for notifications that is shared between tabs/windows.
To ensure cross-browser compatibility you can also use store.js library instead of dealing with localStorage directly.
So you can send your notifications to client via web-socket or in any other way and the handler will push them to this buffer.
Say this would be an array like
[
notification1,
notification2
// etc.
]
Each window (tab) should be registered in localStorage when user opens it, like:
{
wnd_<timestamp_of_window1_onload_event>: 1
wnd_<timestamp_of_window2_onload_event>: 1
}
In each window (tab) you can use a window.setInterval function to check the buffer every N milliseconds for a new notifications.
The function called by setInterval will read new notifications from buffer and display them.
In window.onbeforeunload handler you'll unregister current window from windows collection in localStorage. And if the collection of windows became empty after current window unregistering, you can empty the buffer of notifications.
Sure, It's a brief solution, maybe you'll need to think about the deleting of deprecated (handled by all windows) notifications from buffer before all windows closing.

Categories