From: Kai Moritz <kai@juplo.de>
Date: Sun, 15 Jan 2023 19:04:17 +0000 (+0100)
Subject: feat: An according `X-Shard` header is send, when a `ChatRoom` is requested
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=4e86dd33fd36dee0db82806860af2aaf50573bf9;p=demos%2Fkafka%2Fchat

feat: An according `X-Shard` header is send, when a `ChatRoom` is requested
---

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4809bddf..2e3a20f5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,7 +7,7 @@ import { ChatroomComponent } from "./chatroom/chatroom.component";
 const routes: Routes = [
   { path: 'user', component: UserComponent },
   { path: 'chatrooms', component: ChatroomsComponent },
-  { path: 'chatroom/:id', component: ChatroomComponent },
+  { path: 'chatroom/:shard/:id', component: ChatroomComponent },
   { path: '', redirectTo: '/user', pathMatch: 'full' },
 ];
 
diff --git a/src/app/chatroom.service.ts b/src/app/chatroom.service.ts
index 406cf942..a2b039b3 100644
--- a/src/app/chatroom.service.ts
+++ b/src/app/chatroom.service.ts
@@ -26,11 +26,13 @@ export class ChatroomService {
     return this.http.get<Chatroom[]>(this.backendUri + 'list');
   }
 
-  getChatroom(id: String): Observable<Chatroom> {
-    return this.http.get<Chatroom>(this.backendUri + id);
+  getChatroom(shard: string, id: string): Observable<Chatroom> {
+    return this.http.get<Chatroom>(
+      this.backendUri + id,
+      { headers: { 'X-Shard': shard }});
   }
 
-  listen(id: String): Observable<Message> {
+  listen(shard: string, id: string): Observable<Message> {
     let observable = new Observable<Message>(
       (observer) => {
         this.channel = observer;
@@ -45,7 +47,8 @@ export class ChatroomService {
     let uri: string = this.backendUri + id + '/listen';
     let service = this;
 
-    fetchEventSource(uri, {
+    fetchEventSource(uri,{
+      headers: { 'X-Shard': shard },
       async onopen(response) {
         if (response.ok && response.status === 200) {
           console.log('Opend channel ' + uri, response);
diff --git a/src/app/chatroom.ts b/src/app/chatroom.ts
index 8eb1ec83..9539823f 100644
--- a/src/app/chatroom.ts
+++ b/src/app/chatroom.ts
@@ -1,5 +1,6 @@
 export interface Chatroom
 {
   id: string,
-  name: string
+  name: string,
+  shard: number
 }
diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts
index 3f50feee..b9ad799f 100644
--- a/src/app/chatroom/chatroom.component.ts
+++ b/src/app/chatroom/chatroom.component.ts
@@ -12,7 +12,7 @@ import { Message } from '../message';
 })
 export class ChatroomComponent implements OnInit, OnDestroy {
 
-  chatroom: Chatroom = { id: 'FOO', name: 'BAR' };
+  chatroom: Chatroom = { id: 'FOO', name: 'BAR', shard: -1 };
   messages: Message[] = [];
 
   constructor(
@@ -29,21 +29,22 @@ export class ChatroomComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.chatroomsService.unlisten();
-    this.chatroom = { id: 'FOO', name: 'BAR' };
+    this.chatroom = { id: 'FOO', name: 'BAR', shard: -1 };
   }
 
   getChatroom(): void {
     const id: string | null = this.route.snapshot.paramMap.get('id');
-    if (id === null) {
-      console.log("ID for chatroom is missing in URI");
+    const shard: string | null = this.route.snapshot.paramMap.get('shard');
+    if (id === null || shard === null) {
+      console.log("ID and shard for chatroom is missing in URI");
       this.router.navigate(['chatrooms']);
     }
     else {
       this.chatroomsService
-        .getChatroom(id)
+        .getChatroom(shard, id)
         .subscribe(chatroom => this.chatroom = chatroom);
       this.chatroomsService
-        .listen(id)
+        .listen(shard, id)
         .subscribe({
           next: message => this.zone.run(() => this.messages.push(message)),
           error: err => console.error('something wrong occurred: ' + err) });
diff --git a/src/app/chatrooms/chatrooms.component.html b/src/app/chatrooms/chatrooms.component.html
index 1babd522..76aa148d 100644
--- a/src/app/chatrooms/chatrooms.component.html
+++ b/src/app/chatrooms/chatrooms.component.html
@@ -3,6 +3,6 @@
     <h1 class="h5">Please Choose a Chat-Room</h1>
   </div>
   <div class="card-body d-grid gap-1">
-    <button *ngFor="let chatroom of chatrooms" routerLink="/chatroom/{{chatroom.id}}" type="button" class="btn btn-outline-primary">{{chatroom.name}}</button>
+    <button *ngFor="let chatroom of chatrooms" routerLink="/chatroom/{{chatroom.shard}}/{{chatroom.id}}" type="button" class="btn btn-outline-primary">{{chatroom.name}}</button>
   </div>
 </div>