websocket update works

package.json

@@ -6,6 +6,7 @@
   "devDependencies": {
     "@kitajs/ts-html-plugin": "^1.3.3",
     "@types/express": "^4.17.21",
+    "@types/express-ws": "^3.0.4",
     "@types/node": "^20.10.6",
     "esbuild": "^0.19.11",
     "esbuild-plugin-istanbul": "^0.3.0",
@@ -16,7 +17,9 @@
   },
   "dependencies": {
     "@kitajs/html": "^3.0.10",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "express-ws": "^5.0.2",
+    "ws": "^8.16.0"
   },
   "scripts": {
     "start": "node dist/server/index.js",

server/src/express_app.ts

@@ -1,9 +1,10 @@
-import express from 'express';
+import express, {Router} from 'express';
+import expressWs from 'express-ws';
 
 import {AppDependencies} from './types/app_dependencies';
 import {renderLayout} from './views/layout';
 import {loginRouter, renderLoginPage} from './modules/login';
-import {jamRouter, renderJamPage} from './modules/jam';
+import {initJamRouterWebsocket, jamRouter, renderJamPage} from './modules/jam';
 
 const handlePage = (renderer: () => string | Promise<string>): express.Handler => async (req, res, next) => {
     const page = await Promise.resolve(renderer());
@@ -14,7 +15,7 @@ const handlePage = (renderer: () => string | Promise<string>): express.Handler =
 };
 
 export const initApp = (deps: AppDependencies) => {
-    const app = express();
+    const app = expressWs(express()).app;
 
     app.get('/', handlePage(renderLoginPage));
 
@@ -24,5 +25,7 @@ export const initApp = (deps: AppDependencies) => {
     app.use(jamRouter);
     app.use(loginRouter);
 
+    initJamRouterWebsocket();
+
     return app;
 };

server/src/modules/jam.tsx

@@ -3,12 +3,14 @@
 import Html from '@kitajs/html';
 
 import express from 'express';
+import {WebSocket} from 'ws';
 
 export const jamRouter = express.Router();
 
 enum ROUTES {
     JAM_ACTIONS_ADD_CHORD = '/jam/actions/add_chord',
     JAM_ACTIONS_NEW_JAM = '/jam/actions/new_jam',
+    JAM_ROOM_WEBSOCKET = '/jam/ws',
 }
 
 type JamState = {
@@ -30,29 +32,68 @@ const jamState: JamState = {
     ],
 };
 
+
+const connectedSockets: WebSocket[] = [];
+
+export const initJamRouterWebsocket = () => {
+    jamRouter.ws(ROUTES.JAM_ROOM_WEBSOCKET, (ws, req) => {
+        connectedSockets.push(ws);
+        console.log('ws connected');
+        ws.send(JamView().toString());
+
+        ws.on('message', (msg) => {
+            console.log(msg);
+        });
+
+        ws.on('close', () => {
+            console.log('ws closed');
+            connectedSockets.splice(connectedSockets.indexOf(ws), 1);
+        });
+
+    });
+};
+
+const refreshAll = () => {
+    connectedSockets.forEach((ws) => {
+        ws.send(JamView().toString());
+    });
+}
+
 jamRouter.post<undefined, JSX.Element, undefined, {chord: string}>(ROUTES.JAM_ACTIONS_ADD_CHORD, (req, res) => {
     const {chord} = req.query;
-
     jamState.selectedChords.push(chord);
+
     res.send(JamView());
+    refreshAll();
 });
 
 jamRouter.post<undefined, JSX.Element>(ROUTES.JAM_ACTIONS_NEW_JAM, (req, res) => {
     jamState.selectedChords = [];
+
     res.send(JamView());
+    refreshAll();
 });
 
 export const renderJamPage = () => {
-    return JamView();
+    return JamPage();
 };
 
+export const JamPage = () => {
+    return (
+        <>
+            <div hx-ws="connect:/jam/ws"/>
+            <JamView />
+        </>
+    )
+}
+
 export const JamView = () => {
     const chordNames = jamState.availableChords;
     const selectedChords = jamState.selectedChords;
 
     return (
-        <div id='jam-view' style={{textAlign: 'center'}}>
-            <NewJamButton/>
+        <div id='jam-view' hx-ws='message:replaceOuterHTML' style={{textAlign: 'center'}}>
+            <NewJamButton />
             <ChordSelectorSection availableChords={chordNames} />
             <DraftViewSection selectedChords={selectedChords} />
         </div>

tests-e2e/playwright.config.ts

@@ -12,7 +12,7 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './tests',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  // fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */

tests-e2e/support/components/jam_page_pom.ts

@@ -1,11 +1,13 @@
+import {Page} from '@playwright/test';
+
 export class JamPage {
     constructor(private readonly page: Page) {}
 
     draftedChords = this.page.locator('.drafted-chords');
     chordButtons = this.page.locator('.chord-button');
 
     clickButton = async (name: string) => {
-        await this.page.getByRole('button', {name}).click();
+        await this.page.getByRole('button', {name, exact: true}).click();
         return new Promise((resolve) => setTimeout(resolve, 10));
     }
 
@@ -14,4 +16,9 @@ export class JamPage {
             await this.clickButton(name);
         }
     }
+
+    clickNewJam = async () => {
+        await this.page.getByRole('button', {name: 'New Jam', exact: true}).click();
+        return new Promise((resolve) => setTimeout(resolve, 10));
+    }
 }