Reusable Vue.js Components


Reusable Vue.js Components
http://ift.tt/2xVVY5u

Submitted October 21, 2017 at 03:03PM by gonorthjohnny
via reddit http://ift.tt/2l5bFl1

Advertisements

Any suggestions on how to set up a “client/server” or pubsub between multiple browser windows and a single shared window? Specifically using window.open to find the existing shared window across multiple tabs/windows.


Any suggestions on how to set up a “client/server” or pubsub between multiple browser windows and a single shared window? Specifically using window.open to find the existing shared window across multiple tabs/windows.

I'm working on a CRM app and adding voip/call integration. We want to add a click to call functionality, such that from any of these CRM pages a user can click a button and call a customer from that page.

The actual voip is handled by a separate popup window, because it's totally reasonable for a user to initiate a call from one page and then within the same tab/window navigate to a new page which would interrupt the call.

So basically I've got multiple sub-pages that need to interact with a single external window of the same domain. Any of these sub pages may open this window, but once the window is open it should be a singleton and any attempts by these sub-pages shouldn't open a new page but instead get a handle to the existing window.

Our prototype used window.open and window.postMessage for this, but we've found that the behavior of window.open differs between localhost and a real domain that renders it unusable for our purposes.

For example, on localhost, we call window.open from tab A and then window.open from tab B using the same window name as tab A. This opens a window from tab A and the window.open from tab B doesn't create a new window but returns a reference to the original one opened by tab A. This creates one single window with both tabs having a handle to that one window.

On a real domain, the behavior is different. We call window.open from tab A and then window.open from tab B using the same window name as tab A. This opens a window from tab A and the window.open from tab B also opens a new window, with both windows having the same name. As expected, subsequent calls to window.open within the tabs still return a reference to the window rather than opening one, but the tabs don't share the same window. This is all between the same domain, and means that our solution won't work on production.

The behavior of localhost is what we want, where calling window.open from different tabs creates a single window and further calls to window.open with that window's name returns a handle to that window.

We can easily replace the communication with something like websockets instead of window.postMessage, but there's still the issue of managing this single window. I've done a fair bit of googling and documentation diving and didn't find anything too obvious.

Anyone here got any reccomendations? Or know why this behavior differs between localhost and a real domain?

Submitted October 21, 2017 at 07:09AM by passthefist
via reddit http://ift.tt/2zENX20