• Electron 主进程和渲染进程互相通信


    说明:

    自主到从:从Main到Renderer的消息传递,借助BrowerWindow.webContents.send()发送消息。
    自从到主:从Renderer到Main的消息传递,借助ipcRender和ipcMain发送/接收消息。
    事件机制:无论是BrowerWindow.webContents.send(),还是ipc,其实都是node的事件机制,都是EventEmitter的实例。

    1.主进程向渲染进程发送消息

    主进程

    const { app, BrowserWindow } = require('electron')
    let win = null
     
    app.on('ready', () => {
      win = new BrowserWindow({  800, height: 600 })
      win.loadURL(`file://${__dirname}/index.html`)
      win.webContents.on('did-finish-load', () => {
        win.webContents.send('ping', 'whoooooooh!')
      })
    })

    index.html

    <html>
    <body>
      <script>
        require('electron').ipcRenderer.on('ping', (event, message) => {
          console.log(message) // Prints 'whoooooooh!',这里的message是object类型
        })
      </script>
    </body>
    </html>

    2.渲染进程向主进程发送消息

    index.html 

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
      <title>myapp</title>
    </head>
     
    <body>
      <input type="" name="" id="ipt" value="">
      <button type="button" onclick="connectMain()">和主进程通信</button>
     
      <script>
        const ipc = require('electron').ipcRenderer;
        var ipt = document.getElementById('ipt')
     
        function connectMain() {
          console.log('index.html', ipt.value);
          ipc.send('getMsg', ipt.value)
        }
      </script>
    </body>
     
    </html>

    主进程

    const ipc = require('electron').ipcMain
     
    ipc.on('getMsg', (sys, msg) => {
      console.log(msg)  //接收窗口传来的消息
    })

    3.主进程和渲染进程之间发送和处理消息

    • 回应同步消息, 可以设置 event.returnValue.
    • 回应异步消息, 可以使用 event.sender.send(...).

       例子,在主进程和渲染进程之间发送和处理消息:

    (过程:渲染进程发消息->主进程接收消息并回复->渲染进程接收主进程的回复)

    渲染进程:

    // In renderer process (web page).
    const ipcRenderer = require('electron').ipcRenderer;
    console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"  发送同步消息
     
    ipcRenderer.on('asynchronous-reply', function(event, arg) {    // 接收异步消息
      console.log(arg); // prints "pong"
    });
    ipcRenderer.send('asynchronous-message', 'ping');    // 发送异步消息

    主进程:

    // In main process.
    const ipcMain = require('electron').ipcMain;
    ipcMain.on('asynchronous-message', function(event, arg) {    // 接收异步消息
      console.log(arg);  // prints "ping"
      event.sender.send('asynchronous-reply', 'pong');     // 回应异步消息
    });
     
    ipcMain.on('synchronous-message', function(event, arg) {    // 接收同步消息
      console.log(arg);  // prints "ping"
      event.returnValue = 'pong';
    });

    参考:https://blog.csdn.net/weixin_42762089/article/details/87912222

    参考官网:https://wizardforcel.gitbooks.io/electron-doc/content/api/ipc-main.html

  • 相关阅读:
    你所不知道的React Hooks
    DataRow的RowState属性变化
    gRPC详解
    Protobuf简明教程
    docker容器内没有权限
    Locust高并发情况下的性能优化与分布式场景的应用
    Docker容器日志打满机器的解决方式
    Django单测详解
    使用Flask+uwsgi+Nginx部署Flask正式环境
    Locust-分布式执行
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14451290.html
Copyright © 2020-2023  润新知