本文旨在指导开发者如何在PyScript的`py-repl`交互式环境中获取并保存用户输入的Python代码。我们将探讨两种主要方法：利用`py-repl`元素的内部`getPySrc()`方法（适用于当前稳定版本）以及通过PyScript未来版本引入的插件机制（`beforePyReplExec()`和`afterPyReplExec()`）来捕获执行代码。教程将提供具体实现细节和适用场景，帮助开发者构建能够记录用户交互的Web应用，例如在线编程作业提交系统。
在构建基于PyScript的交互式Web应用时，尤其是在教育或代码练习场景中，经常需要获取用户在py-repl元素中输入的Python代码，以便进行保存、分析或提交。本文将详细介绍两种实现此功能的方法。
方法一：利用 py-repl 元素的 getPySrc() 方法
py-repl元素提供了一个内部方法getPySrc()，它能够获取当前REPL会话中用户输入的所有代码内容。尽管这是一个非官方API，但在当前的PyScript版本中，它已被证明相对稳定且有效。
实现步骤
-
HTML结构准备： 在HTML页面中嵌入py-repl元素，并为其提供一个ID以便于JavaScript访问。同时，添加一个按钮来触发代码获取操作。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取PyScript REPL代码</title> <link rel="stylesheet" href="https://pyscript.net/releases/2024.3.1/pyscript.css" /> <script defer src="https://pyscript.net/releases/2024.3.1/pyscript.js"></script> </head> <body> <h1>PyScript REPL代码捕获示例</h1> <py-repl id="my-repl" auto-create></py-repl> <button onclick="saveReplContent()">保存REPL代码</button> <pre id="saved-code-display"></pre> <script> function saveReplContent() { const replElement = document.getElementById('my-repl'); if (replElement && typeof replElement.getPySrc === 'function') { const codeContent = replElement.getPySrc(); console.log("REPL中的代码内容：", codeContent); document.getElementById('saved-code-display').textContent = codeContent; alert("代码已成功获取并显示在下方！请查看控制台或页面内容。"); // 在此处可以将 codeContent 发送到后端、保存到本地存储或进行其他处理 } else { console.error("无法找到 py-repl 元素或 getPySrc 方法不可用。"); alert("操作失败：无法获取REPL代码。"); } } </script> </body> </html> JavaScript调用： 在JavaScript中，通过document.getElementById()获取py-repl元素实例，然后直接调用其getPySrc()方法。
注意事项
- getPySrc()方法是一个内部实现细节，这意味着它在未来的PyScript版本中可能会被更改或移除，而不提供向后兼容性保证。
- 此方法获取的是py-repl中当前显示的所有代码内容，包括用户已输入但可能尚未执行的代码。
- PyScript社区正在讨论将其作为官方API功能，可以关注相关GitHub Issue (例如 #954) 获取最新进展。
方法二：利用 PyScript 插件机制（beforePyReplExec() 和 afterPyReplExec()）
PyScript的未来版本（例如当前的Release Candidate版本）引入了强大的插件机制，允许开发者在REPL代码执行前后插入自定义逻辑。其中，beforePyReplExec() 和 afterPyReplExec() 这两个插件方法尤其适用于捕获用户执行的代码。
核心概念
- 插件注册： PyScript允许开发者通过JavaScript创建并注册自定义插件。
- 钩子函数： 注册的插件可以定义特定的钩子函数，这些函数会在PyScript生命周期的特定阶段被调用。
- src 参数： beforePyReplExec() 和 afterPyReplExec() 钩子函数会接收一个包含即将执行或刚刚执行的Python代码的src参数。
实现思路
创建一个PyScript插件，并在其中实现beforePyReplExec()或afterPyReplExec()方法。当用户在py-repl中执行代码时，这些方法会被触发，开发者可以在此时捕获src参数，将其记录下来。
// my-pyscript-plugin.js
export function beforePyReplExec({ src, pyRepl, runtime }) {
console.log("REPL代码即将执行:", src);
// 在此处将 src 存储到数组、发送到服务器或进行其他处理
// 例如：window.executedCodeHistory.push(src);
}
export function afterPyReplExec({ src, pyRepl, runtime, result, error }) {
console.log("REPL代码已执行:", src);
if (error) {
console.error("执行出错:", error);
} else {
console.log("执行结果:", result);
}
// 同样，可以在此处处理 src
}在HTML中引用这个插件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyScript 插件捕获REPL代码</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.3.1/pyscript.css" />
<script defer src="https://pyscript.net/releases/2024.3.1/pyscript.js"></script>
<py-config>
plugins:
- ./my-pyscript-plugin.js
</py-config>
</head>
<body>
<h1>PyScript 插件捕获示例</h1>
<py-repl auto-create></py-repl>
<script>
// 可以在这里初始化一个数组来存储执行过的代码
window.executedCodeHistory = [];
</script>
</body>
</html>优势与适用场景
- 官方API： 插件机制是PyScript官方提供的扩展方式，具有更好的稳定性和未来兼容性。
- 精确捕获： 可以精确捕获每一段被执行的代码，而不是整个REPL的当前内容。这对于跟踪用户逐步解决问题的过程非常有用。
- 灵活控制： 可以在代码执行前或执行后进行操作，例如在执行前进行代码审查，或在执行后记录执行结果。
- 版本要求： 此方法需要较新版本的PyScript（通常是Release Candidate或更高版本）。在生产环境中使用前请务必确认PyScript版本支持此功能。
总结与选择建议
| 特性 | getPySrc() 方法 | 插件机制 (beforePyReplExec/afterPyReplExec) |
|---|---|---|
| 易用性 | 简单直接，一行JS代码即可获取 | 需要创建和注册插件，相对复杂 |
| 稳定性 | 内部方法，未来可能变更，无官方保证 | 官方API，稳定性高，未来兼容性好 |
| 捕获内容 | 获取REPL中所有当前代码内容 | 精确捕获每一段被执行的代码 |
| PyScript版本 | 现有稳定版本均可使用 | 需要较新版本（通常是RC或更高） |
| 适用场景 | 快速获取整个会话内容，适用于简单提交或状态保存 | 详细跟踪用户每一步操作，适用于教学、调试、高级分析 |
选择建议：
- 如果您的项目需要快速且简单地获取用户在py-repl中输入的完整代码，且对PyScript版本兼容性要求不那么严格（即可以接受使用内部方法），那么getPySrc()是一个便捷的选择。
- 如果您的项目需要更稳定、更精确地捕获每一段执行的代码，并且能够使用PyScript的最新版本，那么采用插件机制是更专业和推荐的做法。这对于构建复杂的学习平台或需要详细审计用户操作的场景尤其适用。
无论选择哪种方法，获取到的代码内容都可以进一步处理，例如通过Fetch API发送到后端服务器、存储到浏览器本地存储，或者直接在前端进行分析和展示。
