feat: changed websocket liobrary

arai-frontend/angular.json

@@ -35,10 +35,9 @@
             ],
             "scripts": [],
             "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
+            "prerender": false,
+            "ssr": false
+
           },
           "configurations": {
             "production": {

arai-frontend/package.json

@@ -16,6 +16,7 @@
     "@angular/common": "^17.0.0",
     "@angular/compiler": "^17.0.0",
     "@angular/core": "^17.0.0",
+    "@angular/flex-layout": "15.0.0-beta.42",
     "@angular/forms": "^17.0.0",
     "@angular/material": "^17.2.2",
     "@angular/platform-browser": "^17.0.0",
@@ -24,6 +25,7 @@
     "@angular/router": "^17.0.0",
     "@angular/ssr": "^17.0.3",
     "express": "^4.18.2",
+    "json-server": "1.0.0-alpha.23",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.7.4",
     "tslib": "^2.3.0",

arai-frontend/src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
+import { CaseInputComponent } from './case-input/case-input.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet],
+  imports: [RouterOutlet, CaseInputComponent, FlexLayoutModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

arai-frontend/src/app/backend.service.ts

@@ -1,12 +1,11 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { io, Socket } from 'socket.io-client';
-import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInput, UserInputRequest } from './requests-responses';
+import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInputRequest, userInput } from './requests-responses';
 
 @Injectable({
   providedIn: 'root'
 })
 export class BackendService {
-  address = "localhost:1227";
+  address = "localhost:8080";
 
   public genericResponsesArray: GenericResponse[] = [];
   public userInputArray: UserInputRequest[] = [];
@@ -16,7 +15,7 @@ export class BackendService {
   public statisticsOutputResponseArrayEvent = new EventEmitter<StatisticsOutputResponse>();
   
 
-  private socket: Socket =  io(`http://${this.address}`);
+  private websocket: WebSocket | null = null;
 
   constructor() {
     this.connect();
@@ -35,20 +34,19 @@ export class BackendService {
   }
 
   private connect(): void {
-    this.socket = io(`http://${this.address}`);
-    this.socket.on('connect', () => {
-      console.log('Connected to WebSocket server');
-    });
-
+    this.websocket = new WebSocket(`http://${this.address}`);
+    this.websocket.onmessage = (event: MessageEvent) => {
+      this.filterMessages(event as unknown as GenericResponse);
+    };
     // Listen for messages
-    this.socket.on('message', (message: GenericResponse) => {
+    this.websocket.on('message', (message: GenericResponse) => {
       this.filterMessages(message);
     });
   }
 
   public sendMessage(message: GenericRequest): void {
     if(message.request_type === "user_input") {
-      this.userInputArray.push(message as UserInput);
+      this.userInputArray.push(message as UserInputRequest);
     }
     this.socket.emit('message', message);
   }

arai-frontend/src/app/case-input/case-input.component.html

@@ -1 +1,24 @@
-<p>case-input works!</p>
+<form [formGroup]="userInputForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start">
+    <mat-form-field appearance="fill" fxFlex>
+      <mat-label>Generic Input</mat-label>
+      <input matInput formControlName="generic_input">
+    </mat-form-field>
+  
+    <mat-form-field appearance="fill" fxFlex>
+      <mat-label>Trial Value</mat-label>
+      <input matInput type="number" formControlName="trial_value">
+    </mat-form-field>
+  
+    <mat-form-field appearance="fill" fxFlex>
+      <mat-label>Location</mat-label>
+      <input matInput formControlName="location">
+    </mat-form-field>
+  
+    <div fxFlex fxLayout="column" fxLayoutGap="10px">
+      <mat-checkbox formControlName="experts_called">Experts Called</mat-checkbox>
+      <mat-checkbox formControlName="witnesses_called">Witnesses Called</mat-checkbox>
+    </div>
+  
+    <button mat-raised-button type="submit" (click)="onSubmit()" fxFlexAlign="end">Submit</button>
+  </form>
+  

arai-frontend/src/app/case-input/case-input.component.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatCheckboxModule } from '@angular/material/checkbox'
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button'
+import { BackendService } from '../backend.service';
+import { UserInputRequest, userInput } from '../requests-responses';
 
 
 @Component({
@@ -10,14 +13,35 @@ import { MatCheckboxModule } from '@angular/material/checkbox'
   standalone: true,
   imports: [
     // other modules
+    CommonModule,
     MatInputModule,
     MatCheckboxModule,
     ReactiveFormsModule,
-    BrowserAnimationsModule,
+    MatButtonModule
   ],
   templateUrl: './case-input.component.html',
   styleUrl: './case-input.component.scss'
 })
 export class CaseInputComponent {
+  userInputForm: FormGroup;
+  userInput: userInput | null = null;
+
+  constructor(private fb: FormBuilder, private readonly backendService: BackendService) {
+    this.userInputForm = this.fb.group({
+      generic_input: [''],
+      trial_value: [0],
+      location: [''],
+      experts_called: [false],
+      witnesses_called: [false]
+    });
+  }
+
+  onSubmit(): void {
+    if(this.userInput !== null) {
+      this.backendService.sendMessage(new UserInputRequest(this.userInput));
+    } else {
+      console.error(`caseInputComponent, onSubmit, userInput is null!`)
+    }
+  }
 
 }

simple-ws/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "simple-ws",
+  "version": "1.0.0",
+  "description": "",
+  "main": "ws.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "ws": "^8.16.0"
+  }
+}

simple-ws/pnpm-lock.yaml

@@ -0,0 +1,25 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  ws:
+    specifier: ^8.16.0
+    version: 8.16.0
+
+packages:
+
+  /ws@8.16.0:
+    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false

simple-ws/ws.js

@@ -0,0 +1,24 @@
+const WebSocket = require('ws');
+const WebSocketServer = WebSocket.WebSocketServer;
+
+// Initialize a WebSocket Server on port 8080
+const wss = new WebSocketServer({ port: 8080 });
+
+wss.on('connection', function connection(ws) {
+  console.log('A new client connected');
+
+  // Send a message to the client
+  ws.send('Welcome to the WebSocket server!');
+
+  // Listen for messages from the client
+  ws.on('message', function message(data) {
+    console.log(`Received message from client: ${data}`);
+  });
+
+  // Handle client disconnection
+  ws.on('close', () => {
+    console.log('A client disconnected');
+  });
+});
+
+console.log('WebSocket server is running on ws://localhost:8080');