From e5e8b1697f4b530e2c57a1e7682b4622e7147602 Mon Sep 17 00:00:00 2001
From: Donnie Flood <donnie@floodfx.com>
Date: Thu, 20 Jan 2022 09:24:51 -0700
Subject: [PATCH] working using copy of app.js and hardcoding the data-phx-main
 div into the view template

---
 .vscode/settings.json                  |   2 +-
 package-lock.json                      | 142 ++++++++++++++++++++--
 package.json                           |  12 +-
 src/client/app.ts                      |  24 ++++
 src/server/index.ts                    |  16 +--
 src/server/live/poc_liveview.ts        |  12 +-
 src/server/socket/poc_ws_controller.ts | 162 +++++++++++++++++++++++++
 src/server/socket/types.ts             |  26 +++-
 src/server/views/index.ejs             |  13 +-
 9 files changed, 368 insertions(+), 41 deletions(-)
 create mode 100644 src/client/app.ts
 create mode 100644 src/server/socket/poc_ws_controller.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0d6168bb..c75b2cae 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,7 @@
   "files.exclude": {
     "**/.git": true,
     "**/.DS_Store": true,
-    "**/node_modules": true,
+    // "**/node_modules": true,
     "env*": true
   },
   "css.customData": [
diff --git a/package-lock.json b/package-lock.json
index 106d5256..64bca9e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,11 +20,16 @@
         "http-errors": "^2.0.0",
         "morphdom": "^2.6.1",
         "multer": "^1.4.4",
+        "nprogress": "^0.2.0",
+        "phoenix": "^1.6.6",
+        "phoenix_html": "^3.2.0",
+        "phoenix_live_view": "^0.17.6",
         "reflect-metadata": "^0.1.13",
         "routing-controllers": "^0.9.0",
         "socket-controllers": "^0.0.5",
         "socket.io": "^4.4.1",
-        "socket.io-client": "^4.4.1"
+        "socket.io-client": "^4.4.1",
+        "ws": "^8.4.2"
       },
       "devDependencies": {
         "@types/body-parser": "^1.19.2",
@@ -36,6 +41,7 @@
         "@types/jest": "^27.4.0",
         "@types/multer": "^1.4.7",
         "@types/node": "^17.0.0",
+        "@types/ws": "^8.2.2",
         "eslint": "^8.5.0",
         "jest": "^27.4.7",
         "nodemon": "^2.0.15",
@@ -1982,6 +1988,27 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/reporter-dev-server/node_modules/ws": {
+      "version": "7.5.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
+      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@parcel/resolver-default": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@parcel/resolver-default/-/resolver-default-2.2.1.tgz",
@@ -2776,6 +2803,15 @@
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.0.0.tgz",
       "integrity": "sha512-WAy5txG7aFX8Vw3sloEKp5p/t/Xt8jD3GRD9DacnFv6Vo8ubudAsRTXgxpQwU0mpzY/H8U4db3roDuCMjShBmw=="
     },
+    "node_modules/@types/ws": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.2.2.tgz",
+      "integrity": "sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "16.0.4",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
@@ -8191,6 +8227,27 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "7.5.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
+      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -9139,6 +9196,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "node_modules/nth-check": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
@@ -9587,6 +9649,21 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-KLNHVlrZH8UAoEzeCS1XBI9z5juWz0gZ/+No7j5p/byVINnd+del9H5vtBMzQgZa3ZcUjVVZcQR8bKdnH/FmMg=="
+    },
+    "node_modules/phoenix_html": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/phoenix_html/-/phoenix_html-3.2.0.tgz",
+      "integrity": "sha512-zv7PIZk0MPkF0ax8n465Q6w86+sGAy5cTem6KcbkUbdgxGc0y3WZmzkM2bSlYdSGbLEZfjXxos1G72xXsha6xA=="
+    },
+    "node_modules/phoenix_live_view": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/phoenix_live_view/-/phoenix_live_view-0.17.6.tgz",
+      "integrity": "sha512-2C/Gq+QaBp4h/ZVHhzHqIoVsVShJfZkGAHlR4dtjXM5yZA313sghfaf8a48T/xLHF3j/ObPR/xajmNO856sCsw=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -12569,12 +12646,11 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-      "dev": true,
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.2.tgz",
+      "integrity": "sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==",
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
@@ -14106,6 +14182,15 @@
         "nullthrows": "^1.1.1",
         "serve-handler": "^6.0.0",
         "ws": "^7.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.6",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
+          "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+          "dev": true,
+          "requires": {}
+        }
       }
     },
     "@parcel/resolver-default": {
@@ -14738,6 +14823,15 @@
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.0.0.tgz",
       "integrity": "sha512-WAy5txG7aFX8Vw3sloEKp5p/t/Xt8jD3GRD9DacnFv6Vo8ubudAsRTXgxpQwU0mpzY/H8U4db3roDuCMjShBmw=="
     },
+    "@types/ws": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.2.2.tgz",
+      "integrity": "sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/yargs": {
       "version": "16.0.4",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
@@ -18898,6 +18992,15 @@
         "whatwg-url": "^8.5.0",
         "ws": "^7.4.6",
         "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.6",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
+          "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+          "dev": true,
+          "requires": {}
+        }
       }
     },
     "jsesc": {
@@ -19663,6 +19766,11 @@
         "path-key": "^3.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
@@ -20004,6 +20112,21 @@
         "sha.js": "^2.4.8"
       }
     },
+    "phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-KLNHVlrZH8UAoEzeCS1XBI9z5juWz0gZ/+No7j5p/byVINnd+del9H5vtBMzQgZa3ZcUjVVZcQR8bKdnH/FmMg=="
+    },
+    "phoenix_html": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/phoenix_html/-/phoenix_html-3.2.0.tgz",
+      "integrity": "sha512-zv7PIZk0MPkF0ax8n465Q6w86+sGAy5cTem6KcbkUbdgxGc0y3WZmzkM2bSlYdSGbLEZfjXxos1G72xXsha6xA=="
+    },
+    "phoenix_live_view": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/phoenix_live_view/-/phoenix_live_view-0.17.6.tgz",
+      "integrity": "sha512-2C/Gq+QaBp4h/ZVHhzHqIoVsVShJfZkGAHlR4dtjXM5yZA313sghfaf8a48T/xLHF3j/ObPR/xajmNO856sCsw=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -22241,10 +22364,9 @@
       }
     },
     "ws": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-      "dev": true,
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.2.tgz",
+      "integrity": "sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==",
       "requires": {}
     },
     "xdg-basedir": {
diff --git a/package.json b/package.json
index 17657ed5..ab162435 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "server-build": "tsc --watch -p tsconfig.json",
     "server": "nodemon -e js -w dist dist/index.js",
-    "client-build": "parcel build src/client/index.ts --dist-dir dist/client",
+    "client-build": "parcel build src/client/*.ts --dist-dir dist/client",
     "test": "jest --expand"
   },
   "keywords": [],
@@ -23,11 +23,16 @@
     "http-errors": "^2.0.0",
     "morphdom": "^2.6.1",
     "multer": "^1.4.4",
+    "nprogress": "^0.2.0",
+    "phoenix": "^1.6.6",
+    "phoenix_html": "^3.2.0",
+    "phoenix_live_view": "^0.17.6",
     "reflect-metadata": "^0.1.13",
     "routing-controllers": "^0.9.0",
     "socket-controllers": "^0.0.5",
     "socket.io": "^4.4.1",
-    "socket.io-client": "^4.4.1"
+    "socket.io-client": "^4.4.1",
+    "ws": "^8.4.2"
   },
   "devDependencies": {
     "@types/body-parser": "^1.19.2",
@@ -39,6 +44,7 @@
     "@types/jest": "^27.4.0",
     "@types/multer": "^1.4.7",
     "@types/node": "^17.0.0",
+    "@types/ws": "^8.2.2",
     "eslint": "^8.5.0",
     "jest": "^27.4.7",
     "nodemon": "^2.0.15",
@@ -47,4 +53,4 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/client/app.ts b/src/client/app.ts
new file mode 100644
index 00000000..261e4c6b
--- /dev/null
+++ b/src/client/app.ts
@@ -0,0 +1,24 @@
+import "phoenix_html"
+import { Socket } from "phoenix"
+import NProgress from "nprogress"
+import { LiveSocket } from "phoenix_live_view"
+
+const url = "ws://localhost:3003/live"
+// const url = "/live"
+console.log("connecting to ", url);
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket(url, Socket, { params: { _csrf_token: csrfToken } })
+
+// Show progress bar on live navigation and form submits
+window.addEventListener("phx:page-loading-start", info => NProgress.start())
+window.addEventListener("phx:page-loading-stop", info => NProgress.done())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)
+// @ts-ignore
+window.liveSocket = liveSocket
\ No newline at end of file
diff --git a/src/server/index.ts b/src/server/index.ts
index b7f46bf6..59beff3d 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -6,14 +6,14 @@ import { useSocketServer } from 'socket-controllers';
 import { POCLiveViewComponent } from './live/poc_liveview'
 import { Server as HTTPServer } from 'http';
 import { Server as SocketServer } from 'socket.io';
+import { wsServer } from "./socket/poc_ws_controller";
 
+wsServer.listenerCount
 
 const publicPath = path.join(__dirname, "..", "dist", "client");
 const viewsPath = path.join(__dirname, "..", "src", "server", "views");
 
 
-
-
 const app: Application = createExpressServer({
   controllers: [path.join(__dirname, '/controllers/*controller.js')]
 })
@@ -21,19 +21,11 @@ const app: Application = createExpressServer({
 app.set('view engine', 'ejs');
 app.set("views", viewsPath)
 const server = new HTTPServer(app);
-const io = new SocketServer(server);
 
-// Uncomment if you want to see all socket messages
-// io.on('connection', (socket) => {
-//   socket.onAny((...args) => {
-//     console.log("any event ", args);
-//   })
+// useSocketServer(wsServer, {
+//   controllers: [path.join(__dirname, '/socket/*controller.js')]
 // });
 
-useSocketServer(io, {
-  controllers: [path.join(__dirname, '/socket/*controller.js')]
-});
-
 app.use(express.static(publicPath))
 
 app.get('/', (req: Request, res: Response) => {
diff --git a/src/server/live/poc_liveview.ts b/src/server/live/poc_liveview.ts
index 89024447..f5ae07c4 100644
--- a/src/server/live/poc_liveview.ts
+++ b/src/server/live/poc_liveview.ts
@@ -32,19 +32,19 @@ export class POCLiveViewComponent implements
         </span>
       </div>
 
-      <button phx-click="off" onClick="turnOff()">
+      <button phx-click="off">
         Off
       </button>
 
-      <button phx-click="down" onClick="turnDown()">
+      <button phx-click="down">
         Down
       </button>
 
-      <button phx-click="up" onClick="turnUp()">
+      <button phx-click="up">
         Up
       </button>
 
-      <button phx-click="on" onClick="turnOn()">
+      <button phx-click="on">
         On
       </button>
     </div>
@@ -56,19 +56,15 @@ export class POCLiveViewComponent implements
     console.log("event:", event, socket, ctx);
     switch (event) {
       case 'off':
-        console.log('off');
         ctx.brightness = 0;
         break;
       case 'on':
-        console.log('on');
         ctx.brightness = 100;
         break;
       case 'up':
-        console.log('up');
         ctx.brightness = Math.min(ctx.brightness + 10, 100);
         break;
       case 'down':
-        console.log('down');
         ctx.brightness = Math.max(ctx.brightness - 10, 0);
         break;
     }
diff --git a/src/server/socket/poc_ws_controller.ts b/src/server/socket/poc_ws_controller.ts
new file mode 100644
index 00000000..beb859e8
--- /dev/null
+++ b/src/server/socket/poc_ws_controller.ts
@@ -0,0 +1,162 @@
+import { PocEvent, POCLiveViewComponent } from '../live/poc_liveview';
+import { PhxJoin, PhxEvent, PhxReply, PhxSocketProtocolNames, RenderedNode, PhxSocketProtocol, newHeartbeatReply } from './types';
+import ws from 'ws';
+
+const wsServer = new ws.Server({
+  port: 3003,
+});
+
+wsServer.on('connection', socket => {
+  // console.log("socket connected", socket);
+
+  socket.on('open', () => {
+    console.log("socket opened");
+  });
+  socket.on('message', message => {
+    console.log("message", String(message));
+    // get raw message to string
+    const stringMsg = message.toString();
+    // console.log("message", stringMsg);
+
+    // parse string to JSON
+    const rawPhxMessage = JSON.parse(stringMsg);
+    // console.log("rawPhxMessage", rawPhxMessage);
+
+    // rawPhxMessage must be an array with 5 elements
+    if (typeof rawPhxMessage === 'object' && Array.isArray(rawPhxMessage) && rawPhxMessage.length === 5) {
+      const [joinRef, messageRef, topic, event, payload] = rawPhxMessage;
+      switch (event) {
+        case "phx_join":
+          onPhxJoin(socket, rawPhxMessage as PhxJoin);
+          break;
+        case "heartbeat":
+          onHeartbeat(socket, rawPhxMessage as PhxEvent<any>);
+          break;
+        case "event":
+          onPhxEvent(socket, rawPhxMessage as PhxEvent<unknown>);
+          break;
+        default:
+          console.error("unhandeded event", event);
+      }
+    }
+    else {
+      // unknown message type
+      console.error("unknown message type", rawPhxMessage);
+    }
+
+    // decode phx protocol
+  });
+});
+
+
+function onPhxJoin(socket: any, message: PhxJoin) {
+  // console.log("phx_join", message);
+  // get current context for this socketid
+  // render the view and send response
+  const poc = new POCLiveViewComponent();
+  const pocCtx = poc.mount({}, {}, { id: message[PhxSocketProtocolNames.topic] });
+  const pocView = poc.render(pocCtx);
+
+  // map array of dynamics to object with indiceies as keys
+  const dynamics = pocView.dynamics.reduce((acc: { [key: number]: unknown }, cur, index: number) => {
+    acc[index] = cur;
+    return acc;
+  }, {} as { [key: number]: unknown })
+
+  const rendered: RenderedNode = {
+    ...dynamics,
+    s: pocView.statics
+  }
+
+  const reply: PhxReply = [
+    message[0],
+    message[1],
+    message[2],
+    "phx_reply",
+    {
+      response: {
+        rendered
+      },
+      status: "ok"
+    }
+  ]
+
+  const statics = rendered.s;
+  let html = statics[0];
+  for (let i = 1; i < statics.length; i++) {
+    html += rendered[i - 1] + statics[i];
+  }
+
+  // console.log(html)
+  // console.log("sending phx_reply", reply);
+  socket.send(JSON.stringify(reply), { binary: false }, (err: any) => {
+    if (err) {
+      console.error("error", err)
+    }
+  });
+}
+
+function onPhxEvent(socket: any, message: PhxEvent<unknown>) {
+  // update context
+  // rerun render
+  // send back dynamics if they changed
+  // console.log('socket:', socket);
+  console.log('event:', message);
+
+  const [joinRef, messageRef, topic, event, payload] = message;
+
+  const poc = new POCLiveViewComponent();
+
+  const newPocCtx = poc.handleEvent(payload.event as PocEvent, payload.value, { id: topic });
+
+  const pocView = poc.render(newPocCtx);
+
+  // map array of dynamics to object with indiceies as keys
+  const dynamics = pocView.dynamics.reduce((acc: { [key: number]: string }, cur: string, index: number) => {
+    acc[index] = cur;
+    return acc;
+  }, {} as { [key: string]: string })
+
+  const reply: PhxReply = [
+    message[0],
+    message[1],
+    message[2],
+    "phx_reply",
+    {
+      response: {
+        diff: {
+          ...dynamics
+        }
+      },
+      status: "ok"
+    }
+  ]
+  console.log("sending phx_reply", reply);
+  socket.send(JSON.stringify(reply), { binary: false }, (err: any) => {
+    if (err) {
+      console.error("error", err)
+    }
+  });
+}
+
+// @OnDisconnect()
+// disconnect(@ConnectedSocket() socket: any) {
+//   console.log('client disconnected');
+// }
+
+// }
+
+function onHeartbeat(socket: any, message: PhxEvent<any>) {
+  // console.log("heartbeat", message);
+
+  const hbReply = newHeartbeatReply(message);
+
+  // console.log("sending hbReply", hbReply);
+  socket.send(JSON.stringify(hbReply), { binary: false }, (err: any) => {
+    if (err) {
+      console.error("error", err)
+    }
+  });
+}
+
+export { wsServer };
\ No newline at end of file
diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts
index 1222d1eb..9a556cfa 100644
--- a/src/server/socket/types.ts
+++ b/src/server/socket/types.ts
@@ -7,10 +7,10 @@ export enum PhxSocketProtocolNames {
 }
 
 export type PhxSocketProtocol<Payload> = [
-  joinRef: number,
-  messageRef: number,
-  topic: number,
-  event: "phx_reply" | string,
+  joinRef: string | null, // number
+  messageRef: string, // number
+  topic: "phoenix" | string,
+  event: "phx_reply",
   payload: Payload
 ]
 
@@ -43,4 +43,20 @@ export interface PhxEventPayload<T> {
   value: T
 }
 
-export type PhxEvent<T> = PhxSocketProtocol<PhxEventPayload<T>>
\ No newline at end of file
+export type PhxEvent<T> = PhxSocketProtocol<PhxEventPayload<T>>
+
+//{type: "click", event: "down", value: {value: ""}}
+export type PhxClickEvent = PhxEvent<{ value: { value: string } }>
+
+export const newHeartbeatReply = (incoming: PhxSocketProtocol<{}>): PhxReply => {
+  return [
+    null,
+    incoming[PhxSocketProtocolNames.messageRef],
+    "phoenix",
+    "phx_reply",
+    {
+      response: {},
+      status: "ok"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/server/views/index.ejs b/src/server/views/index.ejs
index f38248b2..463dbe99 100644
--- a/src/server/views/index.ejs
+++ b/src/server/views/index.ejs
@@ -6,11 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="csrf-token" content="<%= csrf_meta_tag %>"/>
     <title><%= page_title %></title>
-    <script defer type="text/javascript" src="index.js"></script>
+    <script defer type="text/javascript" src="app.js"></script>
   </head>
   <body>
     <header>
     </header>
-    <%- inner_content %>
+    <div data-phx-main="true" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1Gc3dHTS1HT0JvN0s2QUxwZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggAcGNh4Y21yxZkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkACJFbGl4aXIuTGl2ZVZpZXdTdHVkaW9XZWIuTGlnaHRMaXZlZAAGcm91dGVyZAAfRWxpeGlyLkxpdmVWaWV3U3R1ZGlvV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkACJFbGl4aXIuTGl2ZVZpZXdTdHVkaW9XZWIuTGlnaHRMaXZlbgYA7DM9eH4BYgABUYA.utPt_2HckhxLrIpxxmlFiDfhi_G4yms2-qA8Xx-zXng" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1Gc3dHTS1HT0JvN0s2QUxwbgYA7DM9eH4BYgABUYA.3jXC38oxjwGwXak4a6JpCqXRFenxqxvjVQ6yxYdkz3s" id="phx-FswGM-GOBo7K6ALp" class="phx-connected" data-phx-root-id="phx-FswGM-GOBo7K6ALp">
+      <main role="main" class="container">
+      <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info"></p>
+
+      <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error"></p>
+
+      <%- inner_content %>
+    </main>
+    </div>
+
   </body>
 </html>
\ No newline at end of file