Skip to content

Commit

Permalink
websocket ping pong to verify that sockets can be opened (hobbyfarm#208)
Browse files Browse the repository at this point in the history
* websocket ping pong to verify that sockets can be opened

* remove on error methods

* Linting

* Improve websocket test site

* change design
  • Loading branch information
jggoebel authored Jun 24, 2024
1 parent b3435a9 commit db2085e
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -171,6 +172,7 @@ export function jwtOptionsFactory() {
TaskProgressComponent,
TaskModalComponent,
SingleTaskVerificationMarkdownComponent,
WebsocketTestComponent,
],
imports: [
BrowserModule,
Expand Down
8 changes: 8 additions & 0 deletions src/app/websocket-test/websockettest.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
as-split-area {
margin-left: 10px;
}

.success {
color: green;
font-weight: bold;
}
43 changes: 43 additions & 0 deletions src/app/websocket-test/websockettest.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<div class="main-container">
<header class="header header-4">
<div class="branding">
<a>
<cds-icon shape="logo"></cds-icon>
<span class="title">{{ title }}</span>
</a>
</div>
</header>

<as-split unit="percent" direction="horizontal">
<as-split-area [size]="50" class="split-area-1">
<h1>Websocket Tester</h1>
This page is dedicated to test if the websocket for the shell proxy is
reachable. If it is reachable you should be able to see
<ol>
<li>/healthz endpoint responding with 200</li>
<li>Websocket being opened</li>
<li>Client sending a ping</li>
<li>Websocket responding with pong</li>
</ol>
<h2>Troubleshooting</h2>
If the /healthz endopoint is not responding you should check if the shell
proxy is up and running. Also verify that {{ endpoint }} is the correct
URL to the proxy. If the endpoint responds with 200 but the websocket is
not being opened, you should verify that no firewall is in place that
disallows the usage of websockets for {{ endpoint }}
</as-split-area>

<as-split-area [size]="50" class="split-area-2">
<h1>Testing {{ target }}:</h1>
<app-hf-markdown
[content]="markdownString"
[context]="mdContext"
></app-hf-markdown>

<div *ngIf="completed">
Check successfully completed and websocket reachable.
<cds-icon shape="success-standard" inverse class="success"></cds-icon>
</div>
</as-split-area>
</as-split>
</div>
78 changes: 78 additions & 0 deletions src/app/websocket-test/websockettest.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HfMarkdownRenderContext } from '../hf-markdown/hf-markdown.component';
import { AppConfigService } from '../app-config.service';

@Component({
selector: 'app-websockettest',
templateUrl: './websockettest.component.html',
styleUrls: ['./websockettest.component.css'],
})
export class WebsocketTestComponent implements OnInit {
target: string;
wsEndpoint: string;
endpoint: string;

completed: boolean;

mermaidString = 'sequenceDiagram';
markdownString = '';
mdContext: HfMarkdownRenderContext = { vmInfo: {}, session: '' };

private Config = this.config.getConfig();
public title = this.Config.title || "Rancher's Hobby Farm";

constructor(
private config: AppConfigService,
private route: ActivatedRoute,
private http: HttpClient,
) {}
ngOnInit(): void {
this.target = this.route.snapshot.params['url'];
this.endpoint = 'https://' + this.target + '/shell/healthz';
this.wsEndpoint = 'wss://' + this.target + '/shell/websocketTest';
this.testConnection();
}

testConnection() {
this.addMermaidString('you', this.target, '/shell/healthz');
this.http.get(this.endpoint).subscribe({
next: () => {
this.addMermaidString(this.target, 'you', '200, OK');
this.testWSConnection();
},
error: (msg) => {
console.log(msg);
this.addMermaidString(this.target, 'you', msg.code);
},
});
}

testWSConnection() {
this.addMermaidString('you', this.target, 'open websocket', '+');
const socket = new WebSocket(this.wsEndpoint);
socket.onmessage = (event) => {
if (event.data == 'pong') {
this.addMermaidString(this.target, 'you', 'pong', '-');
this.completed = true;
}
};

socket.onopen = () => {
this.addMermaidString(this.target, 'you', 'websocket opened');
socket.send('ping');
this.addMermaidString('you', this.target, 'ping');
};
}

addMermaidString(
from: string,
to: string,
content: string,
opChar: string = '',
) {
this.mermaidString += '\n ' + from + '->>' + opChar + to + ': ' + content;
this.markdownString = '```mermaid\n' + this.mermaidString + '\n```';
}
}

0 comments on commit db2085e

Please sign in to comment.