A rabbit hole, but at least it should

• [x] prevent feedbacks
• [x] prevent out-of-sync GUIs (maybe send a "beacon"/state of the server?)

It seems the more delay/lag we have via network the worser it gets

Does not work as expected on smartphones (they dont use mouseup)

https://github.com/capital-G/webRTCgui/blob/07e9b6e9187856d17a135c41663e98a299d4e3a2/js/src/components/ControllerSlider.vue#L33-L40

Currently it seems the wss connections are rejected by the server, see

Firefox can’t establish a connection to the server at wss://remote.dennis-scheiba.com/socket.io/?EIO=4&transport=websocket&sid=_2cYrudD3-U8XHojAAAG.

Thankfully socket.io falls back on a simple get/post workflow so it still works.

Currently the remote deployment does not work because we build against the wrong socket address, see

https://github.com/capital-G/webRTCgui/blob/4c98636d1e0c85613feac095508fb64f9b1e47ab/js/src/services/socketio.service.ts#L6

2 ways to solve this

• inject the URL as argument during build time
• use the same host url as the current visited url - maybe this is a good fallback for the first usecase

Not a deal breaker, but I wasn't sure if the "DemonWidgets" in the quark file is correct? Also, I'd be curious to see how it compares with the WsGUI quark :-)

Originally posted by @dyfer in https://github.com/supercollider-quarks/quarks/issues/130#issuecomment-1344634778

Currently only what controllers are available is synced at startup but not their position. This could probably done for each controller item independently in order to make syncing easier.

First sketch via https://www.planttext.com/

@startuml

rectangle "Local" {
  rectangle "docker" as localdocker {
      frame client {
        rectangle "client.js:57220" as LocalClient
      }
    }
    frame "SuperCollider" {
      rectangle "sclang:57120" as sclang
    }
}

rectangle "Server" {
  rectangle "docker" {
  frame "backend" {
    rectangle ":3000" <<express>> as express
  }
  frame "frontend" {
    rectangle ":8080" <<vue>> as vue
  }
  }
  
  frame "nginx" {
    rectangle ":80" <<webserver>> as webserver
  }

}

cloud "Remote Clients" as RemoteClients


RemoteClients <-> webserver : "WebRTC"


vue -> webserver : "http"
express <-> webserver : "ws"


LocalClient <--> webserver : "WebRTC"

sclang <-> LocalClient : "OSC"


@enduml

Frontend relies on VUE_APP_SOCKET_ENDPOINT which is declared in gitignored ./frontend/.venv - should be handeled better, also consider this for static build

@mouseon/@mouseoff seem to work good in theory but they do not work on touch interfaces and also don't work fast (enough?) when one just clicks on a section instead of dragging it.

closes #26 by improving the detection of the socketio host. The steps are:

• use export VUE_APP_SOCKET_ENDPOINT=https://my-custom-ws.com:4000 env variable if set - this needs to be set during build time of the docker container - useful if the websocket host deviates (e.g. different host or port)
• if host == localhost -> use localhost:3000 as the vue development server (port 8080) has no websocket initaited which runs under 3000 in the dev setup
• otherwise use the base address of the website

We currently ignore the values that we receive from other clients in the frontend. This bug was introduced by the rewriting in typescript which changed the behavior of how we distribute the receiving channels. Maybe its best to fix this properly by adding a state management?

https://github.com/capital-G/webRTCgui/blob/59dce5df8f0968afe3c0ba5ac1478b1d78b0a8bb/docker-compose.client.yml#L11-L13

host.docker.internal is a macOS/Windows featuer, for linux see https://stackoverflow.com/questions/48546124/what-is-linux-equivalent-of-host-docker-internal

Creating webrtcgui_client_1 ... done
Attaching to webrtcgui_client_1                                                                                                    
client_1  |  
client_1  | > [email protected] client /root/web_rtc_gui 
client_1  | > ts-node --esm src/client.ts 
client_1  |  
client_1  | Start client 
client_1  | Backend address: https://remote.dennis-scheiba.com 
client_1  | SuperCollider address: host.docker.internal:57120 
client_1  | Client port: 57220 
client_1  | Auth token: "somePW" 
client_1  | Started client 
client_1  | Connected to server 
client_1  | Received freq: 113.30357142857143 
client_1  | Received freq: 119.75 
client_1  | Received freq: 132.98214285714286 
client_1  | Received freq: 152.32142857142856 
client_1  | Received freq: 167.92857142857142 
client_1  | Error: getaddrinfo ENOTFOUND host.docker.internal 
client_1  |     at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:71:26) { 
client_1  |   errno: -3008, 
client_1  |   code: 'ENOTFOUND', 
client_1  |   syscall: 'getaddrinfo', 
client_1  |   hostname: 'host.docker.internal' 
client_1  | } 
client_1  | npm ERR! code ELIFECYCLE 
client_1  | npm ERR! errno 1 
client_1  | npm ERR! [email protected] client: `ts-node --esm src/client.ts` 
client_1  | npm ERR! Exit status 1 
client_1  | npm ERR!  
client_1  | npm ERR! Failed at the [email protected] client script. 
client_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 
client_1  |  
client_1  | npm ERR! A complete log of this run can be found in: 
client_1  | npm ERR!     /root/.npm/_logs/2022-12-15T16_03_32_530Z-debug.log 
webrtcgui_client_1 exited with code 1