<h3>Led 1:</h3>
<button id="button1" onclick="send1()">Turn ON</button>
and javascript is
var c = 1;
function send1() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {6
if (c == 0) {
document.getElementById("button1").innerHTML = "Turn ON";
document.getElementById("button1").style.backgroundColor ="red";
c = 1;
}
else if (c == 1) {
document.getElementById("button1").innerHTML = "Turn OFF";
document.getElementById("button1").style.backgroundColor = "green";
c = 0;
}
}
};
xhttp.open("GET", "https://blynk.cloud/external/api/update?token=PiICxN5NNt2JWKLel25I********&v0=" + c, true);
xhttp.send();
}
When the button is clicked it gets a URL which contains the API key and assigns 1 or 0 based on the button click.
So, When I click the button Off in one active tab, another tab button should also be changed to Off.
You can explore using Broadcast Channel API which allows basic communication between browsing contexts (such as tabs) on the same origin.
// Current/Active Tab
// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
bc.postMessage('button off');
Then the other tabs can listen to the same channel:
// Other Tabs
const bc = new BroadcastChannel('test_channel');
bc.onmessage = event => {
if (event.data === 'button off') {
// do something
}
}