Merge pull request #24 from floodfx/phx_join_redirect_phx_leave

support phx_join with redirect and phx_leave protocol messages; fixes…
floodfx · Feb 8, 2022 · 3c7bfd9 · 3c7bfd9
2 parents da66bf5 + 59eae4e
commit 3c7bfd9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/src/server/socket/component_manager.ts b/src/server/socket/component_manager.ts
@@ -25,8 +25,10 @@ export class LiveViewComponentManager {
 
   handleJoin(ws: WebSocket, message: PhxJoinIncoming) {
     const [joinRef, messageRef, topic, event, payload] = message;
-    const { url: urlString } = payload;
-    const url = new URL(urlString);
+    const { url: urlString, redirect: redirectString } = payload;
+    const joinUrl = urlString || redirectString;
+    // checked one of these was defined in MessageRouter
+    const url = new URL(joinUrl!);
     // @ts-ignore
     const urlParams = Object.fromEntries(url.searchParams);
 
@@ -55,7 +57,7 @@ export class LiveViewComponentManager {
 
     // update socket with new context
     liveViewSocket.context = this.context;
-    this.context = this.component.handleParams(urlParams, urlString, liveViewSocket);
+    this.context = this.component.handleParams(urlParams, joinUrl!, liveViewSocket);
 
     const view = this.component.render(this.context);
 

diff --git a/src/server/socket/message_router.ts b/src/server/socket/message_router.ts
@@ -46,8 +46,15 @@ export class MessageRouter {
             console.log("expected component manager for topic", topic);
           }
           break;
+        case "phx_leave":
+          componentManager = this.topicComponentManager[topic];
+          if (componentManager) {
+            componentManager.shutdown();
+            delete this.topicComponentManager[topic];
+          }
+          break;
         default:
-          console.error("unhandeded protocol event", event);
+          console.error("unhandeded protocol event", rawPhxMessage);
       }
     }
     else {
@@ -79,8 +86,13 @@ export class MessageRouter {
 
     // use url to route join request to component
     const [joinRef, messageRef, topic, event, payload] = message;
-    const { url: urlString } = payload;
-    const url = new URL(urlString);
+    const { url: urlString, redirect: redirectString } = payload;
+    const joinUrl = urlString || redirectString;
+    if (!joinUrl) {
+      console.error("no url or redirect in join message", message);
+      return;
+    }
+    const url = new URL(joinUrl);
     const component = router[url.pathname];
     if (!component) {
       console.error("no component found for", url);

diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts
@@ -13,7 +13,7 @@ export type PhxIncomingMessage<Payload> = [
   joinRef: string | null, // number
   messageRef: string, // number
   topic: "phoenix" | string,
-  event: "phx_join" | "event" | "heartbeat" | "live_patch",
+  event: "phx_join" | "event" | "heartbeat" | "live_patch" | "phx_leave",
   payload: Payload
 ]
 
@@ -25,11 +25,19 @@ export type PhxOutgoingMessage<Payload> = [
   payload: Payload
 ]
 
+// guess at Flash shape
+export type PhxFlash = {
+  info?: string
+  error?: string
+}
+
 export interface PhxJoinPayload {
   params: LiveViewMountParams
   session: string
   static: string
-  url: string
+  url?: string
+  redirect?: string
+  flash?: PhxFlash | null
 }
 
 export type PhxJoinIncoming = PhxIncomingMessage<PhxJoinPayload>;