electron 中如何做到实时通信（1、主进程和渲染进程实时通信；2、react和渲染进程实时通信）？

Question

我想要实现一个：
react 调用nodejs ping 功能，让后实时与Ping模块程序通信，进行得到的结果展示在react界面上，这个解决方案应该如何做呢？

1、是否在渲染进程中执行最好？(不再经过Ipc通信，效率会更加高)
2、如果在渲染进程中做，那么如何实现实时通信呢？
3、如果通过ipc通信，让主进程执行ping 命令，那么ipc如何才能进行实时地通信呢？

例如，每得到一个reply，就主动推送一条信息：

% ping baidu.com 
PING baidu.com (39.156.66.10): 56 data bytes
64 bytes from 39.156.66.10: icmp_seq=0 ttl=48 time=40.713 ms
64 bytes from 39.156.66.10: icmp_seq=1 ttl=48 time=44.076 ms
64 bytes from 39.156.66.10: icmp_seq=2 ttl=48 time=39.497 ms
64 bytes from 39.156.66.10: icmp_seq=3 ttl=48 time=46.315 ms
64 bytes from 39.156.66.10: icmp_seq=4 ttl=48 time=53.851 ms
64 bytes from 39.156.66.10: icmp_seq=5 ttl=48 time=40.669 ms
64 bytes from 39.156.66.10: icmp_seq=6 ttl=48 time=42.407 ms
64 bytes from 39.156.66.10: icmp_seq=7 ttl=48 time=48.937 ms
64 bytes from 39.156.66.10: icmp_seq=8 ttl=48 time=52.003 ms
64 bytes from 39.156.66.10: icmp_seq=9 ttl=48 time=44.984 ms

Answer 1

主进程中：

const { ipcMain } = require('electron');

ipcMain.on('ping', (event, args) => {
  // 执行 ping 命令
  const result = runPing(args);
  event.sender.send('pingResult', result);
});

渲染进程中：

const { ipcRenderer } = require('electron');

// 发送 ping 请求
ipcRenderer.send('ping', 'www.example.com');

// 接收 ping 结果
ipcRenderer.on('pingResult', (event, result) => {
  console.log('ping 结果:', result);
});

React：

import React, { useState, useEffect } from 'react';
const { ipcRenderer } = window.require('electron');

function PingComponent() {
  const [pingResult, setPingResult] = useState('');

  useEffect(() => {
    ipcRenderer.on('pingResult', (event, result) => {
      setPingResult(result);
    });

    return () => {
      ipcRenderer.removeListener('pingResult', () => {});
    };
  }, []);

  const handlePing = () => {
    ipcRenderer.send('ping', 'www.example.com');
  };

  return (
    <div>
      <button onClick={handlePing}>Ping</button>
      <p>{pingResult}</p>
    </div>
  );
}

export default PingComponent;