usdar

src/app.jsx

@@ -13,6 +13,7 @@ export async function getInitialState() {
       const msg = await doFetch({
         url: "/system/me",
       });
+      localStorage.setItem("ID",msg?.data?.data?.id)
       return msg.data.data;
     } catch (error) {
       history.push(loginPath);

src/components/OnlineChat/index.jsx

+import difftime from "@/utils/difftime";
+import { doFetch } from "@/utils/doFetch";
+import { Avatar, Box, Stack } from "@mui/material";
+import { useRequest } from "ahooks";
+import { Input } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import "./index.less";
+
+function OnlineChat({ trainId }) {
+  const currentUserId = localStorage.getItem("ID");
+
+  const [value, setvalue] = useState();
+  const scrollRef = useRef();
+  useEffect(() => {}, []);
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.ctrlKey) {
+        e.target.value += "\n";
+      } else {
+        e.preventDefault();
+        doFetch({
+          url: "/trainMessage/sendMessage",
+          params: { trainId, messageContent: value },
+        }).then((res) => {
+          if (res?.code === "0000") {
+            refresh();
+            setvalue(null);
+          }
+        });
+      }
+    }
+  };
+  const { data, loading, refresh } = useRequest(
+    async () => {
+      let res = await doFetch({
+        url: "/trainMessage/list",
+        params: { trainId },
+      });
+      return res?.data?.dataList;
+    },
+    {
+      onSuccess: (res, params) => {
+        setTimeout(() => {
+          scrollRef?.current?.scrollToBottom();
+        }, 10);
+      },
+    }
+  );
+
+  return (
+    <Box
+      display={"flex"}
+      flexDirection={"column"}
+      boxShadow={"0 0 18px #f0f0f0"}
+      borderRadius={2}
+      padding={2}
+      bgcolor={"white"}
+      height={"calc(100vh - 240px)"}
+    >
+      <Box flex={1}>
+        <Scrollbars
+          thumbMinSize={10}
+          autoHide
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+          hideTracksWhenNotNeeded
+          ref={scrollRef}
+        >
+          {data?.map?.((it, i) => {
+            if (it?.sendUserId == currentUserId) {
+              return (
+                <Stack direction={"row"} mb={2} justifyContent={"flex-end"}>
+                  <Stack direction={"column"} mr={1} pt={0.4}>
+                    <Box textAlign={"right"}>
+                      <span style={{ fontSize: 12 }}>
+                        {" "}
+                        {difftime(dayjs(), dayjs(it?.createTime))}
+                      </span>
+                    </Box>
+                    <Box mt={0.8} p={2} bgcolor={"#c8facd"} borderRadius={2}>
+                      {it?.messageContent}
+                    </Box>
+                  </Stack>
+                  <Avatar
+                    src={it?.pic?.[0]?.url}
+                    sx={{ border: "2px solid rgba(0,0,0,0.2)" }}
+                  ></Avatar>
+                </Stack>
+              );
+            }
+            return (
+              <Stack direction={"row"} mb={2}>
+                <Avatar
+                  src={it?.pic?.[0]?.url}
+                  sx={{ border: "2px solid rgba(0,0,0,0.2)" }}
+                ></Avatar>
+                <Stack direction={"column"} ml={1} pt={0.4}>
+                  <Box textAlign={"left"}>
+                    <b>{it?.sendUserName}</b>
+
+                    <span style={{ fontSize: 12 }}>
+                      {" "}
+                      {difftime(dayjs(), dayjs(it?.createTime))}
+                    </span>
+                  </Box>
+                  <Box mt={0.8} p={2} bgcolor={"#f4f6f7"} borderRadius={2}>
+                    {it?.messageContent}
+                  </Box>
+                </Stack>
+              </Stack>
+            );
+          })}
+        </Scrollbars>
+      </Box>
+      <Box height={68} bgcolor={"#e0e0e0"} padding={1} borderRadius={2}>
+        <Input.TextArea
+          placeholder="请输入"
+          bordered={false}
+          style={{ height: "100%", resize: "none", margin: "0 -8px" }}
+          onKeyDown={handleKeyDown}
+          value={value}
+          onChange={(e) => {
+            setvalue(e.target.value);
+          }}
+        ></Input.TextArea>
+      </Box>
+    </Box>
+  );
+}
+
+export default OnlineChat;

src/layouts/dashboard/DashboardLayout.jsx

-import { useState } from "react";
 import { Outlet } from "@umijs/max";
+import { useEffect, useState } from "react";
 // @mui
 import { styled } from "@mui/material/styles";
 import { Scrollbars } from "react-custom-scrollbars";
+import io from "socket.io-client";
 import Header from "./header";
 import Nav from "./nav";
 
+const socket = io(SOCKET_IO_URL, { query: { id: localStorage.getItem("ID") } });
+
 // ----------------------------------------------------------------------
 
 const APP_BAR_MOBILE = 64;
@@ -35,6 +38,21 @@ const Main = styled("div")(({ theme }) => ({
 export default function DashboardLayout() {
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    socket.connect();
+    socket.on("message", (data) => {
+      console.log("====================================");
+      console.log(data);
+      console.log("====================================");
+      if (data?.wsMsgModel === "") {
+      }
+    });
+
+    return () => {
+      // 关闭 WebSocket 连接
+      socket.disconnect();
+    };
+  }, []);
   return (
     <StyledRoot>
       <Header onOpenNav={() => setOpen(true)} />

src/layouts/dashboard/header/index.jsx

@@ -18,7 +18,7 @@ import { useModel } from "@umijs/max";
 import AccountPopover from "./AccountPopover";
 import Searchbar from "./Searchbar";
 
-// ----------------------------------------------------------------------
+//----------------------------------------------------------------------//
 
 const HEADER_MOBILE = 64;
 

src/layouts/index.jsx

@@ -5,10 +5,8 @@ import Slide from "@mui/material/Slide";
 import Snackbar from "@mui/material/Snackbar";
 import * as Sentry from "@sentry/react";
 import { Outlet, useModel } from "@umijs/max";
-import io from "socket.io-client";
+import React from "react";
 import ThemeProvider from "./theme";
-import React, { useState, useEffect } from 'react';
-const socket = io(SOCKET_IO_URL, { query: { id: localStorage.getItem("ID") } });
 
 // 自定义主题
 // const { palette } = useTheme();
@@ -74,28 +72,6 @@ function App() {
     setInitialState,
   } = useModel("@@initialState");
 
-  useEffect(() => {
-    socket.connect();
-    socket.on('message', (data) => {
-
-      console.log('====================================');
-      console.log(data);
-      console.log('====================================');
-      if(data?.wsMsgModel === ""){
-        
-      }
-
-
-
-
-    })
-
-    return () => {
-      // 关闭 WebSocket 连接
-      socket.disconnect();
-    };
-  }, []);
-
   return (
     <ThemeProvider>
       <CssBaseline />

src/pages/dobustrain/index.jsx

 import AutoTable from "@/components/AutoTable";
 import DraggableDialog from "@/components/DraggableDialog";
 import InitForm from "@/components/InitForm";
+import OnlineChat from "@/components/OnlineChat";
 import PremButton from "@/components/PremButton";
 import TreeRender from "@/components/TreeRender/sxtree";
 import { doFetch } from "@/utils/doFetch";
@@ -11,6 +12,7 @@ import { useRequest } from "ahooks";
 import { Badge, message, Tabs } from "antd";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { history } from "umi";
+
 import "./index.less";
 
 function Dolessons() {
@@ -348,6 +350,11 @@ function Dolessons() {
         </Box>
       ),
     },
+    {
+      key: "4",
+      label: "在线沟通",
+      children: <OnlineChat trainId={params?.id}></OnlineChat>,
+    },
   ];
 
   const addHandel = (val) => {
@@ -546,7 +553,7 @@ function Dolessons() {
           </PremButton>
           <PremButton
             btn={{
-              disabled:ifs,
+              disabled: ifs,
               variant: "contained",
               onClick: addHandel,
             }}

src/pages/domybustrain/index.jsx

@@ -11,6 +11,7 @@ import { useRequest } from "ahooks";
 import { Badge, message, Tabs } from "antd";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { history } from "umi";
+import OnlineChat from "@/components/OnlineChat";
 import "./index.less";
 
 function Dolessons() {
@@ -303,6 +304,11 @@ function Dolessons() {
         </Box>
       ),
     },
+    {
+      key: "4",
+      label: "在线沟通",
+      children: <OnlineChat trainId={params?.id}></OnlineChat>,
+    },
   ];
 
   const addHandel = (val) => {

src/pages/user/login/index.jsx

@@ -18,7 +18,6 @@ function Login() {
   const fetchUserInfo = async () => {
     const userInfo = await initialState?.fetchUserInfo();
     if (userInfo) {
-      localStorage.setItem("ID",userInfo?.id);
       await setInitialState((s) => {
         return { ...s, currentUser: userInfo };
       });

src/pages/usercenter/head.jsx

@@ -123,7 +123,7 @@ const Head = ({ defaultImg, dofetchUserInfo }) => {
             backgroundColor: "rgba(0,0,0,0.6)",
           }}
         >
-          <img src={src} alt="" style={{ borderRadius: 112 }} />
+          <img src={src} alt="" style={{ borderRadius: 112,width:"100%",height:"100%" }} />
         </div>
       )}
       <div