seokju-na/common.js

## common.js
const { EventEmitter } = require('events');

let value = 0;
let emitter = new EventEmitter();

function increase() {
    value += 1;
    emitter.emit('valueChanges', getValue());
}

function decrease() {
    value -= 1;
    emitter.emit('valueChanges', getValue());
}

function getValue() {
    return value;
}

module.exports = {
    increase,
    decrease,
    subscribe(callback) {
        emitter.on('valueChanges', (newValue) => {
            callback(newValue);
        });
    },
    getValue,
};

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Remote</title>
    <style>
        section {
            border: 1px solid #ddd;
            margin-bottom: 32px;
            padding: 16px;
        }
    </style>
</head>
<body>
    <section id="main">
        <h1>Main process</h1>
        <button id="main-increase">증가</button>
        <button id="main-decrease">감소</button>
        <span id="main-value"></span>
    </section>

    <section id="renderer">
        <h1>Renderer process</h1>
        <button id="renderer-increase">증가</button>
        <button id="renderer-decrease">감소</button>
        <span id="renderer-value"></span>
    </section>

    <section id="remote">
        <h1>Remote</h1>
        <button id="remote-increase">증가</button>
        <button id="remote-decrease">감소</button>
        <span id="remote-value"></span>
    </section>

    <script>
        const { ipcRenderer, remote } = require('electron');
        const common = require('./common');
        const remoteCommon = remote.require('./common');

        const $doc = document;
        const $mainIncrease = $doc.getElementById('main-increase');
        const $mainDecrease = $doc.getElementById('main-decrease');
        const $mainValue = $doc.getElementById('main-value');

        const $rendererIncrease = $doc.getElementById('renderer-increase');
        const $rendererDecrease = $doc.getElementById('renderer-decrease');
        const $rendererValue = $doc.getElementById('renderer-value');

        const $remoteIncrease = $doc.getElementById('remote-increase');
        const $remoteDecrease = $doc.getElementById('remote-decrease');
        const $remoteValue = $doc.getElementById('remote-value');

        // Init value
        $mainValue.innerText = ipcRenderer.sendSync('init-value');
        $rendererValue.innerText = common.getValue();
        $remoteValue.innerText = remoteCommon.getValue();

        // Subscribe event emitter
        ipcRenderer.send('subscribe');
        ipcRenderer.on('update-value', (e, value) => {
            $mainValue.innerText = value;
        });

        common.subscribe((value) => {
            $rendererValue.innerText = value;
        });

        remoteCommon.subscribe((value) => {
            $remoteValue.innerText = value;
        });

        // Handle button click event
        $mainIncrease.addEventListener('click', () => {
            ipcRenderer.send('increase');
        });

        $mainDecrease.addEventListener('click', () => {
            ipcRenderer.send('decrease');
        });

        $rendererIncrease.addEventListener('click', () => {
            common.increase();
        });

        $rendererDecrease.addEventListener('click', () => {
            common.decrease();
        });

        $remoteIncrease.addEventListener('click', () => {
            remoteCommon.increase();
        });

        $remoteDecrease.addEventListener('click', () => {
            remoteCommon.decrease();
        });
    </script>
</body>
</html>

## ipc.js
const { ipcMain } = require('electron');
const common = require('./common');

ipcMain.on('increase', () => {
    common.increase();
});

ipcMain.on('decrease', () => {
    common.decrease();
});

ipcMain.on('subscribe', (event) => {
    common.subscribe((value) => {
        event.sender.send('update-value', value);
    });
});

ipcMain.on('init-value', (event) => {
    event.returnValue = common.getValue();
});

## main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
require('./ipc');

let win;

function createWindow () {
    win = new BrowserWindow({ width: 800, height: 600 });

    win.loadURL(url.format({
        pathname: path.resolve(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true,
    }));

    win.on('closed', () => {
        win = null
    });
}

app.on('ready', () => {
    createWindow();
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});
	const { EventEmitter } = require('events');

	let value = 0;
	let emitter = new EventEmitter();

	function increase() {
	value += 1;
	emitter.emit('valueChanges', getValue());
	}

	function decrease() {
	value -= 1;
	emitter.emit('valueChanges', getValue());
	}

	function getValue() {
	return value;
	}

	module.exports = {
	increase,
	decrease,
	subscribe(callback) {
	emitter.on('valueChanges', (newValue) => {
	callback(newValue);
	});
	},
	getValue,
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Remote</title>
	<style>
	section {
	border: 1px solid #ddd;
	margin-bottom: 32px;
	padding: 16px;
	}
	</style>
	</head>
	<body>
	<section id="main">
	<h1>Main process</h1>
	<button id="main-increase">증가</button>
	<button id="main-decrease">감소</button>
	<span id="main-value"></span>
	</section>

	<section id="renderer">
	<h1>Renderer process</h1>
	<button id="renderer-increase">증가</button>
	<button id="renderer-decrease">감소</button>
	<span id="renderer-value"></span>
	</section>

	<section id="remote">
	<h1>Remote</h1>
	<button id="remote-increase">증가</button>
	<button id="remote-decrease">감소</button>
	<span id="remote-value"></span>
	</section>

	<script>
	const { ipcRenderer, remote } = require('electron');
	const common = require('./common');
	const remoteCommon = remote.require('./common');

	const $doc = document;
	const $mainIncrease = $doc.getElementById('main-increase');
	const $mainDecrease = $doc.getElementById('main-decrease');
	const $mainValue = $doc.getElementById('main-value');

	const $rendererIncrease = $doc.getElementById('renderer-increase');
	const $rendererDecrease = $doc.getElementById('renderer-decrease');
	const $rendererValue = $doc.getElementById('renderer-value');

	const $remoteIncrease = $doc.getElementById('remote-increase');
	const $remoteDecrease = $doc.getElementById('remote-decrease');
	const $remoteValue = $doc.getElementById('remote-value');

	// Init value
	$mainValue.innerText = ipcRenderer.sendSync('init-value');
	$rendererValue.innerText = common.getValue();
	$remoteValue.innerText = remoteCommon.getValue();

	// Subscribe event emitter
	ipcRenderer.send('subscribe');
	ipcRenderer.on('update-value', (e, value) => {
	$mainValue.innerText = value;
	});

	common.subscribe((value) => {
	$rendererValue.innerText = value;
	});

	remoteCommon.subscribe((value) => {
	$remoteValue.innerText = value;
	});

	// Handle button click event
	$mainIncrease.addEventListener('click', () => {
	ipcRenderer.send('increase');
	});

	$mainDecrease.addEventListener('click', () => {
	ipcRenderer.send('decrease');
	});

	$rendererIncrease.addEventListener('click', () => {
	common.increase();
	});

	$rendererDecrease.addEventListener('click', () => {
	common.decrease();
	});

	$remoteIncrease.addEventListener('click', () => {
	remoteCommon.increase();
	});

	$remoteDecrease.addEventListener('click', () => {
	remoteCommon.decrease();
	});
	</script>
	</body>
	</html>
	const { ipcMain } = require('electron');
	const common = require('./common');

	ipcMain.on('increase', () => {
	common.increase();
	});

	ipcMain.on('decrease', () => {
	common.decrease();
	});

	ipcMain.on('subscribe', (event) => {
	common.subscribe((value) => {
	event.sender.send('update-value', value);
	});
	});

	ipcMain.on('init-value', (event) => {
	event.returnValue = common.getValue();
	});
	const { app, BrowserWindow } = require('electron');
	const path = require('path');
	const url = require('url');
	require('./ipc');

	let win;

	function createWindow () {
	win = new BrowserWindow({ width: 800, height: 600 });

	win.loadURL(url.format({
	pathname: path.resolve(__dirname, 'index.html'),
	protocol: 'file:',
	slashes: true,
	}));

	win.on('closed', () => {
	win = null
	});
	}

	app.on('ready', () => {
	createWindow();
	});

	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
	app.quit();
	}
	});

	app.on('activate', () => {
	if (win === null) {
	createWindow();
	}
	});