https://github.com/algonauti/ember-cable
Power your ember.js application with actioncable
https://github.com/algonauti/ember-cable
actioncable ember-addon ember-cable
Last synced: 4 days ago
JSON representation
Power your ember.js application with actioncable
- Host: GitHub
- URL: https://github.com/algonauti/ember-cable
- Owner: algonauti
- License: mit
- Created: 2015-11-29T13:42:35.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2022-06-23T08:50:50.000Z (over 3 years ago)
- Last Synced: 2025-09-30T16:25:46.082Z (17 days ago)
- Topics: actioncable, ember-addon, ember-cable
- Language: JavaScript
- Size: 1.23 MB
- Stars: 93
- Watchers: 5
- Forks: 28
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cable
This add-on enables simple integration of Rails Action Cable into Ember apps.
[](https://github.com/algonauti/ember-cable/actions)
[](https://emberobserver.com/addons/@algonauti/ember-cable)
### Installation
run the following command from inside your ember-cli project:
ember install @algonauti/ember-cable
## Basic Usage
Once the addon is installed, the cable service can be injected wherever
needed in the application.
```js
// tests/dummy/app/components/notification-messages/component.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { debug, inspect } from '@ember/debug';
import EmberObject from '@ember/object';
import { getOwner } from '@ember/application';
export default class NotificationMessagesComponent extends Component {
@service cable;
@service notification;
constructor() {
super(...arguments);
this._setupConsumer();
}
_setupConsumer() {
let consumer = this.cable.createConsumer('ws://localhost:4200/cable');
consumer.createSubscription('BroadcastChannel', {
connected() {
debug('BroadcastChannel#connected');
this.perform('ping');
},
received(data) {
debug( "received(data) -> " + inspect(data) );
},
disconnected() {
debug("BroadcastChannel#disconnected");
}
});
// Passing Parameters to Channel
let subscription = consumer.createSubscription({ channel: 'BroadcastChannel', room: 'BestRoom' }, {
connected() {
this.perform('ping', { foo: 'bar' });
},
received: (data) => {
this._updateRecord(data);
},
disconnected: () => {
this.notification.notify("BroadcastChannel#disconnected");
}
});
// Using mixin and inject your services:
let subscriptionHandler = EmberObject.extend({
notification2: service('notification'),
connected() {
this.notification2.notify("subscriptionHandler#connected");
},
}).create(getOwner(this).ownerInjection());
consumer.createSubscription({ channel: 'BroadcastChannel' }, subscriptionHandler);
setTimeout(() => {
subscription.perform('ping', { foo: 'bar' });
}, 3000);
setTimeout(() => {
this.cable.destroy();
}, 9000);
}
_updateRecord(data) {
debug( "updateRecord(data) -> " + inspect(data) );
}
}
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
ember-cable is released under the [MIT License](http://www.opensource.org/licenses/MIT).