communication_process_demo.html
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="http://cdn.opalrb.org/opal/current/opal.js"></script>
<script src="http://cdn.opalrb.org/opal/current/opal-parser.js"></script>
<script src="http://cdn.opalrb.org/opal/0.10.1/external/opal-jquery-0.4.2.js"></script>
<script type="text/javascript">Opal.load('opal-parser')</script>

<script type="text/javascript">
function electron_spawn(cmd,arg) {
    let p = require('child_process').spawn(cmd,arg)
    p.stdout.on_data=(action,listener)=>{
        p.stdout.on('data',(data)=>{
            let d = JSON.parse(data.toString())
            if (d.action == action) listener(d)
        })
    }
    p.on('exit',(code,signal)=>{
        console.log(`child process exited:${code} signal:${signal}`)
    })
    p.on('disconnect',()=>{
        console.log('child process disconnect.')
        window.alert('child process disconnect.')
    })
    p.on('error',(err)=>{
        console.error('child process error:',err)
        window.alert('child process error:'+err.toString())
    })
    p.stderr.on('data',(data)=>{
        console.error('stderr:',data.toString())
        window.alert('stderr:'+data.toString())
    })
    window.addEventListener('beforeunload',(event)=>{
        p.kill()
    })
    return p
}
</script>

<title>communication process demo</title>

<body>
<h1>Addition</h1>
<form id="frm" method="post" onsubmit="return false;">
    <input type="number" step="0.1" name="x" placeholder="x" required> +
    <input type="number" step="0.1" name="y" placeholder="y" required> =
    <input type="number" step="0.1" id="z" placeholder="z">
    <input type="submit" id="btn">
</form>
</body>

<!-- プロセス間通信イベントリスナー(子プロセス) -->
<script id="cruby" type="text/plain">
STDOUT.sync = true
require 'json'
loop do
  Thread.start JSON.parse(gets.chomp) do |input|
    case input['action']
    when 'addition'
      output = {
        :action => :addition,
        :z => input['x'] + input['y']
      }
      puts output.to_json
    else
      STDERR.puts 'input:', input
    end
  end
end
</script>

<!-- CRuby起動 -->
<script type="text/ruby">
scpt = Element.find('#cruby').text
$Process = $$.electron_spawn 'ruby', ['-e',scpt]
</script>

<!-- プロセス間通信イベントリスナー(レンダラープロセス) -->
<script type="text/ruby">
$Process.stdout.on_data :addition do |data|
  Element.find('#z').value = data.JS[:z]
  Element.find('#btn').prop :disabled, false
end
</script>

<!-- UIイベントリスナー -->
<script type="text/ruby">
Element.find('#frm').on :submit do |evt|
  Element.find('#btn').prop :disabled, true
  data = `new FormData(#{evt.target.get(0)})`
  json = {
    :action => :addition,
    :x => data.JS.get(:x).to_f,
    :y => data.JS.get(:y).to_f
  }
  $Process.stdin.write <<EOS
    #{json.to_json}
  EOS
end
</script>