I have been searching for a way to communicate between 2 popups with JavaScript.
All I have found so far has been questions about how to communinate between Main and Popup, but I want Popup 1 to update Popup 2. Update it's URL or other stuff.
Any idea?
While you can't have each popup directly communicate with each other, you can use the localStorage storage event for each popup to set/get information from a single source:
One solution, assuming it is running on a server, would be to use web sockets. With web sockets you could instantly communicate between all open processes to the server. This avoids constantly polling your server for changes. You can also use something like Realm to get live updates.
Related
I am currently using jQuery's AJAX to send and receive data when making a new post. However, when I open two browser tabs of the same website, I notice that the second tabs doesn't update itself after I do something with the first tab.
For example, if I "like" some posts in the first tab, the posts in the first tab will update its "post number" after receiving data from server via AJAX, but the second tab still stays the same as if nothing happens, unless I refresh the second tab.
I understand that one of the method is by using HTML5's WebSocket. I am just curious if it's possible update all the browser views simultaneously with jQuery's AJAX?
No there is no way to update second browser tab based on action in first tab. But for listening changes from server you should make use of WebSockets to establish connection with server and server will push changes on your connection. Websocket is supported in html5 version. other way to do it old way which is long polling where you keep calling server to get updates & hidden frame approach also (you can get more detail on this by googling it). apart form there are other methods also to do this stuff.
I suggest make use of SignalR which is provided by Microsoft, it includes all the way to handle requirement of Server to multiple clients. you can check here : Introduction to SignalR
The question is how to connect two local scripts (with no interner-connection at all). The whole task is controlling one opened local page from other opened page (same or different browser). That couldn't be bridged through web-server.
I have no idea who to make this except writing to localStorage on one page and constantly checking from another (or using a handler).
I have had a similar requirement, and localStorage is the only reasonable option I found. You could persist some info on the server, but if you need real-time update or frequent communication between pages, the server side methods begin to slow down the application.
I have no idea who to make this except writing to localStorage on one page and constantly checking from another (or using a handler)
With localStorage, you don't have to constantly check the state of storage. It does provide a storage event that you could bind to:
window.onstorage = function(data) {
console.log(data);
}
This event would be triggered when you modify the storage through another tab. Something like,
localStorage.setItem('key','value');
So localStorage can, in principle, serve as a basic communication channel between two tabs - running on the same domain.
Some libraries are also available that provide advanced features based on localStorage. I have used Crosstab, in past, and it works pretty fine for most purposes.
According to this post https://code.google.com/p/chromium/issues/detail?id=429419 as well as some testing I did to verify the limit is real - I understand that number of WebSockets I can open is limited.
Problem is that I sometimes need more than 30 websockets, because a user might open 30 tabs.
I was wondering what would be the best possible way of maybe sharing a pool of webSockets between different tabs. Here are some ideas I had in mind, and I would love to hear other possible ideas:
Allocate a webSocket pool in one main window, as a globally reachable element and then make sure all other tabs are children of that main page. Then I can use an inter-tab communication:
window.parent...
Problem is that not all tabs are created as child windows of the main window, and that main window might be closed.
Allocate a webSocket pool somehow "in the local storage" - I am not too familiar with the local storage, but I think that at the very least it can hold somehow a reference to a master tab that is currently managing the webSockets. Every once in a while, other tabs try to set themselves as a master tab.
I know its sounds awful and cumbersome. But how possible is it to write a thread/proccess safe code when accessing the local storage? Any example will be appreciated.
Would love to hear any other suggestions you might have.
Number 2 won't work, because LocalStorage is limited to string types.
I would recommend looking at ServiceWorkers.
A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it.
This sounds pretty close to what you want. Register a ServiceWorker that simply accepts messages and rebroadcasts them to clients - any page from your domain. So you can have one main page that creates the WebSocket connection, and every time it gets a push it will broadcast a message through the ServiceWorker messaging system. Other tabs can pick up on it as needed.
Alternatively, you could use a shared WebWorker on the same principle. Just install it as a messaging system that broadcasts the messages from your WebSocket.
These aren't exactly the intended uses for these technologies... but if it works it works.
I am currently building a WebSocket-based instant chat web application, it has more than one page. Every time users refresh or click a link to another page, WebSocket has to be reconnected. Is there a solution to avoid this?
If you refresh the page it will need to reconnect, i dont think there is a way around it.
I would recommend not using page-load to navigate between pages, but to build a single page application.
If you cannot do that in any way, maybe you can have your application in a frame, and the outer html will have the socket. that could work.
You might be interested in this blog post: WebSocket - persistent across page loads?
This discusses the issue and options in depth.
Disclosure: I work for Tavendo.
I have many open tabs of my website in browser. How I can send signals (trigger events) through all of them, maybe somebody knows good article/blogpost about that? Example: in one tab I will be login to the site, after some seconds user interface in other tabs must be changed. What advice is best practice to perform this case?
Sorry for bad English language, I'm not native speaker.
You can use localStorage, a data store in the browser that's shared among all tabs/windows that are viewing the same domain. There's a storage event that is triggered in all tabs when any tab makes a storage change. There's a demo here: http://html5demos.com/storage-events
What you should do is have your server handle that. (e.g. you notify your server when you login and your server tells communicates tot the other opened tabs). NodeJS and websockets can do that easily but that depends on what you use/ are comfortable with for your server language.