uchcode · August 28, 2017 08:45
diff --git a/electron_ruby_example2.html b/electron_ruby_example2.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>
	<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>