Skip to content

Instantly share code, notes, and snippets.

@wyozi
Created June 19, 2020 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wyozi/4abc0590b49c335306771497b5f237e2 to your computer and use it in GitHub Desktop.
Save wyozi/4abc0590b49c335306771497b5f237e2 to your computer and use it in GitHub Desktop.
Same-origin tab count tracker with BroadcastChannel
const tcs = new TabCountSync();
window.addEventListener("unload", () => tcs.close());
tcs.subscribe(count => console.log("open tab count: ", count));
class TabCountSync {
constructor() {
this.bc = new BroadcastChannel("tabcount-sync");
this.bc.postMessage("opened");
this.bc.onmessage = (ev) => this.onMessage(ev);
this.count = 1;
this.subscriptions = new Set();
}
subscribe(callback) {
this.subscriptions.add(callback);
callback(this.count);
return () => this.subscriptions.delete(callback);
}
setCount(count, sync = true) {
this.count = count;
this.subscriptions.forEach(fn => fn(count));
if (sync) {
this.bc.postMessage(this.count + 1);
}
}
close() {
if (!this.closed) {
this.bc.postMessage("closed");
this.bc.close();
this.closed = true;
}
}
onMessage({data}) {
if (this.closed) {
return;
}
if (data === "opened") {
this.setCount(this.count + 1);
} else if (data === "closed") {
this.setCount(this.count - 1);
} else if (typeof data === "number") {
if (this.count > data) {
this.bc.postMessage(this.count);
} else if (this.count !== data) {
this.setCount(data, false);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment