See all articles

Ember.evented subscriptions and notifications - Developers’ Notes

iRonin IT Team

Want a shortcut for subscriptions and notifying users about messages? We’ve found a way. Ember has built-in code for implementing the `pub-sub` pattern.

Today’s refactoring of a small part of our Ember app, responsible for connecting to PubNub to provide real-time updates, resulted in a discovery. We have a dedicated `pubnub` service to wrap up PubNub communication.

For subscribing and notifying all interested objects about new PubNub messages, we use the pub-sub pattern. For implementation, we relied on custom, simple functions inside the service:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import Ember from 'ember'; const { Service } = Ember; export default Service.extend({ ... addListener(listener) { this.get('listeners').pushObject(listener); }, removeListener(listener) { this.get('listeners').removeObject(listener); } ... // Then to notify listeners this.get('listeners').forEach((listener) => { listener(response.message); }); });

It turns out that similar functionality is already built-in inside Ember thanks to the Ember.Evented module. They only have different names: `on` / `off` instead of `addListener` and `removeListener`. But the idea is the same.

Refactoring the `pubnub` service boiled down to removing `addListener`, `removeListener` and extending `Ember.Evented`:

1 2 3 4 5 6 7 import Ember from 'ember'; const { Evented, Service } = Ember; export default Service.extend(Evented, { ... // Then to notify listeners this.trigger('receive', response.message); });

We also had to replace our listener code for subscribing to events (simple `search & replace` within the project):

1 2 3 4 5 6 // Before this.get('pubnub').addListener(callback); this.get('pubnub').removeListener(callback); // After this.get('pubnub').on('receive', callback); this.get('pubnub').off('receive', callback);

Thanks to that, we decreased the number of custom code inside the service and leveraged Ember’s power. `Ember.evented` also allows subscribers to be notified about a single event thanks to `one`, and also implements the `has` method to check whether there are any subscribers for a specific event.

We are also able to use the same implementation for notifications about different events, i.e. `disconnect`, `connect`, etc.

Today’s Developers’ Notes were taken straight from the journal of Łukasz, our Web Application Development Team Leader. Keep an eye out for more programming tips and tricks in the future!

Bulletproof your development with remote team augmentation

Build your product and prevent possible issues with development process.