Javascript PHP Updating all open instances such as Facebook

Question

As alot of you will know, when you are on the Desktop version of Facebook and have a notification.

The Page Title is

(1) Facebook

Lets say for example, you have 3 tabs of Facebook open which at the time will read

\ (1) Facebook \ (1) Facebook \ (1) Facebook \

In 1 of those tabs you chose to read the notification, but within a split second each of your tabs are updated to remove the

(1)

Could someone let me in on how to force an update in other open instances as Facebook are able to do?

This question might help: http://stackoverflow.com/questions/3583203/server-polling-with-javascript. Edit: this is exactly what you want: http://stackoverflow.com/a/1086448/2287470 — Joe, Aug 19 '13 at 10:58
@Joe: Both of them seem to be very outdated. WebSockets are the future. — ThiefMaster, Aug 19 '13 at 11:16

score 1 · Answer 1 · edited May 23 '17 at 12:20

The easiest way is to keep a channel (WebSocket or SSE) open on each tab. Then, when a new message arrives, you simply broadcast it to all connections owned by the recipient and it will show up in each tab (assuming each page has the JS to handle it).

There are also various other ways to communicate between tabs of the same origin in this question: Javascript; communication between tabs/windows with same origin - but I think that's not what you are looking for since for something like the FB messenger you surely want realtime notifications and then my first suggestion is much easier.

ngplayground · Accepted Answer · 2013-08-20T09:20:50.170

I have opted to use localStorage

Here I can check initially if chat exists

if (localStorage.getItem("chat") === null) {
    localStorage.setItem("chat","0");
}

Then I can set an interval of each second to run a function called checkChat()

setInterval(checkChat, 1000);

With the checkChat() function I can see if it is equal to 0 and if it is then remove the (1) or whatever value is actually in the title.

function checkChat(){
            var chatNum = localStorage.getItem("chat");
            //console.log(chatNum);
            if (chatNum == "0"){
                var actualpagetitle = $(document).attr('title');
                var newtitle = actualpagetitle.replace(/^\(\d+\)\s+/,'');
                document.title = newtitle;
            }
        }

I have tested this out on my live site and this works where whenever localStorage.getItem("chat") is updated it will update the rest of the open windows.

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Amit, Aug 20 '13 at 08:27

Javascript PHP Updating all open instances such as Facebook

2 Answers2