Fix websocket communication

Author: csutorasa

.vscode/tasks.json

@@ -50,6 +50,7 @@
             "type": "shell",
             "args": [
                 "-r",
+                "--workspace-concurrency=1",
                 "run",
                 "build"
             ]

@xoutput/client/package.json

@@ -28,7 +28,7 @@
   "author": "Ármin Csutorás",
   "license": "MIT",
   "dependencies": {
-    "@xoutput/api": "workspace:../api"
+    "@xoutput/api": "workspace:*"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.10.0",

@xoutput/client/pnpm-lock.yaml

@@ -26,11 +26,11 @@ export const inputDeviceClient = {
         return session;
       })
       .then(
-        (session) =>
-          ({
-            ...session,
-            sendInput: (input: InputDeviceInputRequest) => session.sendMessage(input),
-          }) as WebSocketSession<InputDeviceMessageSender>
+        (session) => {
+          const enhancedSession = session as WebSocketSession<InputDeviceMessageSender>;
+          enhancedSession.sendInput = (input: InputDeviceInputRequest) => session.sendMessage(input);
+          return enhancedSession;
+        }
       );
   },
 };

@xoutput/client/src/websocket/input/InputDeviceClient.ts

@@ -1,9 +1,9 @@
 import { DebugRequest, MessageBase, PongResponse } from '@xoutput/api';
 
 export class WebSocketService {
-  connect(path: string, onMessage: (data: MessageBase) => void): Promise<WebSocketSessionImpl> {
+  connect(path: string, onMessage: (data: MessageBase) => void): Promise<WSSession> {
     return new Promise((resolve, reject) => {
-      const url = `/websocket/${path}`;
+      const url = `ws://${location.host}/websocket/${path}`;
       const websocket = new WebSocket(url);
       let session: WebSocketSessionImpl;
       let pingInterval: number;

@xoutput/client/src/websocket/websocket.ts

@@ -14,11 +14,11 @@ export const xboxDeviceClient = {
         }
       })
       .then(
-        (session) =>
-          ({
-            ...session,
-            sendInput: (input: XboxInputRequest) => session.sendMessage(input),
-          }) as WebSocketSession<XboxInputMessageSender>
+        (session) => {
+          const enhancedSession = session as WebSocketSession<XboxInputMessageSender>;
+          enhancedSession.sendInput = (input: XboxInputRequest) => session.sendMessage(input);
+          return enhancedSession;
+        }
       );
   },
 };

@xoutput/client/src/websocket/xbox/XboxDeviceClient.ts

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "tsc && vite build",
-    "watch": "vite dev",
+    "watch": "vite",
     "lint": "eslint",
     "fix-format": "eslint --fix && prettier --write \"src/**/*.{ts,tsx}\"",
     "test": "echo \"No test specified\""
@@ -21,8 +21,8 @@
     "@mui/material": "^5.14.17",
     "@mui/styled-engine": "^5.14.17",
     "@mui/system": "^5.14.17",
-    "@xoutput/api": "workspace:../api",
-    "@xoutput/client": "workspace:../client",
+    "@xoutput/api": "workspace:*",
+    "@xoutput/client": "workspace:*",
     "moment": "^2.29.4",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

@xoutput/webapp/package.json

@@ -16,7 +16,7 @@ export class GamepadReader {
 
   constructor(public gamepad: Gamepad) {}
 
-  start(intervalMs = 1): Promise<void> {
+  start(intervalMs = 10): Promise<void> {
     if (this.intervalId) {
       return;
     }
@@ -75,9 +75,9 @@ export class GamepadReader {
 
   stop(): void {
     if (this.intervalId) {
-      clearInterval(this.intervalId);
       this.session.close();
       this.session = undefined;
+      clearInterval(this.intervalId);
       this.intervalId = undefined;
     }
   }

@xoutput/webapp/pnpm-lock.yaml

@@ -24,7 +24,8 @@ const GamepadComponent = ({ gamepad }: GamepadProps) => {
         () => {
           setRunning(true);
         },
-        () => {
+        (err) => {
+          console.error(err);
           /*error handling*/
         }
       );

@xoutput/webapp/src/gamepad/GamepadReader.ts

@@ -11,7 +11,8 @@ export default defineConfig({
   },
   plugins: [react()],
   server: {
-    port: 8080,
+    port: 8080, 
+    open: true,
     proxy: {
       '/api': 'http://localhost:8000',
       '/websocket': {

@xoutput/webapp/src/ui/input/Gamepad.tsx

@@ -11,3 +11,17 @@ The web application requires Node 20 to build it, you can [download it](https://
 ```shell
 npm install --global pnpm
 ```
+
+Install dependencies and build the application.
+
+```shell
+pnpm --recursive install
+pnpm --recursive run build
+```
+
+For development, there is a development server and watch builds.
+
+```shell
+pnpm --recursive run watch
+```
+

@xoutput/webapp/vite.config.js

@@ -9,7 +9,12 @@ The 4.x version client is built with .NET 7, you will need to [download it](http
 | Running the reader application | .NET Desktop Runtime |
 | Building the application       | SDK                  |
 
-However these runtimes and SDKs are cross platform the application is only compatible with Windows.
+The SDK is only compatible with Windows.
+
+```shell
+dotnet restore
+dotnet run
+```
 
 ### Reader application
 

docs/browser-client.md

@@ -11,6 +11,11 @@ The 4.x version backend is built with .NET 7, you will need to [download it](htt
 
 However these runtimes and SDKs are cross platform the application is only compatible with Windows.
 
+```shell
+dotnet restore
+dotnet run
+```
+
 ## Server application
 
 The server application is responsible for:

docs/desktop-client.md

@@ -11,6 +11,9 @@
   "url": "https://github.com/csutorasa/XOutput/issues",
   "author": "Ármin Csutorás",
   "license": "MIT",
+  "scripts": {
+    "prdocution": "pnpm --recursive --workspace-concurrency=1 run build"
+  },
   "engines": {
     "node": ">=20.0.0",
     "npm": "use-pnpm-instead",