本文详细介绍了如何在 pyscript 的 `py-repl` 环境中捕获用户输入的 python 代码，这对于教学、作业提交或代码记录等场景至关重要。主要探讨了两种方法：利用 `py-repl` 元素的 `getpysrc()` 方法获取当前代码，以及通过 pyscript 新增的插件方法 `beforepyreplexec()` 和 `afterpyreplexec()` 在代码执行前后获取源代码，为开发者提供了灵活的会话内容保存策略。
在构建基于 PyScript 的交互式应用，特别是需要记录用户在 py-repl 中输入的代码时，捕获会话内容是一个常见需求。例如，在教育场景中，教师可能需要收集学生提交的 Python 作业代码。本文将深入探讨两种有效的方法来获取 py-repl 元素的源代码内容。
方法一：使用 getPySrc() 方法获取当前 REPL 内容
py-repl 元素提供了一个名为 getPySrc() 的方法，可以直接获取当前 REPL 中所有输入的 Python 代码。尽管在某些版本中这被视为一个内部实现细节，但它已相对稳定，并且社区已提出将其提升为官方 API 的请求。
工作原理： 当用户在 py-repl 中输入代码并执行后，这些代码会被内部存储。getPySrc() 方法会返回一个字符串，其中包含 py-repl 当前状态下所有已输入的 Python 源代码。
示例代码：
首先，在 HTML 页面中嵌入一个 py-repl 元素和一个用于触发保存的按钮：
<!DOCTYPE html>
<html lang="en">
<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">
print("Hello, PyScript!")
x = 10
y = 20
print(f"Sum: {x + y}")
</py-repl>
<button onclick="saveReplSession()">保存 REPL 内容</button>
<pre id="output"></pre>
<script type="py" src="./main.py"></script>
<script>
function saveReplSession() {
const replElement = document.getElementById('my-repl');
if (replElement && typeof replElement.getPySrc === 'function') {
const sessionCode = replElement.getPySrc();
document.getElementById('output').textContent = sessionCode;
console.log("REPL Session Code:", sessionCode);
// 在这里可以将 sessionCode 发送到后端或保存为文件
// 例如，通过 AJAX 请求发送到服务器
} else {
console.error("无法找到 py-repl 元素或 getPySrc 方法不存在。");
}
}
</script>
</body>
</html>在上述示例中，当用户点击“保存 REPL 内容”按钮时，JavaScript 函数 saveReplSession() 会被调用。该函数通过 document.getElementById('my-repl') 获取 py-repl 元素实例，然后调用其 getPySrc() 方法来获取当前 REPL 中的所有 Python 代码。这些代码随后可以被用于展示、发送到服务器或存储。
注意事项：
- getPySrc() 返回的是整个 REPL 累计的输入代码，而不是单次执行的代码。
- 由于其“内部”性质，建议在生产环境使用前进行充分测试，并关注 PyScript 官方文档的更新。
方法二：利用 PyScript 插件机制跟踪执行代码
对于更高级或需要精细控制的场景，PyScript 引入了插件机制，特别是 beforePyReplExec() 和 afterPyReplExec() 这两个插件方法。这些方法在 REPL 代码执行前后被调用，并提供了一个 src 参数，其中包含即将（或刚刚）执行的源代码。
工作原理： PyScript 插件允许开发者在特定生命周期事件中注入自定义逻辑。beforePyReplExec() 在 REPL 单元格中的代码执行之前触发，而 afterPyReplExec() 则在执行之后触发。两者都接收一个包含当前执行代码片段的 src 参数，这使得跟踪每个 REPL 单元格的执行内容成为可能。
示例插件结构（概念性）：
首先，创建一个 PyScript 插件文件，例如 repl_tracker_plugin.py：
# repl_tracker_plugin.py
from pyscript import Element
class ReplTrackerPlugin:
def __init__(self, runtime):
self.runtime = runtime
self.executed_code_history = []
print("ReplTrackerPlugin initialized.")
def beforePyReplExec(self, repl_element, src, python_globals):
# 在 REPL 代码执行前记录
print(f"Executing REPL code (before): {src}")
# self.executed_code_history.append(f"BEFORE_EXEC: {src}")
def afterPyReplExec(self, repl_element, src, python_globals, result):
# 在 REPL 代码执行后记录
print(f"Executed REPL code (after): {src}")
self.executed_code_history.append(src) # 记录每次执行的代码
# 可以在这里将 self.executed_code_history 发送到其他地方
# 例如，更新一个隐藏的 HTML 元素
Element("code-history").element.textContent = "\n".join(self.executed_code_history)
print("Current history:", self.executed_code_history)
# PyScript 会自动发现并加载这个类作为插件然后在 HTML 中引用这个插件，并添加一个用于显示历史记录的元素：
<!DOCTYPE html>
<html lang="en">
<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-config>
plugins = ["./repl_tracker_plugin.py"]
</py-config>
<py-repl id="my-repl-tracked">
a = 5
print(a)
</py-repl>
<py-repl id="another-repl-tracked">
b = 10
print(b)
</py-repl>
<h2>执行代码历史</h2>
<pre id="code-history"></pre>
</body>
</html>注意事项：
- 这种方法允许你捕获每次执行的单独代码片段，而不是整个 REPL 的累计内容。
- 它适用于需要对每次执行进行独立记录、分析或处理的场景。
- 需要对 PyScript 的插件机制有一定了解。
- 插件的加载和运行依赖于 PyScript 的版本，请参考官方文档以获取最新信息。
总结与选择
- getPySrc() 方法： 最直接、最简单的方案，适用于需要获取 py-repl 当前所有累积代码的场景。它的实现相对稳定，但并非官方推荐的 API。
- 插件方法 (beforePyReplExec(), afterPyReplExec())： 提供了更细粒度的控制，可以在每次代码执行前后进行操作，捕获单个执行单元的代码。这对于构建复杂的监控、日志或教学辅助系统非常有用，但需要更多的配置和对 PyScript 插件机制的理解。
根据你的具体需求，选择最适合的方法。如果仅仅是想获取最终的代码状态，getPySrc() 通常足够。如果需要跟踪每次交互的细节，插件方法则提供了更强大的能力。在集成到如 Google Drive 或 Classroom 等外部系统时，捕获到的代码字符串可以通过 JavaScript 的 fetch API 或其他方式发送到后端进行处理和存储。
