In metz, events are transmitted over a Channel and you use its capabilities through two key functions.

​
std.createChannelEmitter

This function takes a topic as a parameter, creates a Channel for that topic and returns an emitter which will let you dispatch events.

​
std.registerChannelListener

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:

Play with the code here.


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!