connect KilnInfo

src/components/Common/KilnInfo/Kiln.jsx

@@ -6,30 +6,30 @@ import { stateNameMap } from "../../../store/features/kilnSlice";
 
 export default function Kiln() {
   const kilnInfo = useSelector((state) => state.kiln);
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
   const infos = Object.keys(kilnInfo).map((key) => ({
     label: stateNameMap[key],
     value: kilnInfo[key],
   }));
 
-  useEffect(() => {
+  // useEffect(() => {
-    setInterval(() => {
+  //   setInterval(() => {
-      dispatch({
+  //     dispatch({
-        type: "kiln/setKilnInfo",
+  //       type: "kiln/setKilnInfo",
-        payload: {
+  //       payload: {
-          kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
+  //         kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
-          waterTemp: Math.ceil(Math.random() * 100) + "℃",
+  //         waterTemp: Math.ceil(Math.random() * 100) + "℃",
-          waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
+  //         waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
-          waterPressure: Math.ceil(Math.random() * 100) + "Pa",
+  //         waterPressure: Math.ceil(Math.random() * 100) + "Pa",
-          combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
+  //         combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
-          topTemp: Math.ceil(Math.random() * 100) + "℃",
+  //         topTemp: Math.ceil(Math.random() * 100) + "℃",
-          compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
+  //         compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
-          meltTemp: Math.ceil(Math.random() * 100) + "℃",
+  //         meltTemp: Math.ceil(Math.random() * 100) + "℃",
-        },
+  //       },
-      });
+  //     });
-    }, 30000);
+  //   }, 30000);
-  }, [dispatch]);
+  // }, [dispatch]);
 
   // const infos = [
   //   { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },

src/index.js

@@ -4,9 +4,11 @@ import { Provider } from "react-redux";
 import { store } from "./store";
 import App from "./App";
 import "./index.css";
+import { WsClient } from "./utils";
 
 const container = document.getElementById("root");
 const root = createRoot(container);
+const wsc = new WsClient();
 
 root.render(
   <React.StrictMode>

src/utils/index.js

@@ -1,3 +1,5 @@
+import { store } from "../store";
+
 export function randomInt(min, max, includeMax = false) {
   let Fn = includeMax ? Math.ceil : Math.floor;
   let num = Fn(Math.random() * max);
@@ -8,21 +10,38 @@ export function randomInt(min, max, includeMax = false) {
 }
 
 export class WsClient {
-	static wsServer = 'ws://192.168.1.12:8081/xc-screen/websocket/1';
+  static wsServer = "ws://192.168.1.12:8081/xc-screen/websocket/info";
   static socket = null;
   static tryCount = 0;
 
-	init() {
+  constructor() {
     if (WsClient.socket) return;
     WsClient.socket = new WebSocket(WsClient.wsServer);
     WsClient.socket.onopen = () => {
-			console.log('[*] websocket connected!');
+      console.log("[*] websocket connected!");
     };
     WsClient.socket.onmessage = (e) => {
-			console.log('[*] websocket message!', e, e.data);
+      let serializedData = null;
+      try {
+        serializedData = JSON.parse(e.data);
+      } catch (error) {
+        console.log("[*] websocket: [unable to serialize] --->  ", e);
+      }
+      switch (serializedData?.type) {
+        case "KilnInfo": {
+          store.dispatch({
+            type: "kiln/setKilnInfo",
+            payload: serializedData.data,
+          });
+          break;
+        }
+        default: {
+          console.log("websocket message: [unknown] --->  ", e.data);
+        }
+      }
     };
     WsClient.socket.onerror = (e) => {
-			console.log('[*] websocket erro!', e, e.data);
+      console.log("[*] websocket error!", e, e.data);
     };
     WsClient.socket.onclose = (e) => {
       let timer = setTimeout(() => {