ember-pusher-js v0.0.4
ember-pusher-js
An Ember Octane and TypeScript-friendly pusher.js wrapper that is heavily inspired by the existing ember-pusher addon
Compatibility
- Ember.js v3.4 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Installation
ember install ember-pusher-js
If your project's ember-source
dependency is <3.6.0, the ember-native-class-polyfill
package will be installed as an additional dependency
Usage
Configuration
The addon expects a pusher
object to be added to your config/environment.js
ENV object.
ENV['pusher'] = {
key: 'xxxxxxx' // Pusher APP key (required)
cluster: 'xx' // Pusher cluster (required)
logToConsole: false // Should socket events be logged to console
}
The Pusher service
wireSubscriptions(target: EmberObject): void
This method should be called after declaring your channels and events in the PUSHER_SUBSCRIPTIONS
property. This can be done in a class field, or in a route hook that precedes your call to wireSubscriptions
. If you need more fine-grained control over when / how channels are subscribed to, check out the wire
method below.
In TypeScript projects where your channels and events are static (see below example), your Ember class can implement the PusherSubscriber
interface to ensure this is configured properly at compile time. If you're using JS or your channels and events are dynamic, the service will verify the presence of this object at runtime.
The Pusher service assumes you have actions that correspond to each event name present. This emulates how ember-pusher
's mixin works. The action names are mapped using Ember.String.camelize
on the event name.
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import PusherService, { PusherSubscriber } from 'ember-pusher-js/services/pusher';
export default class ChatRoute extends Route implements PusherSubscriber {
@service pusher: PusherService;
PUSHER_SUBSCRIPTIONS = {
'presence': ['enter-room', 'leave-room'],
'messages': 'new-message'
}
setupController(controller, model, transition): void {
super.setupController(controller, model, transition);
controller.set('users', A());
controller.set('messages', A());
// PUSHER_SUBSCRIPTIONS must be defined on the object before the
// wireSubscriptions method is called
this.pusher.wireSubscriptions(this);
}
@action
enterRoom(evt) {
this.controller.users.pushObject(evt.user);
}
@action
leaveRoom(evt) {
this.controller.users.removeObject(evt.user);
}
@action
newMessage(evt) {
this.controller.messages.pushObject(evt.message);
}
}
wire(target: EmberObject, channelName: string, events: string|string[]): void
If you need to manually subscribe to a channel, you can do so with the wire
method
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class ChatRoute extends Route {
@service pusher;
model(params) {
return this.store.findRecord('channel', params.id);
}
afterModel(model) {
this.pusher.wire(this, model.channelName, model.events);
}
}
unwireSubscriptions(target: EmberObject): void
This method can be used to unsubscribe and unbind to all channels and events specified in an EmberObject that has PUSHER_SUBSCRIPTIONS
defined
unwire(target: EmberObject, channelName: string): void
Unbinds to all events and unsubscribes from the channel passed in
subscribe(channelName: string): Pusher.Channel
Manually subscribe to a channel. Returns the Pusher Channel object which can be used to manually bind
to events on the channel
client: Pusher
Access the Pusher.js client directly
isConnected: boolean
Lets you know the status of your Pusher connection
socketId: string|undefined
If there is a Pusher connection, returns the socket ID
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.