]> juplo.de Git - demos/kafka/chat/commitdiff
feat: An according `X-Shard` header is send, when a `ChatRoom` is requested
authorKai Moritz <kai@juplo.de>
Sun, 15 Jan 2023 19:04:17 +0000 (20:04 +0100)
committerKai Moritz <kai@juplo.de>
Fri, 19 Sep 2025 10:20:53 +0000 (12:20 +0200)
src/app/app-routing.module.ts
src/app/chatroom.service.ts
src/app/chatroom.ts
src/app/chatroom/chatroom.component.ts
src/app/chatrooms/chatrooms.component.html

index 4809bddf6340b17ce766d831a07ddcb30d26e967..2e3a20f56944ec1d6a30c9443e02f2b410a1eaeb 100644 (file)
@@ -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' },
 ];
 
index 406cf9424231d424d55eb8e972c5e9a5da46209d..a2b039b36dc53f7fe9a6252679cca860cb7f8190 100644 (file)
@@ -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);
index 8eb1ec83a964596f8a0d32c3892b106c4c3ccfa0..9539823f0ca7759bc012118a020cccb044951074 100644 (file)
@@ -1,5 +1,6 @@
 export interface Chatroom
 {
   id: string,
-  name: string
+  name: string,
+  shard: number
 }
index 3f50feee7cd90609bc7f5dea35ade0d57c6cb57b..b9ad799f4749848a592e7c5b8a69ce32a0d9995d 100644 (file)
@@ -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) });
index 1babd5225c92f794f18d048c3de30ec1a1fc42b0..76aa148d027c16d04b021755383fa9e28ff7c325 100644 (file)
@@ -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>