接入socket

src/layouts/components/RightContent.tsx

 import { Tooltip } from 'antd';
 import { BellOutlined, CustomerServiceOutlined } from '@ant-design/icons';
-import React from 'react';
+import React, { useCallback, useRef, useLayoutEffect } from 'react';
 // import { connect, ConnectProps } from 'umi';
 // import { ConnectState } from '@/models/connect';
 import Avatar from './AvatarDropdown';
@@ -9,6 +9,7 @@ import Location from './Location';
 import Roles from './Roles';
 import styles from '../styles/RightContent.less';
 import { Link } from 'umi';
+import { getAuth } from '@/utils/auth'
 
 // export type SiderTheme = 'light' | 'dark';
 // export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
@@ -25,6 +26,35 @@ const GlobalHeaderRight: React.SFC<{}> = (props) => {
   //   className = `${styles.right}  ${styles.dark}`;
   // }
 
+  const userInfo = getAuth()
+
+  const ws = useRef<WebSocket | null>(null);
+  const webSocketInit = useCallback(() => {
+    console.log(ws.current)
+    if (!ws.current || ws.current.readyState === 3) {
+      ws.current = new WebSocket(`ws://10.0.0.25:8100/report/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}`);
+      ws.current.onopen = (e) => {
+        console.log(e)
+      }
+      ws.current.onmessage = (e) => {
+        console.log(e)
+      };
+      ws.current.onclose = (e) => {
+        console.log("关闭连接")
+      } 
+      ws.current.onerror = (e) => {
+        console.log("socket 出错")
+      }
+    }
+  }, [ws]);
+
+  useLayoutEffect(() => {
+    webSocketInit();
+    return () => {
+      ws.current?.close();
+    };
+  }, [ws, webSocketInit]);
+
   return (
     <div className={className}>
       <Link to='/' style={{color: 'rgba(0, 0, 0, 0.85)'}}>返回商城</Link>

src/pages/systemSetting/message/index.tsx

-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import { history } from 'umi';
-import { Button, Row, Col, Card, List, Avatar } from 'antd';
+import { Card, List, Avatar } from 'antd';
 import styles from './index.less'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { PlusOutlined } from '@ant-design/icons';
 import StatusTag from '@/components/StatusTag';
+import { PublicApi } from '@/services/api';
+import moment from 'moment';
+import msg_system from '@/assets/imgs/msg_system.png'
+import msg_platform from '@/assets/imgs/msg_platform.png'
 
 const Message: React.FC<{}> = () => {
+  const [dataSource, setDataSource] = useState<any>([])
+  const pagation = {
+    current: 1,
+    pageSize: 10,
+  }
+  
+
+  useEffect(() => {
+    // @ts-ignore
+    async function init() {
+      const data = await getList(pagation);
+      setDataSource(data);
+    }
+    init()
+  }, [])
 
-  const data = [
-    {
-      id: 1,
-      icon: '',
-      status: 'success',
-      type: '系统消息',
-      title: '订单发货',
-      message: '订单发货，请注意查收，清单发货，请注意查收！',
-      time: '2015-15-05',
-    },
-    {
-      id: 2,
-      icon: '',
-      status: 'success',
-      type: '系统消息',
-      title: '订单收货',
-      message: '订单发货，请注意查收，清单发货，请注意查收！',
-      time: '2015-15-05',
-    },
-    {
-      id: 3,
-      icon: '',
-      status: 'primary',
-      type: '系统消息',
-      title: '系统消息',
-      message: '账户异常，请注意账户资金安全！',
-      time: '2015-15-05',
-    },
-    {
-      id: 4,
-      icon: '',
-      status: 'primary',
-      type: '系统消息',
-      title: '系统消息',
-      message: '账户支出300元，请注意账户资金安全！',
-      time: '2015-15-05',
-    },
-  ];
+  const getList = async (params) => {
+    ///report/message/member/page
+    const res = await PublicApi.getReportMessageMemberPage(params);
+    if(res.code === 1000) {
+      return res.data
+    }
+    return {
+      totalCount: 0,
+      data: []
+    }
+  }
+
+  const handlePaginationChange = (page, pageSize) => {
+    getList({page, pageSize})
+    .then((data) => {
+      setDataSource(data);
+    })
+  }
 
   const renderMessage = (data) => {
 
@@ -69,25 +68,23 @@ const Message: React.FC<{}> = () => {
       > 
         <List
           itemLayout="horizontal"
-          dataSource={data}
+          dataSource={dataSource.data}
           className={styles.customList}
           pagination={{
-            onChange: page => {
-              console.log(page);
-            },
+            onChange: handlePaginationChange,
             pageSize: 10,
             size: "small",
             showQuickJumper: true,
-            total: 4,
+            total: dataSource.totalCount,
             showTotal: showTotal
           }}
           renderItem={item => (
             <List.Item>
               <List.Item.Meta
-                avatar={<Avatar src={item.icon} />}
+                avatar={<Avatar src={msg_system} />}
                 title={renderMessage(item)}
               />
-              <div>{item.time}</div>
+              <div>{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
             </List.Item>
           )}
         />