angular2-actioncable
v6.0.2TypeScript
Simple and flexible integration for ActionCable and Angular applications
actioncableangularangular-actioncableangular-cableangular2angular4angular5angular6angular2-actioncableangular2-cable
675/weekUpdated 3 years agoMITUnpacked: 3.0 MB
Published by Nolan Lancaster
npm install angular2-actioncable
Simple and flexible integration for ActionCable and Angular applications.
Install
``bash`
npm install angular2-actioncable
If using an Angular version prior to 6:
`bash`
npm install angular2-actioncable@1.2.2
Usage
Use the ActionCableService to create an ActionCable consumer and subscribe to a channel.
`typescript
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { ActionCableService, Channel } from 'angular2-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: ActionCableService,
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
$3
####
.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.
####$3
#### .channel(name: string, params?: any): Channel
Create a new subscription to a channel, optionally with topic parameters.
########
.disconnect(): void
Close the connection.
########
.disconnected(): Observable
Emits when the WebSocket connection is closed.
####$3
#### .received(): Observable
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
Emits when the subscription is initialized.
########
.connected(): Observable
Emits when the subscription is ready for use on the server.
########
.disconnected(): Observable
Emits when the WebSocket connection is closed.
########
.rejected(): Observable
Emits when the subscription is rejected by the server.
########
.unsubscribe(): void
Unsubscribe from the channel.
####Known Issues
* If using rxjs 6.3.3 or above, unsubscribing from the
unsubscribe from the ActionCable channel. You can try using version 6.0.1 of this plugin, which uses rxjs 6.4.0,
but there are still issues with unsubscribe not being called if you combine the received Observable with another.
This can potentially result in memory leaks.