can pass session data... need to use

src/server/live_view_server.ts

@@ -4,7 +4,7 @@ import http, { Server, createServer } from 'http';
 import express from "express";
 import { nanoid } from "nanoid";
 import jwt from "jsonwebtoken";
-import session, { MemoryStore } from "express-session";
+import session, { MemoryStore, SessionData } from "express-session";
 import path from "path";
 import { LiveViewComponentManager } from "./socket/component_manager";
 import { MessageRouter } from "./socket/message_router";
@@ -127,6 +127,10 @@ export class LiveViewServer {
         req.session.csrfToken = nanoid();
       }
 
+      const jwtPayload: Partial<SessionData> = {
+        csrfToken: req.session.csrfToken,
+      }
+
       // mount and render component if found
       const ctx = component.mount({ _csrf_token: req.session.csrfToken, _mounts: -1 }, {}, liveViewSocket);
       const view = component.render(ctx);
@@ -136,7 +140,7 @@ export class LiveViewServer {
         page_title: "Live View",
         csrf_meta_tag: req.session.csrfToken,
         liveViewId,
-        session: jwt.sign(JSON.stringify(req.session), this.signingSecret),
+        session: jwt.sign(jwtPayload, this.signingSecret),
         statics: jwt.sign(JSON.stringify(view.statics), this.signingSecret),
         inner_content: view.toString()
       })

src/server/socket/component_manager.ts

@@ -2,6 +2,7 @@ import { WebSocket } from "ws";
 import { LiveViewComponent, LiveViewSocket } from "..";
 import { newHeartbeatReply, newPhxReply, PhxClickPayload, PhxDiffReply, PhxFormPayload, PhxHeartbeatIncoming, PhxIncomingMessage, PhxJoinIncoming, PhxJoinPayload, PhxLivePatchIncoming, PhxOutgoingMessage } from "./types";
 import jwt from 'jsonwebtoken';
+import { SessionData } from "express-session";
 
 export class LiveViewComponentManager {
 
@@ -29,9 +30,12 @@ export class LiveViewComponentManager {
     const { params: payloadParams, session: payloadSession, static: payloadStatic } = payload;
 
     // TODO - use session from cookie
-    // const session = jwt.verify(payloadSession, this.signingSecret) as any;
-    // console.log("session is", session);
-    const session = {}
+    let session = {}
+    try {
+      session = jwt.verify(payloadSession, this.signingSecret) as Partial<SessionData>;
+    } catch (e) {
+      console.log("failed to decode session", e);
+    }
 
     const liveViewSocket = this.buildLiveViewSocket(ws, topic);
     // pass in phx_join payload params, session, and socket

src/server/socket/message_router.ts

@@ -11,7 +11,6 @@ export class MessageRouter {
   heartbeatRouter: { [key: string]: LiveViewComponentManager } = {};
 
   onMessage(ws: WebSocket, message: WebSocket.RawData, router: LiveViewRouter, connectionId: string, signingSecret: string) {
-    console.log('connectionId', connectionId);
     // parse string to JSON
     const rawPhxMessage: PhxIncomingMessage<unknown> = JSON.parse(message.toString());
 
@@ -60,7 +59,6 @@ export class MessageRouter {
       const cm = this.topicComponentManager[key];
       if (!cm.isHealthy()) {
         cm.shutdown()
-        console.log("deleting", key, " from topicComponentManager");
         delete this.topicComponentManager[key];
       }
     })
@@ -70,7 +68,6 @@ export class MessageRouter {
       const cm = this.heartbeatRouter[key];
       if (!cm.isHealthy()) {
         cm.shutdown()
-        console.log("deleting", key, " from heartbeatRouter");
         delete this.heartbeatRouter[key];
       }
     })
@@ -89,17 +86,11 @@ export class MessageRouter {
       return;
     }
 
-    // TODO - iterate through other component managers and detect dead ones via heartbeat
-    // remove from heartbeat and topic routers
-
     const componentManager = new LiveViewComponentManager(component, signingSecret);
     this.topicComponentManager[topic] = componentManager;
     this.heartbeatRouter[connectionId] = componentManager;
     componentManager.handleJoin(ws, message);
 
-    console.log("heartbeatRouter", Object.keys(this.heartbeatRouter));
-    console.log("topicComponentManager", Object.keys(this.topicComponentManager));
-
   }
 
   onHeartbeat(ws: WebSocket, message: PhxHeartbeatIncoming, topic: string, connectionId: string) {

src/server/types.ts

@@ -1,3 +1,4 @@
+import { SessionData } from "express-session";
 import { WebSocket } from "ws";
 import { HtmlSafeString } from "./templates";
 
@@ -24,7 +25,7 @@ export interface LiveViewSessionParams {
 
 export interface LiveViewComponent<T, P> {
 
-  mount(params: LiveViewMountParams, session: LiveViewSessionParams, socket: LiveViewSocket<T>): T;
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<T>): T;
   render(context: T): LiveViewTemplate;
   handleParams(params: P, url: string, socket: LiveViewSocket<T>): T;
 

src/server/web/views/index.html.ejs

@@ -10,6 +10,7 @@
     <%= page_title %>
   </title>
   <script defer type="text/javascript" src="liveview.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.css" />
 </head>
 
 <body>