working using copy of app.js and hardcoding the data-phx-main div int…

…o the view template

.vscode/settings.json

@@ -11,7 +11,7 @@
   "files.exclude": {
     "**/.git": true,
     "**/.DS_Store": true,
-    "**/node_modules": true,
+    // "**/node_modules": true,
     "env*": true
   },
   "css.customData": [

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"
   }
-}
+}

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

src/server/index.ts

@@ -6,34 +6,26 @@ 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')]
 })
 
 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) => {