lubosch / ng-actioncable

Integrate ActionCable with Angular2+

NgActioncable

Simple and flexible integration for ActionCable and Angular applications. Fully supports angular universal and es6.

Install

npm install ng-actioncable

Usage

Use the ActionCableService to create an ActionCable consumer and subscribe to a channel.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { NgActioncableService, Channel } from 'ng-actioncable';
import { MessageService } from './shared/messages/message.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  subscription: Subscription;

  constructor(
    private cableService: NgActioncableService,
    private messageService: MessageService
  ) { }

  ngOnInit() {
    // Open a connection and obtain a reference to the channel
    const channel: Channel = this.cableService
      .cable('ws://cable.example.com')
      .channel('ChatChannel', {room : 'Best Room'});

    // Subscribe to incoming messages
    this.subscription = channel.received().subscribe(message => {
        this.messageService.notify(message);
    });
  }

  ngOnDestroy() {
    // Unsubscribing from the messages Observable automatically
    // unsubscribes from the ActionCable channel as well
    this.subscription.unsubscribe();
  }
}

API

ActionCableService

.cable(url: string, params?: any): Cable

Open a new ActionCable connection to the url. Any number of connections can be created.
If a function is supplied for the URL params, it will be reevaluated before any reconnection attempts.

.disconnect(url: string): void

Close an open connection for the url.

Cable

.channel(name: string, params?: any): Channel

Create a new subscription to a channel, optionally with topic parameters.

.disconnect(): void

Close the connection.

.disconnected(): Observable<any>

Emits when the WebSocket connection is closed.

Channel

.received(): Observable<any>

Emits messages that have been broadcast to the channel.
For easy clean-up, when this Observable is completed the ActionCable channel will also be closed.

.send(data: any): void

Broadcast message to other clients subscribed to this channel.

.perform(action: string, data?: any): void

Perform a channel action with the optional data passed as an attribute.

.initialized(): Observable<any>

Emits when the subscription is initialized.

.connected(): Observable<any>

Emits when the subscription is ready for use on the server.

.disconnected(): Observable<any>

Emits when the WebSocket connection is closed.

.rejected(): Observable<any>

Emits when the subscription is rejected by the server.

.unsubscribe(): void

Unsubscribe from the channel.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.