Skip to content

Commit 8dd6dd4

Browse files
bayasdevbayasdev
authored
Use native WebSocket API (#3248)
1 parent 5e64c96 commit 8dd6dd4

File tree

9 files changed

+59
-174
lines changed

9 files changed

+59
-174
lines changed

‎web-app/package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
"recharts": "^2.10.3",
2929
"styled-components": "^5.3.11",
3030
"superagent": "^8.0.8",
31-
"tinycolor2": "^1.6.0",
32-
"websocket": "^1.0.31"
31+
"tinycolor2": "^1.6.0"
3332
},
3433
"scripts": {
3534
"start": "PORT=5005 react-scripts start",
@@ -76,7 +75,6 @@
7675
"@types/recharts": "^1.8.29",
7776
"@types/superagent": "^4.1.24",
7877
"@types/webpack-env": "^1.18.2",
79-
"@types/websocket": "^1.0.10",
8078
"babel-plugin-istanbul": "^6.1.1",
8179
"customize-cra": "^1.0.0",
8280
"minio": "^7.1.3",
@@ -103,7 +101,6 @@
103101
"react-scripts/**/json5": "^2.2.2",
104102
"react-scripts/**/debug": "^3.1.0",
105103
"recharts/**/d3-color": "^3.1.0",
106-
"websocket/debug": "^3.1.0",
107104
"fast-xml-parser": "^4.3.4",
108105
"semver": "^7.5.2",
109106
"testcafe/**/tough-cookie": "^4.1.3",

‎web-app/src/screens/Console/HealthInfo/HealthInfo.tsx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,6 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
import React, { Fragment, useEffect, useState } from "react";
17-
import {
18-
ICloseEvent,
19-
IMessageEvent,
20-
w3cwebsocket as W3CWebSocket,
21-
} from "websocket";
2217
import { useSelector } from "react-redux";
2318
import { useNavigate } from "react-router-dom";
2419
import { Box, Button, Grid, HelpBox, InfoIcon, Loader, PageLayout } from "mds";
@@ -139,28 +134,25 @@ const HealthInfo = () => {
139134
const baseLocation = new URL(document.baseURI);
140135
const baseUrl = baseLocation.pathname;
141136

142-
const c = new W3CWebSocket(
137+
const socket = new WebSocket(
143138
`${wsProt}://${url.hostname}:${port}${baseUrl}ws/health-info?deadline=1h`,
144139
);
145140
let interval: any | null = null;
146-
if (c !== null) {
147-
c.onopen = () => {
141+
if (socket !== null) {
142+
socket.onopen = () => {
148143
console.log("WebSocket Client Connected");
149-
c.send("ok");
144+
socket.send("ok");
150145
interval = setInterval(() => {
151-
c.send("ok");
146+
socket.send("ok");
152147
}, 10 * 1000);
153148
setMessage(
154149
"Health Report started. Please do not refresh page during diagnosis.",
155150
);
156151
dispatch(setServerDiagStat(DiagStatInProgress));
157152
};
158-
c.onmessage = (message: IMessageEvent) => {
153+
socket.onmessage = (message: MessageEvent) => {
159154
let m: ReportMessage = JSON.parse(message.data.toString());
160155
if (m.serverHealthInfo) {
161-
m.serverHealthInfo.timestamp = new Date(
162-
m.serverHealthInfo.timestamp.toString(),
163-
);
164156
dispatch(healthInfoMessageReceived(m.serverHealthInfo));
165157
}
166158
if (m.encoded !== "") {
@@ -170,13 +162,13 @@ const HealthInfo = () => {
170162
setSubnetResponse(m.subnetResponse);
171163
}
172164
};
173-
c.onerror = (error: Error) => {
174-
console.log("error closing websocket:", error.message);
175-
c.close(1000);
165+
socket.onerror = (error) => {
166+
console.error("error closing websocket:", error);
167+
socket.close(1000);
176168
clearInterval(interval);
177169
dispatch(setServerDiagStat(DiagStatError));
178170
};
179-
c.onclose = (event: ICloseEvent) => {
171+
socket.onclose = (event: CloseEvent) => {
180172
clearInterval(interval);
181173
if (
182174
event.code === WSCloseInternalServerErr ||

‎web-app/src/screens/Console/HealthInfo/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const DiagStatSuccess = "success";
1919
export const DiagStatInProgress = "inProgress";
2020

2121
export interface HealthInfoMessage {
22-
timestamp: Date;
22+
timestamp: string;
2323
error: string;
2424
perf: perfInfo;
2525
minio: minioHealthInfo;

‎web-app/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { Fragment, useEffect, useState } from "react";
18-
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
1918
import { Box, Button, Grid, PageLayout, Select, Table, TableBody } from "mds";
2019
import { useSelector } from "react-redux";
2120
import { ErrorResponseHandler } from "../../../../common/types";
@@ -33,7 +32,7 @@ import LogLine from "./LogLine";
3332
import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
3433
import HelpMenu from "../../HelpMenu";
3534

36-
var c: any = null;
35+
var socket: any = null;
3736

3837
const ErrorLogs = () => {
3938
const dispatch = useAppDispatch();
@@ -61,24 +60,24 @@ const ErrorLogs = () => {
6160
const baseLocation = new URL(document.baseURI);
6261
const baseUrl = baseLocation.pathname;
6362

64-
c = new W3CWebSocket(
63+
socket = new WebSocket(
6564
`${wsProt}://${
6665
url.hostname
6766
}:${port}${baseUrl}ws/console/?logType=${logType}&node=${
6867
selectedNode === "Select node" ? "" : selectedNode
6968
}`,
7069
);
7170
let interval: any | null = null;
72-
if (c !== null) {
73-
c.onopen = () => {
71+
if (socket !== null) {
72+
socket.onopen = () => {
7473
console.log("WebSocket Client Connected");
7574
dispatch(setLogsStarted(true));
76-
c.send("ok");
75+
socket.send("ok");
7776
interval = setInterval(() => {
78-
c.send("ok");
77+
socket.send("ok");
7978
}, 10 * 1000);
8079
};
81-
c.onmessage = (message: IMessageEvent) => {
80+
socket.onmessage = (message: MessageEvent) => {
8281
// console.log(message.data.toString())
8382
// FORMAT: 00:35:17 UTC 01/01/2021
8483

@@ -104,13 +103,13 @@ const ErrorLogs = () => {
104103
dispatch(logMessageReceived(m));
105104
}
106105
};
107-
c.onclose = () => {
106+
socket.onclose = () => {
108107
clearInterval(interval);
109108
console.log("connection closed by server");
110109
dispatch(setLogsStarted(false));
111110
};
112111
return () => {
113-
c.close(1000);
112+
socket.close(1000);
114113
clearInterval(interval);
115114
console.log("closing websockets");
116115
dispatch(setLogsStarted(false));
@@ -119,8 +118,8 @@ const ErrorLogs = () => {
119118
};
120119

121120
const stopLogs = () => {
122-
if (c !== null && c !== undefined) {
123-
c.close(1000);
121+
if (socket !== null && socket !== undefined) {
122+
socket.close(1000);
124123
dispatch(setLogsStarted(false));
125124
}
126125
};

‎web-app/src/screens/Console/Speedtest/Speedtest.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616

1717
import React, { Fragment, useEffect, useState } from "react";
1818
import { useSelector } from "react-redux";
19-
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
2019
import { useNavigate } from "react-router-dom";
2120
import {
2221
Box,
@@ -77,7 +76,7 @@ const Speedtest = () => {
7776
const baseUrl = baseLocation.pathname;
7877

7978
const wsProt = wsProtocol(url.protocol);
80-
const c = new W3CWebSocket(
79+
const socket = new WebSocket(
8180
`${wsProt}://${url.hostname}:${port}${baseUrl}ws/speedtest?&size=${size}${sizeUnit}&duration=${duration}s`,
8281
);
8382

@@ -95,15 +94,15 @@ const Speedtest = () => {
9594
setTotalSeconds(totalSeconds);
9695

9796
let interval: any | null = null;
98-
if (c !== null) {
99-
c.onopen = () => {
97+
if (socket !== null) {
98+
socket.onopen = () => {
10099
console.log("WebSocket Client Connected");
101-
c.send("ok");
100+
socket.send("ok");
102101
interval = setInterval(() => {
103-
c.send("ok");
102+
socket.send("ok");
104103
}, 10 * 1000);
105104
};
106-
c.onmessage = (message: IMessageEvent) => {
105+
socket.onmessage = (message: MessageEvent) => {
107106
const data: SpeedTestResponse = JSON.parse(message.data.toString());
108107

109108
setCurrStatus((prevStatus) => {
@@ -119,15 +118,15 @@ const Speedtest = () => {
119118
const currTime = DateTime.now().toUnixInteger() / 1000;
120119
setCurrentValue(currTime);
121120
};
122-
c.onclose = () => {
121+
socket.onclose = () => {
123122
clearInterval(interval);
124123
console.log("connection closed by server");
125124
// reset start status
126125
setStart(false);
127126
};
128127
return () => {
129128
// close websocket on useEffect cleanup
130-
c.close(1000);
129+
socket.close(1000);
131130
clearInterval(interval);
132131
console.log("closing websockets");
133132
};

‎web-app/src/screens/Console/Support/Profile.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { Fragment, useEffect, useState } from "react";
18-
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
1918
import { Button, PageLayout, FormLayout, Box, Checkbox, InputLabel } from "mds";
2019
import { wsProtocol } from "../../../utils/wsUtils";
2120
import { useNavigate } from "react-router-dom";
@@ -26,7 +25,7 @@ import RegisterCluster from "./RegisterCluster";
2625
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
2726
import HelpMenu from "../HelpMenu";
2827

29-
var c: any = null;
28+
var socket: any = null;
3029

3130
const Profile = () => {
3231
const navigate = useNavigate();
@@ -70,16 +69,16 @@ const Profile = () => {
7069
const baseUrl = baseLocation.pathname;
7170

7271
const wsProt = wsProtocol(url.protocol);
73-
c = new W3CWebSocket(
72+
socket = new WebSocket(
7473
`${wsProt}://${url.hostname}:${port}${baseUrl}ws/profile?types=${typeString}`,
7574
);
7675

77-
if (c !== null) {
78-
c.onopen = () => {
76+
if (socket !== null) {
77+
socket.onopen = () => {
7978
setProfilingStarted(true);
80-
c.send("ok");
79+
socket.send("ok");
8180
};
82-
c.onmessage = (message: IMessageEvent) => {
81+
socket.onmessage = (message: MessageEvent) => {
8382
// process received message
8483
let response = new Blob([message.data], { type: "application/zip" });
8584
let filename = "profile.zip";
@@ -91,20 +90,20 @@ const Profile = () => {
9190
link.click();
9291
document.body.removeChild(link);
9392
};
94-
c.onclose = () => {
93+
socket.onclose = () => {
9594
console.log("connection closed by server");
9695
setProfilingStarted(false);
9796
};
9897
return () => {
99-
c.close(1000);
98+
socket.close(1000);
10099
console.log("closing websockets");
101100
setProfilingStarted(false);
102101
};
103102
}
104103
};
105104

106105
const stopProfiling = () => {
107-
c.close(1000);
106+
socket.close(1000);
108107
setProfilingStarted(false);
109108
};
110109

‎web-app/src/screens/Console/Trace/Trace.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
import React, { Fragment, useEffect, useState } from "react";
1818
import { DateTime } from "luxon";
1919
import { useSelector } from "react-redux";
20-
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
2120
import {
2221
Box,
2322
breakPoints,
@@ -43,7 +42,7 @@ import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
4342
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
4443
import HelpMenu from "../HelpMenu";
4544

46-
var c: any = null;
45+
var socket: any = null;
4746

4847
const Trace = () => {
4948
const dispatch = useAppDispatch();
@@ -85,7 +84,7 @@ const Trace = () => {
8584
const baseUrl = baseLocation.pathname;
8685

8786
const wsProt = wsProtocol(url.protocol);
88-
c = new W3CWebSocket(
87+
socket = new WebSocket(
8988
`${wsProt}://${
9089
url.hostname
9190
}:${port}${baseUrl}ws/trace?calls=${calls}&threshold=${threshold}&onlyErrors=${
@@ -94,29 +93,29 @@ const Trace = () => {
9493
);
9594

9695
let interval: any | null = null;
97-
if (c !== null) {
98-
c.onopen = () => {
96+
if (socket !== null) {
97+
socket.onopen = () => {
9998
console.log("WebSocket Client Connected");
10099
dispatch(setTraceStarted(true));
101-
c.send("ok");
100+
socket.send("ok");
102101
interval = setInterval(() => {
103-
c.send("ok");
102+
socket.send("ok");
104103
}, 10 * 1000);
105104
};
106-
c.onmessage = (message: IMessageEvent) => {
105+
socket.onmessage = (message: MessageEvent) => {
107106
let m: TraceMessage = JSON.parse(message.data.toString());
108107

109108
m.ptime = DateTime.fromISO(m.time).toJSDate();
110109
m.key = Math.random();
111110
dispatch(traceMessageReceived(m));
112111
};
113-
c.onclose = () => {
112+
socket.onclose = () => {
114113
clearInterval(interval);
115114
console.log("connection closed by server");
116115
dispatch(setTraceStarted(false));
117116
};
118117
return () => {
119-
c.close(1000);
118+
socket.close(1000);
120119
clearInterval(interval);
121120
console.log("closing websockets");
122121
setTraceStarted(false);
@@ -125,7 +124,7 @@ const Trace = () => {
125124
};
126125

127126
const stopTrace = () => {
128-
c.close(1000);
127+
socket.close(1000);
129128
dispatch(setTraceStarted(false));
130129
};
131130

0 commit comments

Comments
 (0)