A simple message bus with Angular 2 and TypeScript

I wanted to learn how to setup a simple pub/sub style message bus in Angular 2, so I developed this sample code as a demo.

The demo has 2 parts: A component to represent stock items (Google, IBM and Microsoft) and a component to allow stock item prices to be updated. When you update a stock price with the submit button a message is published with the stock code and the new price. The StockItemService subscribes to stock price changes and applies the updated price to the target stock item, with a 2 second delay. You can submit several updates in quick succession and see the target stock price catch up.

Designed to allow me to explore:

  • Angular2 (beta 0) with TypeScript
  • RxJS to create a Pub/Sub interface

There are 2 key methods, both on the PricingService: The first, publishPriceChange allows price change messages (of type PriceUpdate) to be published. The second is the subscribe method which allows interested parties to be informed when new messages have been published. The PricingComponent does the publishing and the StockItemService is a subscriber. The pub/sub interface is intended to show how publishers can be independent from subscribers and vice-versa. In addition the types used by the publishers and subscribers are application types rather than RxJS or Angular types. The intention is to not allow the implementation types to leak into the application.

Issues

  1. I'm not sure the (setTimeout) delay correctly demonstrates the async behaviour of the message bus. It might just be showing how setTimeout works.
  2. There are 4 subscriptions established. One for the StockItemService and 1 for each of the StockItemComponents. The StockItemService updates the prices. I might want the StockItemComponent to update the price, but I haven't worked out how to fix the 'this' problem in the subscription callback. See comments in stock-item.component.tsUpdate: The updated source code now shows 2 solutions to the 'this pointer' execution context issue. First, the StockItemService uses the bind() method to associate the correct 'this' object with the function. I had tried to use the fat arrow, => to achieve the same result but it appears that the 'this' object is set for the execution of the statements that form the body of the anonymous function but it gets reset when a statement calls out of the anonymous function into a some other function. Second, I used the Observer<PriceUpdate> parameter usage of the subscribe() method. This results in a callback to my StockItemComponent with the correct 'this pointer' set. Note that the RxJS APIs are all contained within a single class - the PricingService - which means I can still swap the underlying pub/sub implementation for something else without changing any the application code.

Future changes Angular provides an EventEmitter API which uses RxJS for it's implementation. When the documentation and usage examples are finalised that API might provide a better choice.

This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

X