test/postcat
1
0
Fork 0
mirror of https://gitee.com/eolink_admin/postcat.git synced 2024-12-02 03:38:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: catch client socketIO connect failed & tips

Browse Source
This commit is contained in:
夜鹰 2022-09-09 14:28:19 +08:00
parent e4a22a23b4
commit 3a22ea37a2
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
View File

@ -4,7 +4,7 @@
<div>
<nz-select
class="!w-[106px]"
[disabled]="isConnect"
[disabled]="isWsConnect"
[(ngModel)]="model.request.protocol"
formControlName="protocol"
>
@ -18,7 +18,7 @@
i18n-placeholder
placeholder="Enter URL"
formControlName="uri"
[disabled]="isConnect"
[disabled]="isWsConnect"
[(ngModel)]="model.request.uri"
class="left-1"
name="uri"
@ -27,19 +27,19 @@
</nz-form-control>
</nz-form-item>
<div class="flex px-1">
<button class="mx-1 w-28" *ngIf="isConnect === false" nz-button nzType="primary" (click)="handleConnect(null)">
<button class="mx-1 w-28" *ngIf="isWsConnect === false" nz-button nzType="primary" (click)="handleConnect(null)">
Connect
</button>
<button class="mx-1 w-28" *ngIf="isConnect === null" disabled nz-button nzType="default">Connecting</button>
<button class="mx-1 w-28" *ngIf="isWsConnect === null" disabled nz-button nzType="default">Connecting</button>
<button
class="mx-1 w-28"
*ngIf="isConnect === true"
*ngIf="isWsConnect === true"
nz-button
nzDanger
nzType="default"
(click)="handleConnect(false)"
>
Disconnect
DisWsConnect
</button>
</div>
</form>
@ -58,11 +58,11 @@
<span
i18n="@@RequestHeaders"
nz-tooltip
[nzTooltipTitle]="isConnect ? 'Editable only before connection' : ''"
[nzTooltipTitle]="isWsConnect ? 'Editable only before connection' : ''"
>Headers</span
>
</ng-template>
<fieldset [disabled]="isConnect">
<fieldset [disabled]="isWsConnect">
<eo-api-test-header
class="eo_theme_iblock bbd"
[(model)]="model.request.requestHeaders"
@ -72,11 +72,11 @@
</nz-tab>
<nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
<ng-template #queryTitleTmp>
<span i18n nz-tooltip [nzTooltipTitle]="isConnect ? 'Editable only before connection' : ''"
<span i18n nz-tooltip [nzTooltipTitle]="isWsConnect ? 'Editable only before connection' : ''"
>Query Params</span
>
</ng-template>
<fieldset [disabled]="isConnect">
<fieldset [disabled]="isWsConnect">
<eo-api-test-query
class="eo_theme_iblock bbd"
[model]="model.request.queryParams"
@ -105,7 +105,7 @@
nz-button
class="mx-1"
nzType="primary"
[disabled]="!isConnect || !model.msg"
[disabled]="!isWsConnect || !model.msg"
(click)="handleSendMsg()"
>
Send
@ -121,8 +121,8 @@
<section bottom class="h-full">
<div class="flex items-center justify-between p-3">
<span class="font-bold">Messages</span>
<span class="px-2 py-1 font-semibold status" [ngClass]="'status_' + renderStatus(isConnect)">{{
renderStatus(isConnect)
<span class="px-2 py-1 font-semibold status" [ngClass]="'status_' + renderStatus(isWsConnect)">{{
renderStatus(isWsConnect)
}}</span>
</div>
<ul class="p-2 overflow-auto" style="height: calc(100% - 48px)">

28
src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
View File

@ -36,7 +36,8 @@ export class WebsocketComponent implements OnInit, OnDestroy {
@Input() bodyType = 'json';
@Output() modelChange = new EventEmitter<testViewModel>();
@Output() eoOnInit = new EventEmitter<testViewModel>();
isConnect = false;
isWsConnect = false;
isSocketConnect = false;
socket = null;
model: testViewModel;
WS_PROTOCOL = [
@ -72,8 +73,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
async ngOnInit() {
// * 通过 SocketIO 通知后端
this.socket = io(APP_CONFIG.SOCKETIO_URL, { transports: ['websocket'] });
// receive a message from the server
this.socket.on('ws-client', (...args) => {});
this.socket.on('connect_error', (error) => {
// * conncet socketIO is failed
this.isSocketConnect = false;
});
}
expandMessage(index) {
@ -108,6 +111,16 @@ export class WebsocketComponent implements OnInit, OnDestroy {
console.log('communication is not ready');
return;
}
if (!this.isSocketConnect) {
this.model.response.responseBody = [
{
type: 'end',
msg: 'The test service connection failed, please submit an Issue to contact the community',
isExpand: false,
},
];
return;
}
if (bool === false) {
// * save to test history
this.model.response.responseBody.unshift({
@ -122,11 +135,11 @@ export class WebsocketComponent implements OnInit, OnDestroy {
}
this.socket.emit('ws-server', { type: 'ws-disconnect', content: {} });
this.socket.off('ws-client');
this.isConnect = false;
this.isWsConnect = false;
return;
}
// * connecting
this.isConnect = null;
this.isWsConnect = null;
this.unListen();
const wsUrl = this.model.request.uri;
if (wsUrl === '') {
@ -161,9 +174,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
return;
}
this.socket.on('ws-client', ({ type, status, content }) => {
this.isSocketConnect = true;
if (type === 'ws-connect-back') {
if (status === 0) {
this.isConnect = true;
this.isWsConnect = true;
this.model.requestTabIndex = 2;
const { reqHeader, resHeader } = content;
this.model.response.responseBody.unshift({
@ -186,7 +200,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
title: 'Connected to ' + this.model.request.uri + ` is failed`,
isExpand: false,
});
this.isConnect = false;
this.isWsConnect = false;
}
}
if (type === 'ws-message-back' && status === 0) {