fix: Enhance logic of signalr.

1 files changed, 21 insertions, 30 deletions

diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts
index ff9662ad..2dbd3e4d 100644
--- a/FrontEnd/src/app/services/timeline.ts
+++ b/FrontEnd/src/app/services/timeline.ts
@@ -1,11 +1,9 @@
 import { TimelineVisibility } from "@/http/timeline";
 import XRegExp from "xregexp";
 import { Observable } from "rxjs";
-import { HubConnection, HubConnectionBuilder } from "@microsoft/signalr";
+import { HubConnectionBuilder } from "@microsoft/signalr";
 
-import { UiLogicError } from "@/common";
-
-import { token$ } from "@/http/common";
+import { getHttpToken } from "@/http/common";
 
 const timelineNameReg = XRegExp("^[-_\\p{L}]*$", "u");
 
@@ -22,45 +20,38 @@ export const timelineVisibilityTooltipTranslationMap: Record<
   Private: "timeline.visibilityTooltip.private",
 };
 
-function createTimelineHubConnection(token: string | null): HubConnection {
-  return new HubConnectionBuilder()
-    .withUrl("/api/hub/timeline", {
-      accessTokenFactory: token == null ? undefined : () => token,
-    })
-    .withAutomaticReconnect()
-    .build();
-}
-
-let timelineHubConnection: HubConnection | null = null;
-
-token$.subscribe((token) => {
-  if (timelineHubConnection != null) {
-    void timelineHubConnection.stop();
-  }
-  timelineHubConnection = createTimelineHubConnection(token);
-  void timelineHubConnection.start();
-});
-
-export function getTimelinePostUpdate(
+export function getTimelinePostUpdate$(
   timelineName: string
 ): Observable<string> {
   return new Observable((subscriber) => {
-    if (timelineHubConnection == null)
-      throw new UiLogicError("Connection is null.");
-
-    const connection = timelineHubConnection;
+    const token = getHttpToken();
+    const connection = new HubConnectionBuilder()
+      .withUrl("/api/hub/timeline", {
+        accessTokenFactory: token == null ? undefined : () => token,
+      })
+      .withAutomaticReconnect()
+      .build();
 
     const handler = (tn: string): void => {
       if (timelineName === tn) {
         subscriber.next(tn);
       }
     };
+
     connection.on("OnTimelinePostChanged", handler);
-    void connection.invoke("SubscribeTimelinePostChange", timelineName);
+
+    void connection
+      .start()
+      .then(() =>
+        connection.invoke("SubscribeTimelinePostChange", timelineName)
+      );
 
     return () => {
-      void connection.invoke("UnsubscribeTimelinePostChange", timelineName);
       connection.off("OnTimelinePostChanged", handler);
+
+      void connection
+        .invoke("UnsubscribeTimelinePostChange", timelineName)
+        .then(() => connection.stop());
     };
   });
 }