forked from hobbyfarm/ui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
websocket ping pong to verify that sockets can be opened (hobbyfarm#208)
* websocket ping pong to verify that sockets can be opened * remove on error methods * Linting * Improve websocket test site * change design
- Loading branch information
Showing
5 changed files
with
133 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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```'; | ||
} | ||
} |