How to share data between browser tabs?

Question

I have to develop a program where I need to get the event from server and want to update the web page.

e.g. I have multiple browser tab opened for chat and each chat page have its own thread to fetch the event from the server but once the one thread among the chat will fetch the event than other get empty stack of event due to extract by the another Chat page.

So, here my concern is to share event with multiple chat pages without refreshing the page.

It seems like perhaps the design to "get messages" could be altered to better support this scenario (what if the are multiple *browsers* open?) — , Jun 04 '12 at 18:11

score 3 · Accepted Answer · answered Jun 04 '12 at 18:06

Sound like you could use postMessage to have the tab that gets the message share it with all the other pages on your domain.

postMessage(JSON.stringify({chatmsg: someVarFromServer}), "http://www.mydomain.com");

Have other chat pages listen for message events:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
    // reject foreign messages!
    if (event.origin !== "http://www.mydomain.com") return;

    var message = JSON.parse(event.data).chatmsg;

    // this other page now has the message
}

It's also possible to [send messages between tabs using `localStorage`](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows). — Anderson Green, Sep 23 '19 at 22:14

score 0 · Answer 2 · edited Jan 20 '21 at 14:12

If you want to develop a real-time chat application written in pure Javascript I highly recommend APE (edit: 2021 seems not maintained anymore) which is a robust start point for such goals.
If you don't want to use a framework here are 2 cross-browser solutions:

Check for events by sending an AJAX request periodically
Use a third-party application for receiving events such as Flash's XML sockets

How to share data between browser tabs?

2 Answers2

Linked