Verbal communication is an essential part of human life. Today, technology brings the possibility of much richer communication channel then standard text-chat to our browsers. With CometChat you can build your audio and Video chat application on your website. Today you will integrate CometChat with Angular application.
There is a companion repository created for this post, available on the GitHub.
Hold your horses ⚠️🐴!
To follow this tutorial or run the example source code you'll need to create a V1 application.
v2 will be out of beta soon at which point we will update this tutorial.
First things first. In the catalog where you want your project to be located, type in the following Angular CLI command, which creates Angular project boilerplate:
{% c-line %} ng new comet-chat --style scss --routing true{% c-line-end %}
And install @cometchat-pro/chat library from npm:
{% c-line %} npm install @cometchat-pro/chat{% c-line-end %}
Now navigate into just created file, and replace the content of the app.component.html file with following HTML syntax:
{% c-line %} <router-outlet></router-outlet>{% c-line-end %}
Now it’s time to store your application ID and API Key in the **environment.ts file:
{% c-block %}
export const environment = {
production: false,
appId: 'Your app ID',
apiKey: 'Your API Key'
};
{% c-block-end %}
The application is going to have two main components: LoginComponent and CallComponent.
CallComponent is the place where a logged in user will be brought to display a contact list and perform video and voice calls to other active users. If the user is not authenticated he needs to provide login and password in the LoginComponent. Information about user authentication will be provided by the CometChatService. Generate them using the following commands:
{% c-block %}
ng g c Login
ng g c Call
ng g s CometChat
{% c-block-end %}
Let’s start from the implementation of the CometChatService basic functionalities. Replace the content of the src/app/comet-chat.service.ts file with the following code:
{% c-block language=“javascript” %}
import { Injectable } from '@angular/core';
import { CometChat } from "@cometchat-pro/chat"
import { environment } from 'src/environments/environment';
import { Observable, ReplaySubject, Subject, from } from 'rxjs';
import { filter, flatMap, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CometChatService {
private initialized: Subject<boolean> = new ReplaySubject<boolean>();
private signedIn: string;
constructor() {
CometChat.init(environment.appId).then(_ => {
console.log('Comet Chat initialized.');
this.initialized.next(true);
}, error => {
console.log('Initialization error: ' + error);
});
}
public login(uid: string): Observable<any> {
uid = uid.toLowerCase();
return this.initialized.pipe(filter(v => v), flatMap(() => {
return from(CometChat.login(uid, environment.apiKey)).pipe(tap(() => {
this.signedIn = uid;
}));
}));
}
public getSignedIn(): string {
return this.signedIn;
}
}
{% c-block-end %}
With this basic functionality of the CometChatService (authenticating user and checking if he is authenticated) we can build up an AuthenticationGuard to protect the CallComponent against unauthorized access. Generate the AuthenticationGuard:
{% c-line %} ng g g Auth --implements CanActivate{% c-line-end %}
Now, you can implement the Authentication Guard which will check if user is authenticated every time he is trying to navigate into application. Replace the content of the src/app/auth.guard.ts file with following code,:
{% c-block language=“javascript” %}
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { CometChatService } from './comet-chat.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private chat: CometChatService, private router: Router) {}
canActivate(): boolean {
if (!this.chat.getSignedIn()) {
this.router.navigate(['login']);
}
return !!this.chat.getSignedIn();
}
}
{% c-block-end %}
Now it’s more than ready to use it in the app navigation. Place following content in the src/app/app-routing.module.ts:
{% c-block language=“javascript” %}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
import { CallComponent } from './call/call.component';
const routes: Routes = [
{ path: '', redirectTo: 'call', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'call', component: CallComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
{% c-block-end %}
It’s time to make the first test of the application. Run it with the ng serve command and navigate to the localhost:4200, the application should redirect you to the /login path:
Ok, let’s give the user ability to login. Paste following code representing login form, to the src/login/login.component.ts file:
{% c-block language=“javascript” %}
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CometChatService } from '../comet-chat.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent {
public loginForm = new FormGroup({
uid: new FormControl('', Validators.required)
});
constructor(private chat: CometChatService, private router: Router) {}
public signIn(): void {
this.chat.login(this.loginForm.value['uid']).subscribe(signedUser => {
this.router.navigate(['call']);
});
}
}
{% c-block-end %}
And following HTML template in the src/app/login/login.component.html
{% c-block language=“html %}
<form [formGroup]="loginForm" (ngSubmit)="signIn()">
<label>User ID:<input type="text" formControlName="uid" /></label>
<button type="submit" [disabled]="!loginForm.valid">Sign In</button>
</form>
{% c-block-end %}
The last thing to do in this step is to add a new import to the src/app/app.module.ts, in the imports array add ReactiveFormsModule, imported from the @angular/forms library:
{% c-block language=“javascript” %}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { CallComponent } from './call/call.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
CallComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
{% c-block-end %}
Now, after navigating to the localhost:4200, the login page should be displayed:
After typing userID (ie.: superhero1) in the form, and clicking Sign In button, you should be brought to the CallComponent:
If you haven't been coding along and want to catch up to this step using the companion repository on GitHub, execute the following commands:
{% c-block %}
git clone https://github.com/maciejtreder/comet-chat-angular.git
cd comet-chat-angular
git checkout step1
npm install
{% c-block-end %}
Let’s start the implementation of the main panel of the application with displaying a list of user, together with their statuses. First thing first, add a new field to the src/app/comet-chat.service.ts:
{% c-line %} private users$: Subject<any> = new ReplaySubject();{% c-line-end %}
Implement the method which will retrieve list of users from the CometChat service. For the purpose of that method you will use the UserRequestBuilder from the CometChat library:
{% c-block %}
private retrieveUsers(): void {
new CometChat.UsersRequestBuilder().setLimit(20).build().fetchNext().then(response => {
this.users$.next(response);
});
}
{% c-block-end %}
Now you can bind this function to the userListener. Whenever some user will log in or out, this function would be fired.
It’s time to add some CometChat listeners. We will do that at the moment when user is logging into the application. Replace the login method with following new implementation:
{% c-block %}
public login(uid: string): Observable<any> {
uid = uid.toLowerCase();
return this.initialized.pipe(filter(v => v), flatMap(() => {
return from(CometChat.login(uid, environment.apiKey)).pipe(tap(() => {
this.signedIn = uid;
CometChat.addUserListener(
'USER_LISTENER_ID',
//@ts-ignore
new CometChat.UserListener({
onUserOnline: _ => this.retrieveUsers(),
onUserOffline: _ => this.retrieveUsers()
}));
}));
}));
}
{% c-block-end %}
And publish a list of the users with the getUsers() method
{% c-block %}
public getUsers(): Observable<any> {
return this.users$;
}
{% c-block-end %}
Now you can consume the new implementation of the CometChatService in the CallComponent. Replace the code inside src/app/call/call.component.ts with the following code:
{% c-block %}
import { Component } from '@angular/core';
import { CometChatService } from '../comet-chat.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-call',
templateUrl: './call.component.html',
styleUrls: ['./call.component.scss']
})
export class CallComponent {
public contacts: Observable<any[]> = this.chat.getUsers();
constructor(private chat: CometChatService) { }
}
{% c-block-end %}
Adjust the template, in the src/app/call/call.component.html:
{% c-block %}
<div>
<ul class="contacts">
<li *ngFor="let contact of (contacts | async)">
{{contact.name}} ({{contact.status}}) <span *ngIf="contact.status=='online'" (click)="voiceCall(contact.uid)">voice call</span><span *ngIf="contact.status=='online'" (click)="videoCall(contact.uid)">vidoe call</span>
</li>
</ul>
</div>
{% c-block-end %}
And add some scss styles in the src/app/call/call.component.scss:
{% c-block %}
:host {
display: flex;
}
:host > div {
flex: 1;
}
#callScreen {
height: 500px;
}
ul {
list-style-type: none;
span {
margin: 0 15px;
text-decoration: underline;
}
span:hover {
text-decoration: none;
cursor: pointer;
}
}
{% c-block-end %}
After navigating to localhost:4200 and authentication with the userID superhero1 you should be able to see list of your buddies, together with their statuses:
Next step to accomplish your application is the implementation of the Audio and Video calls functionality. Your application can have 4 states:
The last one is already implemented, there is nothing new to display on the screen. Let’s go on and implement the outgoing call functionality.
Replace the content of the src/app/comet-chat.service.ts file with following code:
{% c-block %}
import { Injectable } from '@angular/core';
import { CometChat } from "@cometchat-pro/chat"
import { environment } from 'src/environments/environment';
import { Observable, ReplaySubject, Subject, from } from 'rxjs';
import { filter, flatMap, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CometChatService {
private initialized: Subject<boolean> = new ReplaySubject<boolean>();
private incomingCall$: Subject<any> = new ReplaySubject();
private outgoingCall$: Subject<any> = new ReplaySubject();
private ongoingCall$: Subject<any> = new ReplaySubject();
private users$: Subject<any> = new ReplaySubject();
private signedIn: string;
{% c-block-end %}
You just introduced three new data streams incomingCall$, outgoingCall$ and ongoingCall$. Continue editing of this class, by adding constructor together subscription to the ongoingCall$ observable.
{% c-block %}
constructor() {
CometChat.init(environment.appId).then(_ => {
console.log('Comet Chat initialized.');
this.initialized.next(true);
}, error => {
console.log('Initialization error: ' + error);
});
this.ongoingCall$.pipe(filter(call => !!call)).subscribe(call => {
CometChat.startCall(
call.sessionId,
document.getElementById('callScreen'),
//@ts-ignore
new CometChat.OngoingCallListener({
onCallEnded: call => {
this.ongoingCall$.next(null);
}
})
);
});
}
{% c-block-end %}
Pay attention to the pipe used on the ongoingCall$ observable. Whenever a new value is pushed to this stream, you are performing the startCall method from the CometChat library, apart of call.sessionId you are passing the reference to the HTML element with id callScreen - you will introduce it later in one of your application components.
Later on, implement function which retrieves list of users, and login function.
{% c-block %}
private retrieveUsers(): void {
new CometChat.UsersRequestBuilder().setLimit(20).build().fetchNext().then(response => {
this.users$.next(response);
});
}
public login(uid: string): Observable<any> {
uid = uid.toLowerCase();
return this.initialized.pipe(filter(v => v), flatMap(_ => {
return from(CometChat.login(uid, environment.apiKey)).pipe(tap(_ => {
this.retrieveUsers();
this.signedIn = uid;
CometChat.addCallListener(
'CALL_LISTENER_ID',
//@ts-ignore
new CometChat.CallListener({
onIncomingCallReceived: call => {
this.incomingCall$.next(call);
},
onOutgoingCallAccepted: call => {
this.ongoingCall$.next(call);
this.outgoingCall$.next(null);
},
onOutgoingCallRejected: _ => {
this.outgoingCall$.next(null);
this.incomingCall$.next(null);
},
onIncomingCallCancelled: call => {
this.incomingCall$.next(null);
}
})
);
CometChat.addUserListener(
'USER_LISTENER_ID',
//@ts-ignore
new CometChat.UserListener({
onUserOnline: _ => this.retrieveUsers(),
onUserOffline: _ => this.retrieveUsers()
})
);
}));
}));
}
{% c-block-end %}
Now it’s time for functions responsible for starting video/voice calls and rejecting or accepting incoming calls.
{% c-block %}
public startVoiceCall(receiverID: string): Observable<any> {
if (!this.signedIn) {
throw new Error('Not logged in.');
}
const call = new CometChat.Call(receiverID, CometChat.CALL_TYPE.AUDIO, CometChat.RECEIVER_TYPE.USER);
return from(CometChat.initiateCall(call)).pipe(tap(call => this.outgoingCall$.next(call)));
}
public startVideoCall(receiverID: string): Observable<any> {
if (!this.signedIn) {
throw new Error('Not logged in.');
}
const call = new CometChat.Call(receiverID, CometChat.CALL_TYPE.VIDEO, CometChat.RECEIVER_TYPE.USER);
return from(CometChat.initiateCall(call));
}
public accept(sessionId: string): Observable<any> {
return from(CometChat.acceptCall(sessionId)).pipe(tap(call => {
this.incomingCall$.next(null);
this.ongoingCall$.next(call);
}));
}
public reject(sessionId: string): Observable<any> {
return from(CometChat.rejectCall(sessionId, CometChat.CALL_STATUS.REJECTED)).pipe(tap(_ => {
this.incomingCall$.next(null);
}));
}
{% c-block-end %}
Finally bunch of getters, used by service consumers.
{% c-block language=“javascript” %}
public getSignedIn(): string {
return this.signedIn;
}
public getIncomingCalls(): Observable<any> {
return this.incomingCall$;
}
public getOutgoingCalls(): Observable<any> {
return this.outgoingCall$;
}
public getOngoingCalls(): Observable<any> {
return this.ongoingCall$;
}
public getUsers(): Observable<any> {
return this.users$;
}
}
{% c-block-end %}
Now you are ready to generate new component, it will be dealing with outgoing calls:
{% c-line %} ng g c outgoingCall{% c-line-end %}
Replace content in the src/app/outgoing-call/outgoing-call.componenet.ts file with following TypeScript code:
{% c-block %}
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-outgoing-call',
templateUrl: './outgoing-call.component.html',
styleUrls: ['./outgoing-call.component.scss']
})
export class OutgoingCallComponent {
@Input()
public call: any;
}
{% c-block-end %}
And adjust the template in the src/app/outgoing-call/outgoing-call.component.html with:
{% c-line %} <h1>Calling to {{call.data.entities.for.entity.name}}</h1>{% c-line-end %}
{% c-line %} <div><img [src]="call.data.entities.for.entity.avatar" /></div>{% c-line-end %}
Add some styling to the src/app/outgoing-call/outgoing-call.componenet.scss:
{% c-block %}
img {
max-width: 50px;
max-height: 50px;
}
:host {
display: flex;
}
{% c-block-end %}
For now, the last change would be in the src/app/call/call.component.ts, implement two new methods, which are already in the view:
{% c-block %}
public voiceCall(userId: string):void {
this.chat.startVoiceCall(userId).subscribe();
}
public videoCall(userId: string):void {
this.chat.startVideoCall(userId).subscribe();
}
{% c-block-end %}
Expose one of the new streams from the CometChatService:
{% c-line %} public outgoingCall$: Observable<any> = this.chat.getOutgoingCalls();{% c-line-end %}
And adjust the src/app/call/call.component.html file:
{% c-block %}
<div>
<ul class="contacts">
<li *ngFor="let contact of (contacts | async)">
{{contact.name}} ({{contact.status}}) <span *ngIf="contact.status=='online'" (click)="voiceCall(contact.uid)">voice call</span><span *ngIf="contact.status=='online'" (click)="videoCall(contact.uid)">vidoe call</span>
</li>
</ul>
</div>
<div>
<app-outgoing-call *ngIf = "outgoingCall$ | async as outgoingCall" [call]="outgoingCall"></app-outgoing-call>
</div>
{% c-block-end %}
Now, after navigating to localhost:4200 in two separate windows, authorizing into two different accounts, you should be able to perform a voice call from one account to another and see the following screen:
If you haven't been coding along and want to catch up to this step using the companion repository on GitHub, execute the following commands in the directory where you’d like to create the project:
{% c-block %}
git clone https://github.com/maciejtreder/comet-chat-angular.git
cd comet-chat-angular
git checkout step2
npm install
{% c-block-end %}
You are close to the end. You can perform the call, but it’s not displayed on the second user account that someone is trying to reach him. Now you are going to implement the incoming call view and ongoing call view.
All necessary methods are already in the CometChat service, so the only thing on our end is to generate an incoming call component:
{% c-line %} ng g c incomingCall{% c-line-end %}
Replace the content of the src/app/incoming-call/incoming-call.component.ts with the following TypeScript code:
{% c-block %}
import { Component, Input } from '@angular/core';
import { CometChatService } from '../comet-chat.service';
@Component({
selector: 'app-incoming-call',
templateUrl: './incoming-call.component.html',
styleUrls: ['./incoming-call.component.scss']
})
export class IncomingCallComponent {
@Input()
private call: any;
constructor(private chat: CometChatService) { }
public accept(): void {
this.chat.accept(this.call.sessionId).subscribe();
}
public reject(): void {
this.chat.reject(this.call.sessionId).subscribe();
}
}
{% c-block-end %}
Adjust the HTML template in the src/app/incoming-call/incoming-call.component.html
{% c-block language=“html” %}
<h1>Call from {{call.callInitiator.name}}</h1>
<div><img [src]="call.callInitiator.avatar" /></div>
<div>
<span class="positive" (click)="accept()">Accept</span><span class="negative" (click)="reject()">Reject</span>
</div>
{% c-block-end %}
And add some styling to the src/app/incoming-call/incoming-call.component.scss file:
{% c-block language=“css” %}
.positive {
color: green;
}
.negative {
color: red;
}
img {
max-width: 200px;
max-height: 200px;
}
:host {
display: flex;
flex-direction: column;
}
:host > * {
display: flex;
justify-content: center;
}
span {
margin: 0 15px;
text-decoration: underline;
}
span:hover {
text-decoration: none;
cursor: pointer;
}
{% c-block-end %}
Last step for now, is adjusting the CallComponent, place the new component handle in the src/app/call/call.component.html file next to the :
{% c-block %}
<div>
<ul class="contacts">
<li *ngFor="let contact of (contacts | async)">
{{contact.name}} ({{contact.status}}) <span *ngIf="contact.status=='online'" (click)="voiceCall(contact.uid)">voice call</span><span *ngIf="contact.status=='online'" (click)="videoCall(contact.uid)">video call</span>
</li>
</ul>
</div>
<div>
<app-outgoing-call *ngIf = "outgoingCall$ | async as outgoingCall" [call]="outgoingCall"></app-outgoing-call>
<app-incoming-call *ngIf = "incomingCall$ | async as incomingCall" [call]="incomingCall"></app-incoming-call>
</div>
{% c-block-end %}
And add new data stream in src/app/call/call.component.ts:
{% c-line %} public incomingCall$: Observable<any> = this.chat.getIncomingCalls();{% c-line-end %}
Try the application right now. After performing a call to one of the superheroes, they should be able to see incoming call component together with the accept and reject buttons:
The last step, is to handle the ongoing calls. You have one more component to generate:
{% c-line %} ng g c ongoingCall{% c-line-end %}
Implement its logic by pasting the following code into src/app/ongoing-call/ongoing-call.component.ts file:
{% c-block language=“javascript” %}
import { Component, OnInit, Input } from '@angular/core';
import { CometChatService } from '../comet-chat.service';
@Component({
selector: 'app-ongoing-call',
templateUrl: './ongoing-call.component.html',
styleUrls: ['../outgoing-call/outgoing-call.component.scss']
})
export class OngoingCallComponent implements OnInit {
@Input()
private call: any;
public name: string;
public avatar: string;
constructor(private chat: CometChatService) {}
public ngOnInit() {
if (this.call.callInitiator.uid === this.chat.getSignedIn()) {
this.name = this.call.callReceiver.name;
this.avatar = this.call.callReceiver.avatar;
} else {
this.name = this.call.callInitiator.name;
this.avatar = this.call.callInitiator.avatar;
}
}
}
{% c-block-end %}
Notice that you are using the same stylesheet as for outgoing-call component.
Prepare a HTML template in src/app/ongoing-call/ongoing-call.component.html:
{% c-block %}
<h1>Speaking with {{name}}</h1>
<div><img [src]="avatar" /></div>
{% c-block-end %}
You don’t need to implement the finishing call logic, it’s handled by CometChat library (sweet!).
The last step is to add this component into the CallComponent and place a placeholder for the CometChat call screen in the src/app/call/call.component.html file. Another addition is the placeholder for the CometChat library (you described it in the CometChatService); an HTML entity with id callScreen:
{% c-block language=“html” %}
<div>
<ul class="contacts">
<li *ngFor="let contact of (contacts | async)">
{{contact.name}} ({{contact.status}}) <span *ngIf="contact.status=='online'" (click)="voiceCall(contact.uid)">voice call</span><span *ngIf="contact.status=='online'" (click)="videoCall(contact.uid)">vidoe call</span>
</li>
</ul>
</div>
<div>
<app-outgoing-call *ngIf = "outgoingCall$ | async as outgoingCall" [call]="outgoingCall"></app-outgoing-call>
<app-incoming-call *ngIf = "incomingCall$ | async as incomingCall" [call]="incomingCall"></app-incoming-call>
<app-ongoing-call *ngIf = "ongoingCall$ | async as ongoingCall" [call]="ongoingCall"></app-ongoing-call>
<div id="callScreen"></div>
</div>
{% c-block-end %}
Notice that the id of the div must match the id specified in the src/app/comet-chat.service.ts, inside the constructor:
{% c-block language=“html” %}
constructor() {
CometChat.init(environment.appId).then(_ => {
console.log('Comet Chat initialized.');
this.initialized.next(true);
}, error => {
console.log('Initialization error: ' + error);
});
this.ongoingCall$.pipe(filter(call => !!call)).subscribe(call => {
CometChat.startCall(
call.sessionId,
document.getElementById('callScreen'),
//@ts-ignore
new CometChat.OngoingCallListener({
onCallEnded: call => {
this.ongoingCall$.next(null);
}
})
);
});
}
{% c-block-end %}
You must also add the ongoingCall stream into the src/app/call/call.component.ts:
{% c-line %} public ongoingCalls$: Observable<any> = this.chat.getOngoingCalls();{% c-line-end %}
Now, whenever the call is accepted, the CometChat snippet is loaded into your application:
If you haven't been coding along and want to catch to this step using the companion repository on GitHub, execute the following commands in the directory where you’d like to create the project directory:
{% c-block %}
git clone https://github.com/maciejtreder/comet-chat-angular.git
cd comet-chat-angular
git checkout step3
npm install
{% c-block-end %}
Today you brought one of the most important part of human communication - voice and view - to the web! You learned how to embed CometChat in an Angular application.
