angular-actioncable

An Angular 1.x service for seamlessly integrating Rails 5 (ActionCable) into frontend Angular code. This service opens and maintains a websocket connection between Angular and ActionCable, reconnecting & resubscribing when the connection has been lost, and desynchronising the clients from one another to ease server-side events like code deploys or server restarts.

  

Usage

#### How to add this to your project

* Use bower and run bower install angular-actioncable --save (preferred)
* Use npm and run npm install angular-actioncable --save
* Download it manually
* CDN for development https://rawgit.com/angular-actioncable/angular-actioncable/1.3.0/dist/angular-actioncable.js
* CDN for production https://cdn.rawgit.com/angular-actioncable/angular-actioncable/1.3.0/dist/angular-actioncable.min.js

#### The One-Liner. (not recommended, but possible)

``html
<%= action_cable_meta_tag %>





• 
  {{ datum }}
  



`

#### A better way

`html






• 
  {{ datum }}
  

Send



`

`ruby
class MyChannel < ApplicationCable::Channel
# ...
def send_a_message(message)
# ...
end
end
`

Support

Supports:
- Rails 5.0

Examples

- Demo project with Rails 5 backend and Angular frontend from Neil-Ni
- Example frontend

API

$3

_constructor function_

##### Methods
name | arguments | description
----------------------|----------------------------------------------------------|--------------------------------------------
new | channelName:String
channelParams:Hash:_optional_
_returns instance_ | Creates and opens an ActionCableChannel instance.
var consumer = new ActionCableChannel('MyChannel', {widget_id: 17});
subscribe | callback:Function
_returns promise_ | Subscribes a callback function to the channel.
consumer.subscribe(function(message){ $scope.thing = message });
unsubscribe |
_returns promise_ | Unsubscribes the callback function from the channel.
consumer.unsubscribe();
send | message:String
action:String:_optional_
_returns promise_ | Send a message to an action in Rails. The action is the method name in Ruby.
consumer.send('message');
onConfirmSubscription | callback:Function | Call each time server registers a subscription.
consumer.onConfirmSubscription(function(){ console.log('subscribed'); });

$3

_singleton_

##### Methods
name | arguments | description
------------|--------------------------------------------------------|--------------------------------------------
start | | Starts ngActionCable services. ActionCableSocketWrangler.start();
_This will start by default unless disabled._
stop | | Stops ngActionCable services. ActionCableSocketWrangler.stop();

##### Properties

_Exactly one will be true at all times._

name | type | description
-----------------|------------------|------------
connected | Property:Boolean | ngActionCable is started and connected live.
ActionCableSocketWrangler.connected;
connecting | Property:Boolean | ngActionCable is started and trying to establish a connection.
ActionCableSocketWrangler.connecting;
disconnected | Property:Boolean | ngActionCable is stopped and not connected.
ActionCableSocketWrangler.disconnected;

$3

_value_

##### Properties

_You can override the defaults._

name | type | description
----------|---------|------------
wsUri | String | URI to connect ngActionCable to ActionCable. If this is inside a Rails view, it will be read from the action_cable_meta_tag but can still be overridden.
protocols | Array | Specify protocol headers for the websocket connection. Empty by default.
autoStart | Boolean | Connect automatically? Default is true.
ActionCableConfig.autoStart= false;
debug | Boolean | Show verbose logs. Default is false.
ActionCableConfig.debug= true;

`javascript
my_app.run(function (ActionCableConfig){
ActionCableConfig.wsUri= "wss://example.com/cable";
ActionCableConfig.protocols = ['soap', 'wamp'];
ActionCableConfig.autoStart= false;
});
``

Frequently Asked Questions

Q.*: What if the browser doesn't support WebSockets?
A.*: This module depends on angular-websocket which will not help; it does not have a fallback story for browsers that do not support WebSockets. Please check your browser target support.

Is it any good?

Yes

License

MIT

#### Development
Setup development