How to implement Broadcast Channel API in React

Question

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!!

Answer 1

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