Use native WebSocket API (#3248)

Author: bayasdev

web-app/package.json

@@ -28,8 +28,7 @@
     "recharts": "^2.10.3",
     "styled-components": "^5.3.11",
     "superagent": "^8.0.8",
-    "tinycolor2": "^1.6.0",
-    "websocket": "^1.0.31"
+    "tinycolor2": "^1.6.0"
   },
   "scripts": {
     "start": "PORT=5005 react-scripts start",
@@ -76,7 +75,6 @@
     "@types/recharts": "^1.8.29",
     "@types/superagent": "^4.1.24",
     "@types/webpack-env": "^1.18.2",
-    "@types/websocket": "^1.0.10",
     "babel-plugin-istanbul": "^6.1.1",
     "customize-cra": "^1.0.0",
     "minio": "^7.1.3",
@@ -103,7 +101,6 @@
     "react-scripts/**/json5": "^2.2.2",
     "react-scripts/**/debug": "^3.1.0",
     "recharts/**/d3-color": "^3.1.0",
-    "websocket/debug": "^3.1.0",
     "fast-xml-parser": "^4.3.4",
     "semver": "^7.5.2",
     "testcafe/**/tough-cookie": "^4.1.3",

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

@@ -14,11 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { Fragment, useEffect, useState } from "react";
-import {
-  ICloseEvent,
-  IMessageEvent,
-  w3cwebsocket as W3CWebSocket,
-} from "websocket";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { Box, Button, Grid, HelpBox, InfoIcon, Loader, PageLayout } from "mds";
@@ -139,28 +134,25 @@ const HealthInfo = () => {
       const baseLocation = new URL(document.baseURI);
       const baseUrl = baseLocation.pathname;
 
-      const c = new W3CWebSocket(
+      const socket = new WebSocket(
         `${wsProt}://${url.hostname}:${port}${baseUrl}ws/health-info?deadline=1h`,
       );
       let interval: any | null = null;
-      if (c !== null) {
-        c.onopen = () => {
+      if (socket !== null) {
+        socket.onopen = () => {
           console.log("WebSocket Client Connected");
-          c.send("ok");
+          socket.send("ok");
           interval = setInterval(() => {
-            c.send("ok");
+            socket.send("ok");
           }, 10 * 1000);
           setMessage(
             "Health Report started. Please do not refresh page during diagnosis.",
           );
           dispatch(setServerDiagStat(DiagStatInProgress));
         };
-        c.onmessage = (message: IMessageEvent) => {
+        socket.onmessage = (message: MessageEvent) => {
           let m: ReportMessage = JSON.parse(message.data.toString());
           if (m.serverHealthInfo) {
-            m.serverHealthInfo.timestamp = new Date(
-              m.serverHealthInfo.timestamp.toString(),
-            );
             dispatch(healthInfoMessageReceived(m.serverHealthInfo));
           }
           if (m.encoded !== "") {
@@ -170,13 +162,13 @@ const HealthInfo = () => {
             setSubnetResponse(m.subnetResponse);
           }
         };
-        c.onerror = (error: Error) => {
-          console.log("error closing websocket:", error.message);
-          c.close(1000);
+        socket.onerror = (error) => {
+          console.error("error closing websocket:", error);
+          socket.close(1000);
           clearInterval(interval);
           dispatch(setServerDiagStat(DiagStatError));
         };
-        c.onclose = (event: ICloseEvent) => {
+        socket.onclose = (event: CloseEvent) => {
           clearInterval(interval);
           if (
             event.code === WSCloseInternalServerErr ||

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

@@ -19,7 +19,7 @@ export const DiagStatSuccess = "success";
 export const DiagStatInProgress = "inProgress";
 
 export interface HealthInfoMessage {
-  timestamp: Date;
+  timestamp: string;
   error: string;
   perf: perfInfo;
   minio: minioHealthInfo;

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

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Box, Button, Grid, PageLayout, Select, Table, TableBody } from "mds";
 import { useSelector } from "react-redux";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -33,7 +32,7 @@ import LogLine from "./LogLine";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../../HelpMenu";
 
-var c: any = null;
+var socket: any = null;
 
 const ErrorLogs = () => {
   const dispatch = useAppDispatch();
@@ -61,24 +60,24 @@ const ErrorLogs = () => {
     const baseLocation = new URL(document.baseURI);
     const baseUrl = baseLocation.pathname;
 
-    c = new W3CWebSocket(
+    socket = new WebSocket(
       `${wsProt}://${
         url.hostname
       }:${port}${baseUrl}ws/console/?logType=${logType}&node=${
         selectedNode === "Select node" ? "" : selectedNode
       }`,
     );
     let interval: any | null = null;
-    if (c !== null) {
-      c.onopen = () => {
+    if (socket !== null) {
+      socket.onopen = () => {
         console.log("WebSocket Client Connected");
         dispatch(setLogsStarted(true));
-        c.send("ok");
+        socket.send("ok");
         interval = setInterval(() => {
-          c.send("ok");
+          socket.send("ok");
         }, 10 * 1000);
       };
-      c.onmessage = (message: IMessageEvent) => {
+      socket.onmessage = (message: MessageEvent) => {
         // console.log(message.data.toString())
         // FORMAT: 00:35:17 UTC 01/01/2021
 
@@ -104,13 +103,13 @@ const ErrorLogs = () => {
           dispatch(logMessageReceived(m));
         }
       };
-      c.onclose = () => {
+      socket.onclose = () => {
         clearInterval(interval);
         console.log("connection closed by server");
         dispatch(setLogsStarted(false));
       };
       return () => {
-        c.close(1000);
+        socket.close(1000);
         clearInterval(interval);
         console.log("closing websockets");
         dispatch(setLogsStarted(false));
@@ -119,8 +118,8 @@ const ErrorLogs = () => {
   };
 
   const stopLogs = () => {
-    if (c !== null && c !== undefined) {
-      c.close(1000);
+    if (socket !== null && socket !== undefined) {
+      socket.close(1000);
       dispatch(setLogsStarted(false));
     }
   };

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

@@ -16,7 +16,6 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { useNavigate } from "react-router-dom";
 import {
   Box,
@@ -77,7 +76,7 @@ const Speedtest = () => {
       const baseUrl = baseLocation.pathname;
 
       const wsProt = wsProtocol(url.protocol);
-      const c = new W3CWebSocket(
+      const socket = new WebSocket(
         `${wsProt}://${url.hostname}:${port}${baseUrl}ws/speedtest?&size=${size}${sizeUnit}&duration=${duration}s`,
       );
 
@@ -95,15 +94,15 @@ const Speedtest = () => {
       setTotalSeconds(totalSeconds);
 
       let interval: any | null = null;
-      if (c !== null) {
-        c.onopen = () => {
+      if (socket !== null) {
+        socket.onopen = () => {
           console.log("WebSocket Client Connected");
-          c.send("ok");
+          socket.send("ok");
           interval = setInterval(() => {
-            c.send("ok");
+            socket.send("ok");
           }, 10 * 1000);
         };
-        c.onmessage = (message: IMessageEvent) => {
+        socket.onmessage = (message: MessageEvent) => {
           const data: SpeedTestResponse = JSON.parse(message.data.toString());
 
           setCurrStatus((prevStatus) => {
@@ -119,15 +118,15 @@ const Speedtest = () => {
           const currTime = DateTime.now().toUnixInteger() / 1000;
           setCurrentValue(currTime);
         };
-        c.onclose = () => {
+        socket.onclose = () => {
           clearInterval(interval);
           console.log("connection closed by server");
           // reset start status
           setStart(false);
         };
         return () => {
           // close websocket on useEffect cleanup
-          c.close(1000);
+          socket.close(1000);
           clearInterval(interval);
           console.log("closing websockets");
         };

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

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Button, PageLayout, FormLayout, Box, Checkbox, InputLabel } from "mds";
 import { wsProtocol } from "../../../utils/wsUtils";
 import { useNavigate } from "react-router-dom";
@@ -26,7 +25,7 @@ import RegisterCluster from "./RegisterCluster";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
-var c: any = null;
+var socket: any = null;
 
 const Profile = () => {
   const navigate = useNavigate();
@@ -70,16 +69,16 @@ const Profile = () => {
     const baseUrl = baseLocation.pathname;
 
     const wsProt = wsProtocol(url.protocol);
-    c = new W3CWebSocket(
+    socket = new WebSocket(
       `${wsProt}://${url.hostname}:${port}${baseUrl}ws/profile?types=${typeString}`,
     );
 
-    if (c !== null) {
-      c.onopen = () => {
+    if (socket !== null) {
+      socket.onopen = () => {
         setProfilingStarted(true);
-        c.send("ok");
+        socket.send("ok");
       };
-      c.onmessage = (message: IMessageEvent) => {
+      socket.onmessage = (message: MessageEvent) => {
         // process received message
         let response = new Blob([message.data], { type: "application/zip" });
         let filename = "profile.zip";
@@ -91,20 +90,20 @@ const Profile = () => {
         link.click();
         document.body.removeChild(link);
       };
-      c.onclose = () => {
+      socket.onclose = () => {
         console.log("connection closed by server");
         setProfilingStarted(false);
       };
       return () => {
-        c.close(1000);
+        socket.close(1000);
         console.log("closing websockets");
         setProfilingStarted(false);
       };
     }
   };
 
   const stopProfiling = () => {
-    c.close(1000);
+    socket.close(1000);
     setProfilingStarted(false);
   };
 

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

@@ -17,7 +17,6 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { DateTime } from "luxon";
 import { useSelector } from "react-redux";
-import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import {
   Box,
   breakPoints,
@@ -43,7 +42,7 @@ import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
-var c: any = null;
+var socket: any = null;
 
 const Trace = () => {
   const dispatch = useAppDispatch();
@@ -85,7 +84,7 @@ const Trace = () => {
     const baseUrl = baseLocation.pathname;
 
     const wsProt = wsProtocol(url.protocol);
-    c = new W3CWebSocket(
+    socket = new WebSocket(
       `${wsProt}://${
         url.hostname
       }:${port}${baseUrl}ws/trace?calls=${calls}&threshold=${threshold}&onlyErrors=${
@@ -94,29 +93,29 @@ const Trace = () => {
     );
 
     let interval: any | null = null;
-    if (c !== null) {
-      c.onopen = () => {
+    if (socket !== null) {
+      socket.onopen = () => {
         console.log("WebSocket Client Connected");
         dispatch(setTraceStarted(true));
-        c.send("ok");
+        socket.send("ok");
         interval = setInterval(() => {
-          c.send("ok");
+          socket.send("ok");
         }, 10 * 1000);
       };
-      c.onmessage = (message: IMessageEvent) => {
+      socket.onmessage = (message: MessageEvent) => {
         let m: TraceMessage = JSON.parse(message.data.toString());
 
         m.ptime = DateTime.fromISO(m.time).toJSDate();
         m.key = Math.random();
         dispatch(traceMessageReceived(m));
       };
-      c.onclose = () => {
+      socket.onclose = () => {
         clearInterval(interval);
         console.log("connection closed by server");
         dispatch(setTraceStarted(false));
       };
       return () => {
-        c.close(1000);
+        socket.close(1000);
         clearInterval(interval);
         console.log("closing websockets");
         setTraceStarted(false);
@@ -125,7 +124,7 @@ const Trace = () => {
   };
 
   const stopTrace = () => {
-    c.close(1000);
+    socket.close(1000);
     dispatch(setTraceStarted(false));
   };