背景

由於某個Electron應用，需要主程序、渲染程序、webview之間能夠互相通訊。

不過因為Electron僅提供了主程序與渲染程序的通訊，沒有渲染程序之間或渲染程序與webview之間通訊的辦法，所以只能尋找其他方案來解決。

研究一：ipcMain/ipcRenderer

Electron主程序與渲染程序的通訊，就是用ipcMain/ipcRenderer這兩個物件。

// 在主程序中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})
 
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})
 
//在渲染器程序 (網頁) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
 
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

不過只能ipcRenderer主動傳送訊息，ipcMain無法主動傳送訊息給ipcRenderer。

主程序如何主動傳送訊息給渲染程序？

如果渲染程序的視窗是用BrowserWindow開啟的，那麼可以通過webContents.send主動向視窗傳送訊息。

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

那麼如果想主程序主動向渲染程序傳送訊息，就可以將建立BrowserWindow的邏輯放在主程序裡，所有例項都在主程序裡維護，那麼主動發訊息的問題也就解決了。

渲染程序之間如何進行訊息通訊？

Electron雖然沒有提供渲染程序之間的通訊，但可以通過主程序中轉來達到這個目的。

步驟：

1、ipcRenderer.send訊息到主程序。

2、主程序接收到訊息，再通過維護的BrowserWindow例項，輪詢webContents.send給各個視窗。

3、渲染程序觸發訂閱主程序事件。 

渲染程序與webview之間如何通訊？

由於被開啟渲染視窗中，會使用到webview標籤（類似iframe）嵌入頁面，所以這裡也需要互相通訊。

webview是一個標籤，它有一個ipc-message事件接收渲染程序的訊息，如下。

// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping’)
 
 
//在訪客頁。
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

必須明確一點的是，上面程式碼中webview監聽ipc-message事件的程式碼是寫在渲染程序中的，不是在webview自己頁面程式碼裡。這就有一個很尷尬的問題，事件是有了，但webview頁面裡並不知道。

經過幾番嘗試，確實無法在嵌入頁面接收到事件。

結論

在Electron提供的功能裡，只能做到主程序和渲染程序的互相通訊，webview像個棄子一樣被隔離開了。

研究二：c++外掛

上一個方案走不通後，我又想到是否可以做一個c++外掛來實現。

PS：http://nodejs.cn/api/addons.html

c++外掛實現思路：

1、在外掛裡定義兩個方法，一個listen（訂閱事件），一個trigger（釋出事件）。

2、在listen裡，將訂閱事件的上下文（Local<Context>）、事件名稱、回撥儲存下來。

3、在trigger裡，遍歷儲存的訂閱資訊，匹配事件名稱，然後呼叫訂閱資訊中的回撥。

這裡關鍵的思想就是，在外掛有個全域性變數來儲存各個程序的訂閱資訊，所有的程序都使用同一個例項物件（單例）。

但是在require外掛時候，我發現每個程序都是各自一個例項，不是單例，做不到共享全域性變數。

結論

因為require外掛的例項不是單例，所以此方案也夭折了。

研究三：socket

在上面方法驗證走不通後，最後選擇socket方式來中轉訊息。

PS：https://www.npmjs.com/package/ws

//in main process
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8888 });
 
wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(data) {
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(data);
            }
        });
    });
});
 
//in render process or webview
const WebSocket = require('ws');
const busClient = new WebSocket('ws://127.0.0.1:' + busPort + '/');
 
busClient.on('message', function incoming(data) {
    console.log(data)
});
 
busClient.send('hello world’);

事件訂閱與釋出就可以基於上面程式碼實現。

//in render process or webview
var busEvents = {};
 
const WebSocket = require('ws');
const busClient = new WebSocket('ws://127.0.0.1:' + busPort + '/');
 
busClient.on('message', function incoming(data) {
    data = JSON.parse(data);
    if(busEvents[data.eventName]){
        busEvents[data.eventName].apply(this, data.args);
    }
});
 
function listen(eventName, func) {
    busEvents[eventName] = func;
}
 
function trigger(eventName, args) {
    busClient.send(JSON.stringify({
        eventName,
        args
    }))
}
 

總結

Electron主程序、渲染程序、webview之間的通訊，只能通過socket實現。

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/11180336.