Easily integrate Rails' ActionCable into your Angular application.

Demo

API base URL

Install

You can download all necessary ngCable files manually or install it with Bower:

bower install ngCable

or NPM:

npm install ng-cable

Usage

You will not need to include any files, you can start using ngCable provider in your directives, controllers and services, just after installing the Bower component or NPM module.

For example in controllers:

var app = angular.module('exampleApp', ['ngCable']);

app.controller('MainCtrl', function ($scope, $cable) {
    var cable = $cable('ws://0.0.0.0:28080');
    var channel = cable.subscribe('RoomsChannel', { received: function(newComment){
      $scope.comments.push(newComment);
    }});
});

API

ngCable factory provides easy to use and minimalistic API, but in the same time it's powerful enough.

Here is the list of accessible methods that you can use:

Subscriptions

.subscribe(channel_name, {})

Method allows to subscribe to a channel.

.unsubscribe(channel_name, {})

Method allows to unsubscribe from a channel.

Connection

cable.connection.isOpen()

To check if the connection is open, using the cable instance.

Channels

cable.channels

To list all of the available channels.

Example Applications

I have created example applications for both Rails, and Angular sides.

You can check them here by cloning this repository and following the instructions of each submodule (application).

In this example application you can:

1. Login with multiple users
2. Open different chat rooms
3. Chat in real time with online users
4. See whom are online
5. Check the API WebSocket connection heartbeat (The We're Live! label in the header)

Here is a screenshot from the Angular example application:

Collaboration

Your help is appreciated! If you've found a bug or something is not clear, please raise an issue.

Ideally, if you've found an issue, you will submit a PR that meets our contributor guidelines.