🎉 add: 进程通信

main/event/message.js

@@ -96,7 +96,41 @@ function createWindowTrans() {
   });
 }
 
+function getSyncMsg() {
+  ipcMain.on('sync-render', (event, data) => {
+    console.log(data);
+    event.sender.send('main-msg', '主进程收到了渲染进程的【异步】消息！')
+  });
+}
+
+function getAsyncMsg() {
+  ipcMain.on('async-render', (event, data) => {
+    console.log(data);
+    event.returnValue = '主进程收到了渲染进程的【同步】消息！';
+  });
+}
+
+function sendMsg() {
 
+  let i = 0;
+  const mainWindow = BrowserWindow.fromId(global.mainId);
+  ipcMain.on('start-msg', (event, data) => {
+    console.log('开始定时向渲染进程发送消息！');
+    global.sendMsg = true;
+  });
+
+  ipcMain.on('end-msg', (event, data) => {
+    console.log('结束向渲染进程发送消息！');
+    global.sendMsg = false;
+  });
+
+  setInterval(() => {
+    if (global.sendMsg) {
+      mainWindow.webContents.send('main-msg', `ConardLi【${i++}】`)
+    }
+  }, 200);
+
+}
 
 
 export default function handleMessage() {
@@ -107,4 +141,7 @@ export default function handleMessage() {
   createNoBarWindowWithButton();
   createWindowDrag();
   createWindowTrans();
+  getSyncMsg();
+  getAsyncMsg();
+  sendMsg();
 }

render/component/Nav/index.js

@@ -43,6 +43,9 @@ class Nav extends Component {
           <Item key="Window">
             <Link to='/Window'>窗口</Link>
           </Item>
+          <Item key="IPC">
+            <Link to='/IPC'>进程通信</Link>
+          </Item>
           <Item key="Dialog">
             <Link to='/Dialog'>弹框</Link>
           </Item>

render/routes/index.js

@@ -9,6 +9,7 @@ import System from '$views/System';
 import Print from '$views/Print';
 import Shell from '$views/Shell';
 import MenuView from '$views/MenuView';
+import IPC from '$views/IPC';
 
 export default class RouteContent extends Component {
   render() {
@@ -23,6 +24,7 @@ export default class RouteContent extends Component {
         <Route path="/Print" component={Print} />
         <Route path="/Shell" component={Shell} />
         <Route path="/MenuView" component={MenuView} />
+        <Route path="/IPC" component={IPC} />
         <Redirect path="/" to={{ pathname: '/Home' }} />
       </Switch>
     );

render/views/IPC/index.css

@@ -0,0 +1,8 @@
+.demoContainer {
+  width: 50%;
+  margin: 0 auto;
+}
+
+.margin {
+  margin-top: 15px;
+}

render/views/IPC/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Alert } from 'antd';
+import styles from './index.css';
+import { ipcRenderer } from 'electron';
+
+
+class IPC extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      msg: ''
+    }
+  }
+
+  componentDidMount() {
+    ipcRenderer.on('main-msg', (event, msg) => {
+      this.setState({ msg })
+    })
+  }
+
+  handleSendSync = () => {
+    ipcRenderer.send('sync-render', '我是来自渲染进程的异步消息');
+  }
+
+  handleSendAsync = () => {
+    const msg = ipcRenderer.sendSync('async-render', '我是来自渲染进程的同步消息');
+    this.setState({ msg })
+  }
+
+  handleStart = () => {
+    ipcRenderer.send('start-msg');
+  }
+
+  handleEnd = () => {
+    ipcRenderer.send('end-msg');
+  }
+
+
+  render() {
+    const { msg } = this.state;
+    return (
+      <div className={styles.demoContainer}>
+        <Alert className={styles.margin} message="点击向主进程发送【异步】消息" type="info" />
+        <Button className={styles.margin} onClick={this.handleSendSync}>发送</Button>
+        <Alert className={styles.margin} message="点击向主进程发送【同步】消息" type="error" />
+        <Button className={styles.margin} onClick={this.handleSendAsync}>发送</Button>
+        <Alert className={styles.margin} message="点击告诉主进程，开始向渲染进程发消息吧！" type="error" />
+        <Button className={styles.margin} onClick={this.handleStart}>开始发送</Button>
+        <Button className={styles.margin} onClick={this.handleEnd}>结束发送</Button>
+        <Alert className={styles.margin} message={"主进程的回应：" + msg} type="warning" />
+      </div>
+    );
+  }
+}
+
+export default IPC;