Centrifugo Client Service for Angular 2 #Centrifugo #Angular2 #service

app.component.ts

// Register your service as usual. I suggest adding it to [providers] in the module definition
// Then...
...
     var user = ...;
     var info = ...; // Optional
     var timestamp = Date.now() / 1000 | 0;
     var token = <Get the token from your ws>;
       
     this.centrifugeService.connect({
        url: 'http://<centrifugoServer>:8000/connection',
        user: user,
        info: info,
        timestamp: timestamp,
        token: token,
        ... ( the parameters are passed to the JSclient and thus are the same
        ...   see https://fzambia.gitbooks.io/centrifugal/content/clients/javascript.html )
      });
       
...
    this.centrifugeService.getMessages( "channel-1, channel-2" ).subscribe(
       message => // .... Handle your messages
    );
...
    // Optional
    this.centrifugeService.getStates().subscribe(
		  state => //  .... Centrifugo events : (dis)connection and errors
	  );

centrifuge.service.ts

import { EventEmitter } from '@angular/core';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

declare var Centrifuge: any;

export class CentrifugeService {
	private handler: any;
	private debug: boolean;
	private connected = false;
  
  stateEmitter = new EventEmitter<any>();
  
  getStates(): Observable<any> {
	  return this.stateEmitter;
  }
  
  connect(parameters: any): void {
	if (this.connected) {
		throw new Error('Centrifuge is already connected.');
	}
	this.handler = new Centrifuge( parameters );
	this.debug = parameters.debug;
	var self = this;
	this.handler
		.on('connect', function(data) {
			this.connected = true;
			if (self.debug) { console.log("Connected to Centrifugo",data); }
			self.stateEmitter.emit({type:'state',state:'connected',info:data});
		}).on('disconnect', function(data) {
			this.connected = false;
			if (self.debug) { console.log("Disconnected from Centrifugo",data); }
			self.stateEmitter.emit({type:'state',state:'disconnected',info:data});
			delete this.handler;
		}).on('error', function(error) {
			if (self.debug) { console.error("Error Centrifugo :",error ); }
			self.stateEmitter.emit({type:'error',info:error});
		});
		
	this.handler.connect();
  }
  
  disconnect(): void {
	this.handler.disconnect();
  }
  
  getMessages(channel: string): Observable<any> {
	var subscription = this.handler.subscribe(channel);
	var self = this;

	subscription.on("subscribe", function(data) {
			if (self.debug) { console.log("Subscribed to '"+channel+"' :", data); }
		});
	subscription.on("error", function(error) {
			if (self.debug) { console.log("Centrifugo Subscribe error :", error); }
			self.stateEmitter.emit({type:'error',info:error});
		});
	return Observable.fromEvent(subscription, 'message');
  }
}

index.html

...
  <script src="//cdn.jsdelivr.net/sockjs/1.1/sockjs.min.js" type="text/javascript"></script>
  <script src="assets/centrifuge.min.js" type="text/javascript"></script>
...