如何在浏览器中显示Node.js REPL

Question

I am currently running a Node.js repl to evaluate code, using the regular commend repl.start const repl = Repl.start({ prompt }); 我目前正在使用常规命令repl.start const repl = Repl.start({ prompt });运行Node.js repl来评估代码const repl = Repl.start({ prompt }); This starts a the console as expected. 这将按预期启动控制台。 I wish to send code to the server from my browser in order to evaluate it and display it back in the browser, however didn't find any documentation to do so. 我希望将代码从浏览器发送到服务器，以便对其进行评估并在浏览器中显示出来，但是找不到任何文档。 Is this possible at all? 这有可能吗？

Answer 1

Is this possible at all? 这有可能吗？

Yes, and it's also very dangerous, because a script could require some filesystem utility and start copying, deleting, or reading files that the browser should not be able to reach through a Web server. 是的，这也非常危险，因为脚本可能需要一些文件系统实用程序，并开始复制，删除或读取浏览器无法通过Web服务器访问的文件。

That being said, assuming you know what you are asking, this is an example of how you could achieve something similar. 话虽这么说，假设您知道自己在问什么，这是如何实现类似目标的一个示例。

It's using sockets for simplicity, but you could use fetch to send all data at once and receive output results. 为了简单起见，它使用套接字，但是您可以使用访存一次发送所有数据并接收输出结果。

package.json 的package.json

{
  "name": "browser-repl",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "pocket.io": "^0.1.4"
  }
}

index.html 的index.html

<!doctype html>
<html>
  <head>
    <script src="/pocket.io/pocket.io.js"></script>
    <script>
    this.onload = () => {
      const socket = io();
      socket.on('eval', result => {
        repl.value += result;
      });
      sender.addEventListener('click', () => {
        const {value} = repl;
        repl.value = '';
        socket.emit('eval', value.trim() + '\n');
      });
    };
    </script>
  </head>
  <body>
    <textarea id="repl"></textarea>
    <button id="sender">evaluate</button>
  </body>
</html>

index.js index.js

const repl = require('repl');
const app = require('express')();
const http = require('http').Server(app);
const io = require('pocket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  let connected = true;
  const r = repl.start({
    writer(data) {
      if (connected)
        socket.emit('eval', data);
      return data;
    }
  });
  socket.on('eval', function (input) {
    r.input.emit('data', input);
  });
  socket.on('disconnect', function () {
    connected = false;
    r.input.emit('data', '.exit\n');
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

You can npm i in that folder containing the 3 files, then run node . 您可以在包含3个文件的文件夹中npm i ，然后运行node . or node index.js and go to http://localhost:3000/ after. 或node index.js然后转到http：// localhost：3000 / 。

Feel free to type in the textarea 1+1 or anything else you like and then press evaluate . 随意输入文本区域1+1或您喜欢的其他任何内容，然后按evaluate 。

This is obviously a hint on how to start, so that your question should be somehow answered. 这显然是有关如何开始的提示，因此您的问题应以某种方式得到回答。

Regards 问候

如何在浏览器中显示Node.js REPL

问题描述

1 个解决方案

解决方案1
1 2019-09-03 20:24:44

如何在浏览器中显示Node.js REPL

问题描述

1 个解决方案

解决方案1 1 2019-09-03 20:24:44

解决方案1
1 2019-09-03 20:24:44