Outsmartly
Search…
Introduction
Performance Best Practices / High Performance Checklist
Edge Slice Re-rendering
Interceptors
Middleware
Plugins
Reference Guide
outsmartly.config.js
OutsmartlyRequest
OutsmartlyEdgeVisitor
OutsmartlyClientVisitor
OutsmartlyVisitor
OutsmartlyCookies
OutsmartlyEvent
OutsmartlyOverrideEvent
OutsmartlyMiddlewareEvent
OutsmartlyInterceptEvent
OutsmartlyEdgeMessageEvent
OutsmartlyClientMessageEvent
OutsmartlyMessageEvent
MessageBus
Using Typescript
Troubleshooting / Debugging
Powered By GitBook
MessageBus
The MessageBus is used to send and receive messages in a decoupled way, both client-side and edge-side.

Usage

Client-side

Outsmartly provides a React Hook to gain access to the MessageBus from anywhere in your UI components:
import { useMessageBus } from '@outsmartly/message-bus';
​
export function Home() {
const messageBus = useMessageBus();
const [clickCount, setClickCount] = useState(0);
​
useEffect(() => {
// Passing data as a second argument is optional
messageBus.emit('YourCustomMessages.HOME_COMPONENT_MOUNTED');
}, []);
​
return (
<button
onClick={() => {
setClickCount((clickCount) => {
const newClickCount = clickCount + 1;
const data = {
count: newClickCount,
};
messageBus.emit('YourCustomMessages.BUTTON_CLICKED', data);
​
return newClickCount;
});
}}
>
You have clicked me {clickCount} times
</button>
);
}

Edge-side

At the edge, you can gain access to the MessageBus from any OutsmartlyEvent passed to middleware, interceptors, or overrides:
export default {
host: 'example.outsmartly.app',
environments: [
{
name: 'production',
origin: 'https://my-example-website.vercel.app',
},
],
// All routes will have this middleware applied
middleware: [
async function firstMiddleware(event, next) {
event.messageBus.once('YourCustomMessages.COMPONENT_OVERRIDDEN', (message) => {
event.log('Message received!', message);
});
return await next();
},
],
routes: [
{
path: '/some-base-path/*',
overrides: [
{
component: 'ExampleComponent',
async getOverrideProps(event) {
const headline = 'hello, world';
// Perhaps you want to notify some middleware that
// something happened
event.messageBus.emit('YourCustomMessages.COMPONENT_OVERRIDDEN', {
headline,
});
​
return {
props: {
headline,
},
};
},
},
],
},
],
};
When listening, it's more common to want to set up a global listener once, when the edge starts up. This can be done using the plugin interface:
export function myCustomPlugin(options) {
return {
name: '@yourcompany/outsmartly-plugin-does-something',
setup({ config, messageBus }) {
// Listening for messages, globally
messageBus.on('YourCustomMessages.COMPONENT_OVERRIDDEN', async (message) => {
// do something with it, such as call fetch()
});
},
};
}
Previous
OutsmartlyMessageEvent
Next
Using Typescript
Last modified 1yr ago
Copy link
On this page
Usage
Client-side
Edge-side