本文详细介绍了如何在 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 或其他方式发送到后端进行处理和存储。