在浏览器中嵌入一个ruby解释器

embedding a ruby interpreter in browser

本文关键字：一个 ruby 解释器 浏览器      更新时间：2023-09-26

我有一个rails应用程序，我试图让用户交互式地编写ruby代码，类似于rubymonk。计划是有一个文本区，他们可以写ruby代码，有一个按钮，将执行他们所写的一切。我怎么也想不出怎么做这件事。

首先我在看RubyJS，但这似乎只是允许你在javascript中定义ruby对象。它仍然需要你编写JS。Opal是另一种想法，但这似乎只是服务器端。一种选择是将ruby代码字符串发送到服务器并使用eval执行它，但这似乎是一个安全噩梦。

这就引出了我最后一个问题。是否有任何JS库将采用ruby(作为字符串)编写的代码块，并将其编译成JS并执行?或者如果我忽略了什么，有没有更简单的解决方案?

这个问题已经问了一段时间了，但是如果人们仍然感兴趣…

蛋白石是另一个想法，但这似乎只是服务器端。一种选择是将ruby代码字符串发送到服务器，并使用eval执行它，但这似乎是一个安全噩梦。

您可以在客户端运行Opal !

添加opal到您的站点，然后使用Opal.compile()和Opal.eval()运行ruby脚本。他们所做的基本上是通过opal解析器运行opal解析器，从而生成解析器的JS版本。通过从站点下载opal-parser.min.js，您可以找到包含解析器的opal预编译版本。这将使您能够访问.compile()和.eval()函数。

这是我能想到的最简单完整的在线ruby编译器。请注意，puts打印到控制台，因此，如果您希望看到任何输出，请确保在最后一条语句中有返回非nil值的东西。

index . html 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Compile ruby from your browser</title>
  </head>
  <body>
    <h1>Input</h1>
    <textarea id="input" rows="5" cols="50">
puts "Hello, World!"
3 * 5
puts "blurb"
4**6
    </textarea>
    <button id="compile" onclick="compile()">Compile!</button>
    <h1>Transpiled</h1>
    <textarea id="transpiled" rows="5" cols="50"></textarea>
    <h1>Output</h1>
    <textarea id="output" rows="5" cols="50"></textarea>
    <script src="js/opal.min.js"></script>
    <script src="js/opal-parser.min.js"></script>
    <script type="text/javascript">Opal.load('opal-parser')</script>
    <script src="js/scripts.js"></script>
  </body>
</html>

script.js 

function compile() {
  const input = document.getElementById("input");
  const transpiled = document.getElementById("transpiled");
  const output = document.getElementById("output");
  transpiled.value = Opal.compile(input.value);
  output.value = eval(transpiled.value);
}
document.onload = function() { compile(); }

如果希望代码在客户端执行，可以使用emscripten。这就是我的回答。确实如此。

如果你想让代码在服务器端执行，如果你不想处理安全问题，你可以使用Ideone API。

注意:Stack Overflow不允许我发布到Ideone API的链接，所以这里是URL: http colon slash slash ideone.com slash api

相关文章：