I need to check when the user opens a new tab if there any other tabs are opened in the browser. So when we can able to find that there are no tabs opened already, then we need to do some operations if not we can just leave

How can we achieve this using Broadcast Channel API?

Especially how to implement this concept in React?

Thanks in Advance!!

I need to check when the user opens a new tab if there any other tabs are opened in the browser. So when we can able to find that there are no tabs opened already, then we need to do some operations if not we can just leave

How can we achieve this using Broadcast Channel API?

Especially how to implement this concept in React?

Thanks in Advance!!

• javascript
• reactjs
• broadcast-channel

Share Improve this question Follow asked May 24, 2022 at 18:26 Dante1021Dante1021 39422 gold badges1212 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I will answer the second part of your question "Especially how to implement this concept in React?"

I will give an example of implementing multi-tab logout.

Create a file somewhere in your App , I created mine in a folder called Auth and created a file named auth.js

import { BroadcastChannel } from 'broadcast-channel';

const logoutChannel = new BroadcastChannel('logout');

export const login = () => {
    localStorage.setItem("token", "this_is_a_demo_token")
    history.push('/app/dashboard')
}


export const logout = () => {
    logoutChannel.postMessage("Logout")
    localStorage.removeItem("token", 'this_is_a_demo_token' )
    window.location.href = window.location.origin + "/";

}

export const logoutAllTabs = () => {
    logoutChannel.onmessage = () => {
        logout();
        logoutChannel.close();
       
        
    }
}

As you can see, I use this dependency npm i broadcast-channel for simplicity with my React App.

Create an instance called logoutChannel with the name 'logout'. On logging out , the instance sends a post message ('Logout').

Use the logoutAllTabs function in your App.js file as follows

import React, { useEffect } from "react";
import { logoutAllTabs } from "./auth/auth";
import Router from "./routes";


function App() {
useEffect(() => {
 logoutAllTabs()
}, [])

  
  return (
    <>
    
     <Router/> // All routes here
    
    </>
  );
}

export default App;

Kindly follow this tutorials to see the above implementation in action :

1.) https://youtu.be/mb5nuUbvfvM

2.) https://dev.to/demawo/how-to-logout-of-multiple-tabs-react-web-app-2egf