title | description |
---|---|
Events |
Sending data across flows |
In metz, events are transmitted over a Channel
and you use its capabilities through two key functions.
This function takes a topic
as a parameter, creates a Channel
for that topic and returns an emitter
which will let you dispatch events.
This takes two params, a topic
and a listener
. The listener
must return a FlowExecutor
With these params, whenever there's an event
on the channel for given topic, the listener
is invoked.
For example:
@Injectable
class StockPriceEmitter {
// We create the emitter when class gets instantiated
private emitter = std.createChannelEmitter<number>('apple');
emit() {
const randomPrice = Math.random()*300;
this.emitter.emit(randomPrice);
}
}
@Injectable
class AppleAverageStockPrice {
MAX_STORAGE = 10;
private storedPrices: number[] = [];
@Show
averagePrice: number = 0;
constructor() {
// We register our listener at the time of instantiation
std.registerChannelListener(
'apple',
std.flow("Calculate Average Apple Stock price", this).updateAverage,
);
}
private addToStoredPrices(price: number) {
if(this.storedPrices.length >= this.MAX_STORAGE) {
this.storedPrices.splice(0, 1);
}
this.storedPrices.push(price);
}
updateAverage(price: number) {
this.addToStoredPrices(price);
const averagePrice = this.storedPrices.reduce((acc, cur) => acc+cur, 0) / this.storedPrices.length;
this.averagePrice = Math.round(averagePrice);
}
}
Here's what it looks like in action:
<iframe width="900px" height="700px" src="https://app.metz.sh/play/0d0b90bfe8f0411dbde9f59071927be9?minimal=true" /> Play with the code [here](https://app.metz.sh/try?templateId=7).And with that, we have covered all about asynchronous operations that metz has to offer.
Along the way we also learnt everything about designing systems in metz.
But does it look pretty? How does one get those icons? Also, how are we able to show data?
Let's answer that in the next section!