侧边栏
在浏览器运行可交互Python代码
发布于 | 分类于 技术原理
最近研究了一些在线运行代码应用，感觉颇为有趣，在此稍作总结，并尝试实现一种在浏览器运行可交互Python代码的方案。
所谓“可交互Python代码”，指的是python中
input等接受标准输入数据的API
下面列举了一些在线编辑器，可以体验一番
- https://www.onlinegdb.com/online_python_interpreter
- https://repl.it/languages/python3
- https://www.programiz.com/python-programming/online-compiler/
将Python转换成JavaScript代码
由于Python也是解释型代码，因此可以通过解析AST的方式，通过JavaScript运行Python代码，常见的库有
相关API使用在文档中均有说明，本文不再赘述。
由于浏览器的限制，上面的这些库会缺少一些功能如文件操作等；此外如input方法，会通过window.prompt进行mock。
因此，直接在浏览器运行python存在一些问题
- 需要引入额外的
py to js库文件，且这些库或多或少缺少部分API的支持，不能100%还原python代码运行 - 由于最后是运行JavaScript代码，代码运行错误需要转换才行
服务端沙盒运行python
另外的一种方案是：在服务端启动一个代码执行环境，通过网络提交python代码，然后将结果返回给前端。
基础方案
通过shelljs，我们可以在NodeJS中运行脚本命令
js
let shell = require('shelljs')
// 如果code是通过http传输的，就可以直接在服务端环境运行python代码
let code = `print('hello world')`
let res = shell.exec(`python3 -c "${code}"`)
// 通过res.stdout将输出返回给浏览器这种方式看起来比较简单，甚至不需要引入额外的库文件，只需一个提供python运行环境的服务器即可。在实现中遇见的一个问题是:如何解决python中input的问题？
为了解决这个问题，我们先来了解一下标准输入和标准输出的知识
标准输入
下面是nodejs标准输入示例代码，需要了解process.stdin和process.stdout模块
js
process.stdin.resume();
process.stdin.setEncoding('utf-8');
var arr = [];
process.stdin.on('data', function (data) {
var number = data.slice(0, -1);
if (number == 'end') {
process.stdin.emit('end');
} else {
arr.push(number);
}
});
process.stdin.on('end', function () {
console.log(arr);
});
// process.stdin.emit('data', '1 ') // 向标准输入写入
// process.stdin.emit('data', 'end ')操作标准输入的例子
读取外界输入
在nodejs中可以直接使用process.argv获取命令行参数。在线刷题时，需要从控制台读取输入，可以使用readline模块，参考Nodejs 按行读取控制台输入(stdin)的几种方法
脚本自动登录
参考:nodejs中如何知道子进程正在等待输入，并向其输入数据
假设一个命令行工具login需要通过交互的方式依次输入username、password，如何编写一个自动化脚本auto-login将参数直接传递给login呢?
原本的登录工具login
js
// login.js
const readline = require('readline')
function createInput(msg) {
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
})
return new Promise(function(resolve, reject) {
rl.question(`请输入${msg}: `, data => {
rl.close()
resolve(data)
})
})
}
Promise.resolve()
.then(() => {
return createInput('用户名').then(username => ({ username }))
})
.then(userInfo => {
return createInput('密码').then(password => ({
...userInfo,
password,
}))
})
.then(userInfo => {
return createInput('邮箱').then(email => ({
...userInfo,
email,
}))
})
.then(userInfo => {
console.log(userInfo)
process.exit(0)
})自动登录auto-login，主要实现是获取子进程subProcess的实例，然后通过subProcess.stdin.write的方式传回数据
js
const fs = require('fs');
const { spawn } = require('child_process');
var subProcess = spawn('node', ['login.js'], { cmd: __dirname });
subProcess.on('error', function() {
console.log('error');
console.log(arguments);
});
subProcess.on('close', code => {
if (code != 0) {
console.log(`子进程退出码：${code}`);
} else {
console.log('登录成功');
}
process.stdin.end();
});
subProcess.stdin.on('end', () => {
process.stdout.write('end');
});
let getNextInput = (()=>{
let cursor = 0
var config = {username:'txm',password:'123',email:'[email protected]'}
let keys = Object.keys(config)
return ()=>{
return config[keys[cursor++]]
}
})()
subProcess.stdout.on('data', onData);
subProcess.stderr.on('data', onData);
function onData(data) {
process.stdout.write('# ' + data);
let answer = getNextInput()
subProcess.stdin.write(answer + '\n');
// 如果需要手动输入，则可以将父进程的输入重定向到子进程
// process.stdin.on('data', input => {
// input = input.toString().trim();
// subProcess.stdin.write(input + '\n');
// });
}解决input的问题
上面login的node脚本可以使用python编写，大致如下
py
# 一个展示命令行交互的代码
username = input('input username:')
password = input('input password:')
email = input('input email:')
print('username:%s, password: %s, email:%s' % (username, password, email))
# exit(0)
# 突然想起了“人生苦短，我用python”这句话片头的问题可以修改为：如何通过其他程序，向一个等待标准输入的python程序写入数据？
想象一下整个流程
- 在浏览器编写python代码
- 通过http协议发送到服务端，服务端运行python脚本，执行到
input时，等到输入 - 服务端通知浏览器，提示用户输入，并将输入传回服务端
- 服务端将用户输入透传给给正在等待输入的python程序，程序继续执行，如此往复
- python程序执行完毕，服务端将输出响应返回浏览器，用户看见执行结果，运行完毕
可以对于整个过程，存在浏览器和服务端的多次通信，可以想到使用websocket来进行实现，在父子进程通信的各个时机进行socket消息的发送。
服务端代码实现
js
// server
socket.on("disconnect", function() {
console.log("user disconnected");
});
// 运行传回的代码
let subProcess;
socket.on("run code", function(msg) {
subProcess = runPython(socket, msg);
});
socket.on("code input", function(msg) {
subProcess.stdin.write(msg + "\n");
});
function runPython(socket, code) {
let fileName = "tmp.py"; // 可以换成随机文件名避免重复
fs.writeFileSync(fileName, code, "utf8");
let subProcess = spawn("python3", [fileName], { cmd: __dirname });
let isClose = false;
// 监听子进程是否运行完毕
subProcess.on("close", code => {
isClose = true;
console.log(code === 0 ? "登录成功" : `子进程退出码：${code}`);
subProcess.stdout.off("data", onData);
subProcess.stderr.off("data", onData);
});
subProcess.stdout.on("data", onData);
subProcess.stderr.on("data", onData);
process.stdin.on("data", input => {
input = input.toString().trim();
if (!isClose) {
subProcess.stdin.write(input + "\n");
}
});
function onData(data) {
setTimeout(() => {
if (isClose) {
socket.emit("code response", data.toString());
} else {
socket.emit("stdout", data.toString());
}
}, 20);
}
return subProcess;
}客户端代码实现
js
let socket = io();
function createStdout(msg) {
let li = document.createElement("li");
li.innerHTML = `<li> >>> ${msg}：<input class="stdin"/></li>`;
list.appendChild(li);
}
function createResponse(msg) {
let li = document.createElement("li");
li.innerHTML = `<li> >>> ${msg}`;
list.appendChild(li);
}
// 注册响应
socket.on("stdout", function(msg) {
createStdout(msg);
});
socket.on("code response", function(msg) {
createResponse(msg);
});
// 注册事件
btn.onclick = function send() {
let code = content.value;
socket.emit("run code", code);
};
function codeInput(e) {
let target = e.target;
let val = target.value;
val && socket.emit("code input", val);
}
list.onclick = function(e) {
let target = e.target;
if (target.classList.contains("stdin")) {
target.removeEventListener("blur", codeInput);
target.addEventListener("blur", codeInput);
}
};至此，就实现了一个可交互的在线python运行工具，完整代码已放在github上了。
小结
本文主要实现了一种在浏览器运行可交互python代码的方案，主要原理是借助服务器环境运行代码，并通过websocket传递标准输入与标准输入。
此外还存在一些未解决的问题
- 代码注入带来的安全问题，由于代码实际是在真实服务环境下运行，我们必须考虑相关的权限和安全问题
- 进程新建、切换带来的性能问题，以及用户长时间不输入时导致进程一直无法退出等场景
接下来会研究使用Docker构建运行沙盒来解决上述问题，后会有期。
你要请我喝一杯奶茶？
版权声明：自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。
