websocket ping pong to verify that sockets can be opened

src/app/app-routing.module.ts

@@ -9,10 +9,12 @@ import { AuthGuard } from './auth.guard';
 import { StepComponent } from './scenario/step.component';
 import { PrintableComponent } from './printable/printable.component';
 import { GuacTerminalComponent } from './scenario/guacTerminal.component';
+import { WebsocketTestComponent } from './websocket-test/websockettest.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/app/home', pathMatch: 'full' },
   { path: 'login', component: LoginComponent },
+  { path: 'test/:url', component: WebsocketTestComponent },
   {
     path: 'add/:accesscode',
     component: AppComponent,

src/app/app.module.ts

@@ -48,6 +48,7 @@ import { VerificationService } from './services/verification.service';
 import { TaskProgressComponent } from './scenario/task-progress/task-progress.component';
 import { TaskModalComponent } from './scenario/task-modal/task-modal.component';
 import { SingleTaskVerificationMarkdownComponent } from './hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component';
+import { WebsocketTestComponent } from './websocket-test/websockettest.component';
 import '@cds/core/icon/register.js';
 import {
   ClarityIcons,
@@ -171,6 +172,7 @@ export function jwtOptionsFactory() {
     TaskProgressComponent,
     TaskModalComponent,
     SingleTaskVerificationMarkdownComponent,
+    WebsocketTestComponent,
   ],
   imports: [
     BrowserModule,

src/app/websocket-test/websockettest.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="!success">Healthcheck failed</div>
+<div *ngIf="success">Healthcheck Success</div>
+<div *ngIf="!socketInProgress && !socketSuccess">
+  Websocket connection was not established
+</div>
+<div *ngIf="socketSuccess">Websocket connection established.</div>

src/app/websocket-test/websockettest.component.ts

@@ -0,0 +1,57 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-websockettest',
+  templateUrl: './websockettest.component.html',
+  styleUrls: ['./websockettest.component.css'],
+})
+export class WebsocketTestComponent implements OnInit {
+  wsEndpoint: string;
+  endpoint: string;
+  inProgress: boolean = false;
+  success: boolean;
+  socketInProgress: boolean = false;
+  socketSuccess: boolean;
+
+  constructor(private route: ActivatedRoute, private http: HttpClient) {}
+  ngOnInit(): void {
+    this.endpoint =
+      'https://' + this.route.snapshot.params['url'] + '/shell/healthz';
+    this.wsEndpoint =
+      'wss://' + this.route.snapshot.params['url'] + '/shell/websocketTest';
+    this.testConnection();
+  }
+
+  testConnection() {
+    this.inProgress = true;
+    this.http.get(this.endpoint).subscribe(() => {
+      this.success = true;
+      this.testWSConnection();
+      this.inProgress = false;
+    });
+  }
+
+  testWSConnection() {
+    var socket = new WebSocket(this.wsEndpoint);
+    socket.onmessage = (event) => {
+      if (event.data == 'pong') {
+        this.socketSuccess = true;
+      }
+    };
+
+    socket.onopen = () => {
+      socket.send('ping');
+    };
+
+    socket.onerror = () => {
+      this.socketInProgress = true;
+    };
+
+    socket.onerror = () => {
+      this.socketInProgress = false;
+      this.socketSuccess = false;
+    };
+  }
+}