Primitive to manage Broadcast Channel. The Broadcast Channel is a browser API that allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) on the same origin.
npm install @solid-primitives/broadcast-channel
# or
yarn add @solid-primitives/broadcast-channel
# or
pnpm add @solid-primitives/broadcast-channel
Creates a new BroadcastChannel instance for cross-tab communication.
The channel name is used to identify the channel. If a channel with the same name already exists, it will be returned instead of creating a new one.
Channel attempt closing the channel when the on owner cleanup. If there are multiple connected instances, the channel will not be closed until the last owner is removed.
Returns an object with the following properties:
-
onMessage
- a function to subscribe to messages from other tabs -
postMessage
- a function to send messages to other tabs -
close
- a function to close the channel -
channelName
- the name of the channel -
instance
- the underlying BroadcastChannel instance
const { postMessage } = makeBroadcastChannel("test_channel");
postMessage({ id: 2, message: "hi" });
// Another browsing context
const { onMessage } = makeBroadcastChannel("test_channel");
onMessage(({ data }) => {
console.log(data); // { id: 2, message: "hi" }
});
You can use the same channel easily across different components in the same context
const Component_1 = () => {
const { postMessage } = makeBroadcastChannel("river");
const onClick = () => {
postMessage("hi");
};
return <button onClick={onClick}>Send Message</button>;
};
const Component_2 = () => {
const { onMessage } = makeBroadcastChannel("river");
const [message, setMessage] = createSignal("");
onMessage(({ data }) => {
setMessage(data);
});
return <div>{message()}</div>;
};
const App = () => {
const { onMessage } = makeBroadcastChannel("river");
onMessage(({ data }) => {
console.log(data);
});
return (
<>
<Component_1 />
<Component_2 />
</>
);
};
Provedes the same functionality as makeBroadcastChannel
but instead of returning onMessage
function, it returns a message
signal accessor that updates when postMessage is fired from other contexts.
const { postMessage } = createBroadcastChannel("test_channel");
postMessage({ id: 2, message: "hi" });
// Another browsing context
const { message } = createBroadcastChannel("test_channel");
createEffect(
on(
message,
data => {
console.log(data); // { id: 2, message: "hi" }
},
{ defer: true },
),
);
makeBroadcastChannel
and createBroadcastChannel
allows you to pass type which determines what should be passed to postMessage
and what values message()
or event.data from onMessage
callback are.
const { onMessage, postMessage } = makeBroadcastChannel<string>("test_channel");
onMessage(({ data }) => {
data; // Type 'string'
});
postMessage("hi");
type TData = { id: number; message: string };
const { message, postMessage } = createBroadcastChannel<TData>("test_channel");
postMessage({ id: "wrong type", message: "hi" }); // ❌
// ^^^
// (property) id: number
// Type 'string' is not assignable to type 'number'.
postMessage({ id: 5, message: "hi" }); // ✅
createEffect(
on(
message,
data => {
consumeDataIncorrect(data!); // ❌
// ^^^
// Argument of type 'TData' is not assignable to parameter of type '{ id: string; message: string; }'.
// Types of property 'id' are incompatible.
// Type 'number' is not assignable to type 'string'.
consumeDataCorrect(data!); // ✅
},
{ defer: true },
),
);
const consumeDataIncorrect = (data: { id: string; message: string }) => {
console.log(data);
};
const consumeDataCorrect = (data: { id: number; message: string }) => {
console.log(data);
};
Here's a working example here: https://stackblitz.com/edit/vitejs-vite-5xren3?file=src%2Fmain.tsx
See CHANGELOG.md