BMB - BrowserMessageBroker

⚠️ EXPERIMENTAL AND POORLY TESTED! Use at your own risk

BMB is a tiny message broker (only about 2 kb compressed) that supports Publish/Subscribe and Request/Reply messaging patterns across multiple scripting contexts of the same origin (Tabs, Ifames, Service Workers, Dedicated and Shared Worker). It uses BroadcastChannel as a unified way of communication between different contexts.

Potential use cases

• Communication between independent scripts or web components or micro frontends
• Communication between multiple tabs and workers or iframes

Features

• Publish/Subscribe
• Request/Reply
• Messages caching and automatic synchronisation of the contexts

Examples

See /examples/todo-app in this repo

Todo-app example readme

Demo

Getting started

Install:

npm install browser-message-broker --save

Publish/Subscribe

MyMessageProducer.ts

import { PubSubChannel, ReqRepChannel } from "browser-message-broker";
type MyMessage = { name: string; greeting: string }
const MyMessageChannel = PubSubChannel.for<MyMessage>(
  "MyMessage", {
    broadcast: true,
    cache: false,
    trace: false
  }
);

MyMessageChannel.publish({ name: "Foo", greeting: "Hi!" });

Or, just publish/broadcast using default channel settings

PubSubChannel.publish("MyMessage", { name: "Foo", greeting: "Hi!" });
//or
PubSubChannel.broadcast("MyMessage", { name: "Foo", greeting: "Hi!" });

MyMessageConsumer.ts

import { PubSubChannel, ReqRepChannel } from "browser-message-broker";
type MyMessage = { name: string; greeting: string }
const MyMessageChannel = PubSubChannel.for<MyMessage>(
  "MyMessage", {
    broadcast: true,
    cache: false,
    trace: false
  }
);

MyMessageChannel.subscribe((msg: MyMessage)=>{
    console.log(msg)
})

Request/Reply

import { PubSubChannel, ReqRepChannel } from "browser-message-broker";

type TReq = { reqPayload: string };
type TRep = { respPayload: string };

// Shared Worker (consumer)
ReqRepChannel.for<TReq, TRep>(
  "GetData", 
  { broadcast: true }
).reply((req: TReq)=>{
  return  { respPayload: "Hello " + req.reqPayload   }
});

// Window (producer)
const req: TReq = { reqPayload: "Bob" };

const reply: TResp = 
await ReqRepChannel.for<TReq, TRep>(
 "GetData", 
 { broadcast: true }
).request(undefined);

console.log(reply)// { "respPayload": "Hello Bob" }