Merge pull request #4 from wenzhu-eternal/feat/version_0.1.1

version_0.1.1

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+package-lock.json
 yarn.lock
 mbci.config.js
 

craco.config.js

@@ -1,16 +1,27 @@
-const path = require('path');
-const fastRefreshCracoPlugin = require('craco-fast-refresh');
+const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const CracoAntDesignPlugin = require('craco-antd');
 const CracoLessPlugin = require("craco-less");
+const Jarvis = require("webpack-jarvis");
+const path = require('path');
 
 module.exports = {
   webpack: {
     alias: {
       "@": path.resolve("src"),
     },
+    plugins: [
+      new Jarvis({
+        watchOnly: false,
+        port: 3001
+      }),
+      new HardSourceWebpackPlugin(),
+      new ProgressBarPlugin(),
+    ]
   },
   plugins: [
-    { plugin: fastRefreshCracoPlugin },
+    { plugin: new ReactRefreshPlugin() },
     {
       plugin: CracoAntDesignPlugin,
       options: {

package.json

@@ -1,9 +1,10 @@
 {
   "name": "mbs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.2.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -16,22 +17,27 @@
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "antd": "^4.16.9",
+    "axios": "^0.24.0",
     "classnames": "^2.3.1",
     "craco-antd": "^1.19.0",
-    "craco-fast-refresh": "^1.1.0",
     "craco-less": "^1.18.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "hard-source-webpack-plugin": "^0.13.1",
     "mb-ci": "^0.1.1",
     "prettier": "^2.3.2",
+    "progress-bar-webpack-plugin": "^2.1.0",
     "react": "^17.0.2",
     "react-cookies": "^0.1.1",
     "react-dom": "^17.0.2",
+    "react-refresh": "^0.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "socket.io-client": "^4.4.0",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "webpack-jarvis": "^0.3.2"
   },
   "scripts": {
     "start": "craco start",
@@ -58,4 +64,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/WebSocket.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { getIP } from "@/utils";
+import io from 'socket.io-client';
+import cookie from 'react-cookies';
+import { Modal } from 'antd';
+
+export default function WebSocket({ dataName, callback }: {
+  dataName: string;
+  callback: (data: any) => any,
+}) {
+  useEffect((): any => {
+    const socket = io(getIP());
+    const token = cookie.load('x-auth-token');
+    let errTimes = 0;
+
+    socket.on('connect', () => {
+      errTimes = 0;
+      socket.emit('addSocket', { token });
+    });
+
+    socket.on(dataName, data => {
+      callback(JSON.parse(data));
+    });
+
+    socket.on("connect_error", () => {
+      if (errTimes === 10) {
+        Modal.error({
+          title: '连接错误',
+          content: '网络连接异常，需要刷新页面处理！如还异常，请联系管理员。',
+          okText: '刷新',
+          onOk: () => history.go(),
+        });
+      }
+      errTimes++;
+      socket.emit('delectSocket', { token });
+    });
+
+    return () => {
+      socket.emit('delectSocket', { token });
+      socket.close()
+    };
+  }, [])
+
+  return null;
+}

src/pages/about/index.tsx

@@ -1,11 +1,18 @@
 import { request } from "@/utils";
 import { useEffect } from "react";
+import WebSocket from "@/components/WebSocket";
 
 export default function About() {
   useEffect(() => {
-    request('GET', 'api/user/findUsers?page=1&pageSize=10')
-      .then((res) => console.log('res :>> ', res))
-      .catch((err) => console.log('err :>> ', err))
+    request({
+      url: 'api/user/findUsers?page=1&pageSize=10',
+      method: 'GET',
+    }).then((res: any) => console.log('res :>> ', res))
+      .catch((err: any) => console.log('err :>> ', err))
   }, [])
-  return <h2>About</h2>;
+
+  return <h2>
+    <WebSocket dataName="wsData" callback={(data) => console.log('data :>> ', data)} />
+    WebSocket
+  </h2>;
 }

src/utils/index.ts

@@ -1,4 +1,8 @@
 import MyIcon from './Icons';
-import request from './request';
+import request, { getIP } from './request';
 
-export { MyIcon, request };
+export {
+  MyIcon,
+  request,
+  getIP,
+};

src/utils/request.ts

@@ -1,55 +1,46 @@
-/**
- * @Description: http 请求
- * @param {string} method 请求类型
- * @param {string} url
- * @param {any} body
- * @param {any} history
- */
-import { message } from 'antd';
+import axios from 'axios';
+import { notification } from 'antd';
 import cookie from 'react-cookies';
 
-const getIP = () => {
+export const getIP = () => {
   if (process.env.NODE_ENV === 'production') {
     return '';
   }
   return 'http://localhost:9000/';
 };
 
-export default function request(
-  method: string,
-  url: string,
-  body?: any,
-) {
-  method = method.toUpperCase();
-  if (method === 'GET') {
-    body = undefined;
-  } else {
-    body = body && JSON.stringify(body);
-  }
-  const c_token = cookie.load('x-auth-token');
-  return fetch(getIP() + url, {
-    method,
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      'x-auth-token': c_token,
-    },
-    body,
-  }).then((res) => {
-    const token = res.headers.get('x-auth-token');
-    if (token) {
-      cookie.save('x-auth-token', token, { path: '/' });
-    }
-    return res.json().then((res) => {
-      if (res.statusCode === 401) {
-        message.error('你无权限或权限到期，请重新登录！').then(() => {
-          if (!(window.location.pathname === '/')) {
-            window.history.pushState('', '', '/');
-            window.history.go();
-          }
-        })
+const request = axios.create({
+  baseURL: getIP(),
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+  timeout: 3000,
+})
+
+request.interceptors.request.use((config: any) => {
+  config['headers']['x-auth-token'] = cookie.load('x-auth-token');
+  return config;
+});
+
+request.interceptors.response.use((response: any) => {
+  const { data, config: { headers } } = response;
+  switch (data.statusCode) {
+    case 0: {
+      const token = headers['x-auth-token'];
+      if (token) {
+        cookie.save('x-auth-token', token, { path: '/' });
       }
-      return res;
-    })
-  });
-}
+      return data.data;
+    };
+    case 400: return Promise.reject(data.data);
+    case 401: {
+      return notification['error']({
+        message: data.message,
+        description: data.data,
+      });
+    };
+  }
+});
+
+export default request;