Skip to content

viktor-shmigol/ng2-cable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Viktor Shmigol
Mar 15, 2018
d452f00 · Mar 15, 2018

History

16 Commits
Jul 19, 2017
Jul 19, 2017
Jul 12, 2017
Jun 27, 2017
Mar 15, 2018
Jul 19, 2017
Jul 12, 2017
Jul 19, 2017
Jul 12, 2017
Jul 12, 2017

Repository files navigation

ng-cable logoe

Easily integrate Rails ActionCable into your Angular2/4/ionic3 application.

Demo

https://ng2-cable-example.herokuapp.com

https://github.com/viktor-shmigol/ng2-cable-example

https://github.com/viktor-shmigol/ng2-cable-ionic3-example

Blog

How easily integrate Rails' ActionCable into your Angular2/4/ionic2 application

Install

npm install ng2-cable --save

And if we use the SystemJS loader, we would have to add our library to the config.js file like this:

System.config({
    paths: {
      'ng2-cable': 'node_modules/ng2-cable/index.js',
      'actioncable': 'node_modules/actioncable/lib/assets/compiled/action_cable.js'
    }
});

Usage

  1. Add Ng2CableModule into your AppModule class. app.module.ts would look like this:
import {NgModule} from '@angular/core';
import { Ng2CableModule } from 'ng2-cable';

@NgModule({
  imports: [Ng2CableModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }
  1. app.ts
import { Component } from '@angular/core';
import { Ng2Cable, Broadcaster } from 'ng2-cable';

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  constructor(private ng2cable: Ng2Cable,
              private broadcaster: Broadcaster) {
      this.ng2cable.subscribe('http://example.com/cable', 'ChatChannel', { room: 'My room' });
      //By default event name is 'channel name'. But you can pass from backend field { action: 'MyEventName'}

      this.broadcaster.on<string>('ChatChannel').subscribe(
        message => {
          console.log(message);
        }
      );
    }
  }

API Ng2-cable

.subscribe(url, channel, params)

Method allows to subscribe to a channel.

.unsubscribe()

Method allows to unsubscribe from a channel.

.setCable(url)

Method allows to connect consumer

.actionCable Returns ActionCable.

So you can use it like on rails side:

import { Component } from '@angular/core';
import { Ng2Cable } from 'ng2-cable';

@Component({
  selector: 'sd-app',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  cable:any;
  
  constructor(private ng2cable: Ng2Cable) {
    this.cable = this.ng2cable.actionCable.createConsumer("ws://cable.example.com");
    this.cable.subscriptions.create('ChatChannel', {
      received: (data:any) => {
        console.log('DATA', data)
      }
    });
  }
}

API Broadcaster

.on('Name')

Method allows to subscribe to a event.

.broadcast('event', object)

Method allows to broadcast event.

About

Connect your Angular(2/4)/ionic(2/3) application with Rails ActionCable

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published