Cleanly disconnect from the update stream if possible

client/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

client/Dockerfile

@@ -0,0 +1,10 @@
+FROM node
+# user node has UID 1000 in the container
+USER node
+EXPOSE 5173
+VOLUME /client
+WORKDIR /client
+ADD package.json yarn.lock tsconfig.json tsconfig.node.json vite.config.ts /client/
+RUN yarn
+ADD public/ src/ index.html /client/
+

client/src/state.ts

@@ -18,12 +18,6 @@ export const state = reactive({
         source.addEventListener('TickAdded', event => {
             console.log(event)
             const tick: Tick = JSON.parse(event.data)
-            // for (const track of this.tracks) {
-            //     if (track.id === tick.track_id) {
-            //         console.debug('pushing tick')
-            //         track.ticks?.push(tick)
-            //     }
-            // }
             const tracks = this.tracks.map(track => {
                 if (track.id === tick.track_id) {
                     const ticks = track.ticks ?? []
@@ -33,22 +27,17 @@ export const state = reactive({
                 }
                 return track
             })
-            console.debug(tracks)
             this.tracks = tracks
         })
         source.addEventListener('TickDropped', event => {
             console.log(event)
             const tick: Tick = JSON.parse(event.data)
-            // for (const track of this.tracks)
-            //     if (track.id === tick.track_id)
-            //         track.ticks = track.ticks?.filter($tick => $tick.id === tick.id)
             const tracks = this.tracks.map(track => {
                 if (track.id === tick.track_id) {
                     track.ticks = track.ticks?.filter($tick => $tick.id !== tick.id)
                 }
                 return track
             })
-            console.debug(tracks)
             this.tracks = tracks
         })
         source.addEventListener('Lagged', event => {
@@ -60,6 +49,7 @@ export const state = reactive({
             error(event)
             window.location = window.location
         })
+        window.addEventListener('beforeunload', () => source.close())
     },
     async repopulate() {
         this.state = State.Fetching

docker-compose_dev.yml

@@ -37,11 +37,9 @@ services:
       - ./db.mount:/var/lib/postgresql/data
 
   client_devserver:
-    image: node
+    build: ./client
     volumes: [ ./client:/client/ ]
-    working_dir: /client
-    command: [ "sh", "-c", "yarn && yarn dev --host 0.0.0.0" ]
-    expose: [ 5173 ]
+    command: "yarn dev --host 0.0.0.0"
     networks: [ web ]
     labels:
       traefik.enable: true