Building a Realtime chat application using Angular and Appwrite

docker run -it --rm \    --volume /var/run/docker.sock:/var/run/docker.sock \    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \    --entrypoint="install" \    appwrite/appwrite:0.15.0

git clone [email protected]:brandonroberts/appwrite-angular-chat.git

yarn

yarn start

export const environment = { endpoint: 'http://localhost/v1', projectId: 'ngchat', databaseId: 'chat', chatCollectionId: 'messages', production: false};

import { inject, InjectionToken } from '@angular/core';import {  Account,  Client as Appwrite,  Databases} from 'appwrite';import { environment } from 'src/environments/environment';interface AppwriteConfig {  endpoint: string;  projectId: string;  databaseId: string;  chatCollectionId: string;}export const AppwriteEnvironment = new InjectionToken<AppwriteConfig>(  'Appwrite Config',  {    providedIn: 'root',    factory() {      const { endpoint, projectId, databaseId, chatCollectionId } = environment;      return {        endpoint,        databaseId,        projectId,        chatCollectionId,      };    },  });

export const AppwriteApi = new InjectionToken<{  database: Databases;  account: Account;}>('Appwrite SDK', {  providedIn: 'root',  factory() {    const env = inject(AppwriteEnvironment);    const appwrite = new Appwrite();    appwrite.setEndpoint(env.endpoint);    appwrite.setProject(env.projectId);    const database = new Databases(appwrite, env.databaseId);    const account = new Account(appwrite);    return { database, account };  },});

import { inject, Injectable } from '@angular/core';import { Router } from '@angular/router';import { Models } from 'appwrite';import {  BehaviorSubject,   concatMap,  from,  tap,  mergeMap} from 'rxjs';import { AppwriteApi } from './appwrite';@Injectable({ providedIn: 'root',})export class AuthService { private appwriteAPI = inject(AppwriteApi); private _user = new BehaviorSubject<Models.User<Models.Preferences> | null>(   null ); readonly user$ = this._user.asObservable(); constructor(private router: Router) {} login(name: string) {   const authReq = this.appwriteAPI.account.createAnonymousSession();   return from(authReq).pipe(     mergeMap(() => this.appwriteAPI.account.updateName(name)),     concatMap(() => this.appwriteAPI.account.get()),     tap((user) => this._user.next(user))   ); } async isLoggedIn() {   try {     const user = await this.appwriteAPI.account.get();     this._user.next(user);     return true;   } catch (e) {     return false;   } } async logout() {   try {     await this.appwriteAPI.account.deleteSession('current');   } catch (e) {     console.log(`${e}`);   } finally {     this.router.navigate(['/']);     this._user.next(null);   } }}

import { inject, Injectable } from '@angular/core';import { Models, RealtimeResponseEvent } from 'appwrite';import { BehaviorSubject, take, concatMap, filter } from 'rxjs';import { AppwriteApi, AppwriteEnvironment } from './appwrite';import { AuthService } from './auth.service';export type Message = Models.Document & {  user: string;  message: string;};@Injectable({  providedIn: 'root',})export class ChatService {  private appwriteAPI = inject(AppwriteApi);  private appwriteEnvironment = inject(AppwriteEnvironment);  private _messages$ = new BehaviorSubject<Message[]>([]);  readonly messages$ = this._messages$.asObservable();  constructor(private authService: AuthService) {}  loadMessages() {    this.appwriteAPI.database      .listDocuments<Message>(        this.appwriteEnvironment.chatCollectionId,        [],        100,        0,        undefined,        undefined,        [],        ['ASC']      )      .then((response) => {        this._messages$.next(response.documents);      });  }  sendMessage(message: string) {    return this.authService.user$.pipe(      filter((user) => !!user),      take(1),      concatMap((user) => {        const data = {          user: user!.name,          message,        };        return this.appwriteAPI.database.createDocument(this.appwriteEnvironment.chatCollectionId,          'unique()',          data,          ['role:all'],          [`user:${user!.$id}`]        );      })    );  }}

import { Component } from '@angular/core';import {  FormControl,  FormGroup,  ReactiveFormsModule} from '@angular/forms';import { Router } from '@angular/router';import { tap } from 'rxjs';import { AuthService } from './auth.service';@Component({ selector: 'app-login', standalone: true, imports: [ReactiveFormsModule], template: `   <div class="app-container">     <div class="content">       <span class="appwrite-chat">Angular Chat</span>       <div class="login-container">         <form [formGroup]="form" class="login-form" (ngSubmit)="login()">           <p class="login-name">             <label for="name">Name</label>             <input               type="text"               id="name"               formControlName="name"               placeholder="Enter Name"             />           </p>           <button type="submit">Start Chatting</button>         </form>       </div>     </div>   </div> `})export class LoginComponent { form = new FormGroup({   name: new FormControl('', { nonNullable: true }), }); constructor(   private authService: AuthService,   private router: Router ) {} login() {   const name = this.form.controls.name.value;   this.authService     .login(name)     .pipe(       tap(() => {         this.router.navigate(['/chat']);       })     )     .subscribe(); }}

import { CommonModule } from '@angular/common';import { Component, OnInit } from '@angular/core';import {  FormControl,  FormGroup,  ReactiveFormsModule} from '@angular/forms';import { tap } from 'rxjs';import { ChatService } from './chat.service';import { AuthService } from './auth.service';@Component({ selector: 'app-chat', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `   <div class="chat-container" *ngIf="user$ | async as vm; else loading">     <div class="chat-header">       <div class="title">Let's Chat</div>       <div class="leave" (click)="logout()">Leave Room</div>     </div>     <div class="chat-body">       <div         id="{{ message.$id }}"         *ngFor="let message of messages$ | async"         class="message"       >         <span class="name">{{ message.user }}:</span>         {{ message.message }}       </div>     </div>     <div class="chat-message">       <form [formGroup]="form" (ngSubmit)="sendMessage()">         <input           type="text"           formControlName="message"           placeholder="Type a message..."         />         <button type="submit" class="send-message">           <svg             class="arrow"             width="24"             height="24"             viewBox="0 0 24 24"             fill="none"             xmlns="http://www.w3.org/2000/svg"           >             <path               d="M13.0737 3.06325C12.8704 2.65671 12.4549 2.3999 12.0004 2.3999C11.5459 2.3999 11.1304 2.65671 10.9271 3.06325L2.52709 19.8632C2.31427 20.2889 2.37308 20.8001 2.67699 21.1663C2.98091 21.5325 3.4725 21.6845 3.93007 21.5537L9.93006 19.8395C10.4452 19.6923 10.8004 19.2214 10.8004 18.6856V13.1999C10.8004 12.5372 11.3376 11.9999 12.0004 11.9999C12.6631 11.9999 13.2004 12.5372 13.2004 13.1999V18.6856C13.2004 19.2214 13.5556 19.6923 14.0707 19.8394L20.0707 21.5537C20.5283 21.6845 21.0199 21.5325 21.3238 21.1663C21.6277 20.8001 21.6865 20.2889 21.4737 19.8632L13.0737 3.06325Z"               fill="#373B4D"             />           </svg>         </button>       </form>     </div>   </div>   <ng-template #loading>Loading...</ng-template> `, styles: [...]})export class ChatComponent implements OnInit { form = new FormGroup({   message: new FormControl('', { nonNullable: true }), }); user$ = this.authService.user$; messages$ = this.chatService.messages$; constructor(   private authService: AuthService,   private chatService: ChatService ) {} ngOnInit() {   this.chatService.loadMessages(); } sendMessage() {   const message = this.form.controls.message.value;   this.chatService     .sendMessage(message)     .pipe(       tap(() => {         this.form.reset();       })     )     .subscribe(); } async logout() {   await this.authService.logout(); }}

export class ChatService { ... listenToMessages() {   return this.appwriteAPI.database.client.subscribe(     `databases.chat.collections.messages.documents`,     (res: RealtimeResponseEvent<Message>) => {       if (res.events.includes('databases.chat.collections.messages.documents.*.create')) {         const messages: Message[] = [...this._messages$.value, res.payload];         this._messages$.next(messages);       }     }   ); }}

export class ChatComponent implements OnInit, OnDestroy { messageunSubscribe!: () => void; form = new FormGroup({   message: new FormControl('', { nonNullable: true }), }); user$ = this.authService.user$; messages$ = this.chatService.messages$; constructor(   private authService: AuthService,   private chatService: ChatService ) {} ngOnInit() {   this.chatService.loadMessages();   this.messageunSubscribe = this.chatService.listenToMessages(); } ngOnDestroy() {   this.messageunSubscribe(); }}