feat: redux dev

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
       mjs: 'never',
     }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/prefer-default-export': 'off',
   },
   settings: {
     'import/extensions': ['.ts', '.tsx'],

app/ui/window.ts

@@ -4,7 +4,7 @@ import { createBufferReadLine } from '../utils/bufferreader';
 import { getARPData, getNetworkInterfaceInfoList, parseArpLine } from '../utils/network';
 import serverState from '../ws/states/serverState';
 import webrtcState from '../ws/states/webrtcState';
-import { getRemoteServerState, swapOffer } from '../ws/WebSocketClient';
+import { getRemoteServerState, sendWebSocketMessage, WebSocketMessage } from '../ws/WebSocketClient';
 
 export function newWindow(
   options_: BrowserWindowConstructorOptions,
@@ -66,12 +66,8 @@ export function newWindow(
     getRemoteServerState();
   });
 
-  rpc.on('swap-offer-desc', (offerDesc: any) => {
-    // console.log('offerDesc :>> ', offerDesc);
-    // webrtcState.setRemoteWebRTCDescriptionListener((description) => {
-    //   rpc.emit('on-get-remote-offer-desc', description);
-    // });
-    swapOffer(offerDesc);
+  rpc.on('websocket-message', (offerDesc: WebSocketMessage) => {
+    sendWebSocketMessage(offerDesc);
   });
 
   // rpc.on('swap-answer-offer-desc', (answerOfferDesc: any) => {

app/ws/WebSocketClient.ts

@@ -1,7 +1,15 @@
 import WebSocket from 'ws';
 import { openListener, messageListener } from './listeners';
 
+export interface WebSocketMessage {
+  type: string;
+  clientType: string;
+  targetId: string;
+  data: any;
+}
+
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
 export const wss = new WebSocket('wss://192.168.0.119:3006');
 
 wss.on('open', openListener);
@@ -13,14 +21,17 @@ export const getRemoteServerState = () => {
   }));
 };
 
-export const swapOffer = (desc: any) => {
-  // console.log('desc :>> ', desc);
-  wss.send(JSON.stringify({
-    type: 'swap-offer-desc',
-    clientType: desc.type,
-    targetId: desc.id,
-    desc: desc.desc,
-  }));
+// export const swapOffer = (desc: WebSocketMessage) => {
+//   // console.log('desc :>> ', desc);
+//   wss.send(JSON.stringify({
+//     type: 'swap-offer-desc',
+//     clientType: desc.type,
+//     targetId: desc.id,
+//     desc: desc.desc,
+//   }));
+// };
+export const sendWebSocketMessage = (message: WebSocketMessage) => {
+  wss.send(JSON.stringify(message));
 };
 
 export default {};

app/ws/states/webrtcState.ts

@@ -10,8 +10,12 @@ class WebRTCState {
     }
 
     setRemoteWebRTCDescription = (message: any) => {
-      // console.log('message :>> ', message);
-      this.remoteWebRTCDescription = message;
+      console.log('message :>> ', message);
+      const { data, ...others } = message;
+      this.remoteWebRTCDescription = {
+        ...others,
+        desc: JSON.parse(data.description),
+      };
 
       this.emitter.emit('on-get-remote-desc', this.remoteWebRTCDescription);
     }

lib/configureStore.ts

@@ -0,0 +1,27 @@
+import { createStore, applyMiddleware, Middleware } from 'redux';
+import { createBrowserHistory, History } from 'history';
+import { routerMiddleware } from 'connected-react-router';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import createRootReducer from './store/reducers';
+
+export const history = createBrowserHistory();
+
+const configureStore = (initialState = {}, historyInstance: History) => {
+  const middlewares = [
+    routerMiddleware(historyInstance),
+  ];
+
+  const enhancers = (middlewareArray: Middleware[]) => composeWithDevTools(
+    applyMiddleware(...middlewareArray),
+  );
+
+  const store = createStore(
+    createRootReducer(historyInstance),
+    initialState,
+    enhancers(middlewares),
+  );
+
+  return store;
+};
+
+export default configureStore;

lib/containers/ConnectContainer/ConnectContainer.tsx

@@ -1,11 +1,28 @@
-import React, { useEffect, useState } from 'react';
+/* eslint-disable no-underscore-dangle */
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, List, Typography } from 'antd';
 import rpc from '../../utils/rpc';
 import { WebRTCDataChannelClient } from '../../webrtc';
 
-function ConnectContainer() {
+function ConnectContainer({
+  onSetLocalDescription,
+  onGetRemoteDescription,
+  onGetAnswerDescription,
+  onSetClientType,
+  clientType: currentClientType,
+}: {
+  onSetLocalDescription: any,
+  onGetRemoteDescription: any,
+  onGetAnswerDescription: any,
+  onSetClientType: any,
+  clientType: string,
+}) {
   const [clients, setClients] = useState([]);
   const [localOfferDescription, setLocalOfferDescription] = useState({});
+  const refClientType = useRef(currentClientType);
+  useEffect(() => {
+    refClientType.current = currentClientType;
+  }, [currentClientType]);
   useEffect(() => {
     rpc.on('get-local-network-info', (data: any) => {
       console.log('data :>> ', data);
@@ -22,21 +39,34 @@ function ConnectContainer() {
     });
     const dataChannelClient = new WebRTCDataChannelClient();
     rpc.on('on-get-remote-offer-desc', async (message) => {
-      console.log('on-get-remote-offer-desc message :>> ', message);
-      const { desc, clientType } = message;
+      const { desc, clientType, fromId } = message;
+      if (clientType === 'caller' && refClientType.current === 'caller') {
+        console.log('caller客户端应获取来自 callee客户端的 description ');
+        return;
+      }
       // console.log('message :>> ', message);
       if (clientType === 'caller') {
+        onGetRemoteDescription(desc);
         const answerDescription = await dataChannelClient.setRemoteDescriptionAndCreateAnswer(
-          JSON.parse(desc),
+          desc,
         );
-        rpc.emit('swap-offer-desc', {
-          type: 'callee',
-          id: message.fromId,
-          desc: JSON.stringify(answerDescription),
+        onGetAnswerDescription(answerDescription);
+        rpc.emit('websocket-message', {
+          type: 'swap-offer-desc',
+          clientType: 'callee',
+          targetId: fromId,
+          data: {
+            description: JSON.stringify(answerDescription),
+          },
         });
+        // rpc.emit('swap-offer-desc', {
+        //   type: 'callee',
+        //   id: message.fromId,
+        //   desc: JSON.stringify(answerDescription),
+        // });
       } else if (clientType === 'callee') {
         // console.log('from callee desc :>> ', desc);
-        dataChannelClient.setRemoteDescription(JSON.parse(desc));
+        dataChannelClient.setRemoteDescription(desc);
       }
       // answer.then(
       //   (answerdesc: RTCSessionDescriptionInit) => {
@@ -64,12 +94,15 @@ function ConnectContainer() {
     rpc.emit('get-remote-server-state', null);
   };
   const handleSendLocalOfferDesc = (item: any) => {
-    console.log('item :>> ', item);
-    console.log('localOfferDescription :>> ', localOfferDescription);
-    rpc.emit('swap-offer-desc', {
-      type: 'caller',
-      id: item.id,
-      desc: JSON.stringify(localOfferDescription),
+    onSetLocalDescription(localOfferDescription);
+    onSetClientType('caller');
+    rpc.emit('websocket-message', {
+      type: 'swap-offer-desc',
+      clientType: 'caller',
+      targetId: item.id,
+      data: {
+        description: JSON.stringify(localOfferDescription),
+      },
     });
   };
   return (

lib/containers/ConnectContainer/index.ts

@@ -1,3 +1,23 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 import ConnectContainer from './ConnectContainer';
+import { webrtcActions } from '../../store/actions';
 
-export default ConnectContainer;
+const mapStateToProps = (state: any) => ({
+  clientType: state.webrtc.clientType,
+});
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onSetLocalDescription: (
+    description: RTCSessionDescriptionInit,
+  ) => dispatch(webrtcActions.saveLocalDescription(description)),
+  onGetRemoteDescription: (
+    description: RTCSessionDescriptionInit,
+  ) => dispatch(webrtcActions.saveRemoteDescription(description)),
+  onGetAnswerDescription: (
+    description: RTCSessionDescriptionInit,
+  ) => dispatch(webrtcActions.saveAnswerDescription(description)),
+  onSetClientType: (
+    clientType: string,
+  ) => dispatch(webrtcActions.setClientType(clientType)),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectContainer);

lib/index.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './app';
 import './index.less';
 import rpc from './utils/rpc';
+import configureStore, { history } from './configureStore';
 
 console.log('rpc :>> ', rpc);
 
+const store = configureStore({}, history);
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

lib/saga/index.ts

@@ -0,0 +1,7 @@
+// import { all, takeEvery } from 'redux-saga/effects';
+
+// export default function* rootSaga() {
+//   yield all([
+
+//   ]);
+// }

lib/store/actions/index.ts

@@ -0,0 +1,10 @@
+import { Action } from 'redux';
+import * as webrtcActions from './webrtc';
+
+export {
+  webrtcActions,
+};
+
+export interface ActionWithPayload<T> extends Action {
+  payload: T
+}

lib/store/actions/webrtc.ts

@@ -0,0 +1,7 @@
+import { createAction } from 'redux-actions';
+import { webrtcTypes } from '../types';
+
+export const saveLocalDescription = createAction(webrtcTypes.SAVE_LOCAL_DESCRIPTION);
+export const saveRemoteDescription = createAction(webrtcTypes.SAVE_REMOTE_DESCRIPTION);
+export const saveAnswerDescription = createAction(webrtcTypes.SAVE_ANSWER_DESCRIPTION);
+export const setClientType = createAction(webrtcTypes.SET_CLIENT_TYPE);

lib/store/reducers/index.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import { History } from 'history';
+import { connectRouter } from 'connected-react-router';
+import webrtc from './webrtc';
+
+const createRootReducer = (history: History) => combineReducers({
+  router: connectRouter(history),
+  webrtc,
+});
+
+export default createRootReducer;

lib/store/reducers/webrtc.ts

@@ -0,0 +1,37 @@
+import { ActionWithPayload } from '../actions';
+import { webrtcTypes } from '../types';
+
+const initialState = {
+  clientType: '',
+  localDescription: {},
+  remoteDescription: {},
+  answerDescription: {},
+};
+const webrtc = (state = initialState, action: ActionWithPayload<any>) => {
+  switch (action.type) {
+    case webrtcTypes.SAVE_LOCAL_DESCRIPTION:
+      return {
+        ...state,
+        localDescription: action.payload,
+      };
+    case webrtcTypes.SAVE_REMOTE_DESCRIPTION:
+      return {
+        ...state,
+        remoteDescription: action.payload,
+      };
+    case webrtcTypes.SAVE_ANSWER_DESCRIPTION:
+      return {
+        ...state,
+        answerDescription: action.payload,
+      };
+    case webrtcTypes.SET_CLIENT_TYPE:
+      return {
+        ...state,
+        clientType: action.payload,
+      };
+
+    default:
+      return state;
+  }
+};
+export default webrtc;

lib/store/types/index.ts

@@ -0,0 +1,5 @@
+import * as webrtcTypes from './webrtc';
+
+export {
+  webrtcTypes,
+};

lib/store/types/webrtc.ts

@@ -0,0 +1,4 @@
+export const SAVE_LOCAL_DESCRIPTION = 'store/webrtc/SAVE_LOCAL_DESCRIPTION';
+export const SAVE_REMOTE_DESCRIPTION = 'store/webrtc/SAVE_REMOTE_DESCRIPTION';
+export const SAVE_ANSWER_DESCRIPTION = 'store/webrtc/SAVE_ANSWER_DESCRIPTION';
+export const SET_CLIENT_TYPE = 'store/webrtc/SET_CLIENT_TYPE';

lib/utils/rpc.ts

@@ -24,6 +24,7 @@ class Client {
           this.id = uid;
           this.ipc.on(uid, this.ipcListener);
           this.emitter.emit('ready');
+          console.log('this.id :>> ', this.id);
         });
       }
     }

package.json

@@ -38,6 +38,8 @@
     "@types/node": "^14.14.12",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.15",
+    "@types/redux-actions": "^2.6.1",
     "@types/terser-webpack-plugin": "^5.0.2",
     "@types/uuid": "^8.3.0",
     "@types/webpack": "^4.41.25",
@@ -64,6 +66,7 @@
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
     "null-loader": "^4.0.1",
+    "redux-devtools-extension": "^2.13.8",
     "style-loader": "^2.0.0",
     "styled-jsx": "^3.3.2",
     "terser-webpack-plugin": "^5.0.3",
@@ -76,9 +79,16 @@
   },
   "dependencies": {
     "antd": "^4.9.2",
+    "connected-react-router": "^6.8.0",
     "cross-spawn": "^7.0.3",
+    "history": "^5.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-saga": "^1.1.3",
     "uuid": "^8.3.2",
     "ws": "^7.4.2"
   }