搜索

用 WebAssembly 在浏览器中运行 Python

Python中文社区

共 5686字，需浏览 12分钟

 ·

2022-04-28 00:37

长期以来，Python 社区一直在讨论如何使 Python 成为网页浏览器中流行的编程语言。然而网络浏览器实际上只支持一种编程语言：JavaScript。随着网络技术的发展，我们已经把越来越多的程序应用在网络上，如游戏、数据科学可视化以及音频和视频编辑软件。这意味着我们已经把繁重的计算带到了网络上——这并不是JavaScript的设计初衷。所有这些挑战提出了对新编程语言的需求，这种语言可以提供快速、可移植、紧凑和安全的代码执行。因此，主要的浏览器供应商致力于实现这个想法，并在2017年向世界推出了WebAssembly。

在本教程中，我们将看一下WebAssembly如何帮助你在浏览器中运行Python代码。

要明确的是，JavaScript本身就是一种强大的编程语言。它只是不适合某些操作。关于这一点，请看JavaScript的创始人Brendan Eich的《从ASM.JS到WebAssembly》一文。

我们正在建立什么

假设你想教一门Python课程。为了使你的课程更加有趣和好玩，在每一节课之后，你想为你的学生安排一个练习，这样他们就可以练习他们所学到的知识。

这里的问题是，学生需要通过安装特定版本的Python来准备一个开发环境，创建并激活一个虚拟环境，并安装所有必要的包。这可能会耗费大量的时间和精力。由于每台机器都是不同的，所以也很难对此提供确切的指导。

虽然你可以创建一个后端，在Docker容器或AWS Lambda函数中运行提交的代码，但你选择保持简单堆栈，在课程内容中添加一个Python编辑器，可以在客户端、在网络浏览器中运行Python代码，并向用户展示结果。这正是你在本教程中要构建的东西。

WebAssembly

根据Mozilla开发者网络（MDN）文档的定义，WebAssembly（WASM）的定义如下：

WebAssembly是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如C、C++和Rust等低级源语言提供一个高效的编译目标。

因此，WASM让我们在浏览器中运行用不同语言（不仅仅是JavaScript）编写的代码，有以下好处：

  • 它是快速、高效和可移植的。

  • 它是安全的，因为代码是在一个安全的沙盒执行环境中运行的。

  • 它可以在客户端运行。

因此，在我们上面的例子中，如果用户在我们的服务器上运行代码，我们不需要担心，如果成千上万的学生尝试练习代码，我们也不需要担心，因为代码的执行发生在客户端，在Web浏览器上。

WebAssembly的设计并不是为了杀死JavaScript。它是对JavaScript的补充。当JavaScript不是合适的工具时，它可以被使用，如游戏、图像识别和图像/视频编辑等。

请看 WebAssembly.org的使用案例，了解更多你可能想利用WebAssembly的情况。

Pyodide

本教程使用Pyodide库来运行Python代码，它将CPython解释器编译为WebAssembly，并在浏览器的JavaScript环境中运行。它带有一些预装的Python软件包。你也可以使用Micropip来使用更多的软件包。

Hello World

用下面的代码创建一个新的HTML文件。

  2.   
  3.

在你的浏览器中打开该文件。然后，在你的浏览器的开发者工具控制台中，你应该做如下事情：

  1. Loading distutils
  2. Loading distutils from https://cdn.jsdelivr.net/pyodide/v0.20.0/full/distutils.js
  3. Loaded distutils
  4. Python initialization complete
  5. Hello, world from the browser!

你可以看到，最后一行是Python代码在浏览器中执行的结果。

让我们快速看一下上面的代码。

  • 首先，你可以使用CDN或直接从GitHub发布的版本下载并安装Pyodide。

  • loadPyodide 加载并初始化 Pyodide wasm 模块。

  • pyodide.runPython将Python代码作为一个字符串，并返回代码的结果。

Pyodide的优势

在前面的例子中，你看到了安装Pyodide并开始使用它是多么容易。你只需要从CDN导入 pyodide.js并通过 loadPyodide初始化它。之后，你可以使用 pyodide.runPython("你的Python代码")在浏览器中运行你的 Python 代码。

当你第一次下载Pyodide时，下载量很大，因为你要下载完整的CPython解释器，但你的浏览器会缓存它，你不需要再次下载它。

在Pyodide上还有一个庞大而活跃的社区。其官方网址如下：

https://pyodide.org/en/stable/

可以看一下其中的Pyodide 路线图、GitHub上的公开问题、Gitter社区。

Pyodide的局限性

第一次加载Pyodide，需要四到五秒（取决于你的连接速度），因为你必须下载约10MB左右的文件。另外，Pyodide代码的运行速度比本地Python慢3到5倍。

其他选择

一般来说，如果你想在浏览器中运行Python，你有两种方法可用。

1、使用转译器将Python转换为JavaScript。Brython、Transcrypt 和 Skulpt 都使用这种方法。

2、转换Python运行环境以在浏览器中使用。Pyodide 和 PyPy.js 使用这种方法。

方案一和方案二的一个主要区别是，方案一中提到的库不支持Python包。也就是说，它们的下载量比方案二中的库要小得多，因此，它们的速度也更快。

在这个教程中，我们选择了Pyodide，因为它的语法更简单，而且支持Python包。如果你对其他选项感兴趣，请随时查看它们的文档。

Python代码编辑器

在本节中，我们将创建一个简单的Python编辑器，可以在浏览器中运行代码。

1、Pyodide 2、CodeMirror 3、Flask

创建一个新的项目。

  1. $ mkdir python_editor_wasm
  2. $ cd python_editor_wasm

创建并激活一个虚拟环境。

  1. $ python3.10 -m venv env
  2. $ source env/bin/activate
  3. (env)$

安装Flask：

  1. (env)$ pip install Flask

在项目的根部创建一个名为app.py的文件并添加以下代码。

  1. from flask import Flask, render_template

  3. app = Flask(__name__)

  5. @app.route('/')
  6. def index():
  7.     return render_template('index.html')

  9. if __name__ == '__main__':
  10.     app.run(debug=True)

在我们项目的根部创建一个 "templates "文件夹，并在其下添加index.html文件。

templates/index.html:

  2.  class="h-full bg-slate-900">
  4.    charset="UTF-8">
  5.    name="viewport" content="width=device-width, initial-scale=1.0">
  6.   
  7.   
  8.   
  9.   
  10.   
  11.    rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
  12.   
  13.   
  14.   
  15.   
  16.   
  17.    rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/theme/dracula.css"/>
  18.   
  20.  class="h-full overflow-hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
  21.    class="text-slate-200 text-3xl my-4 font-extrabold mx-2 pt-8">Run Python in your browser
  22.    class="h-3/4 flex flex-row">
  23.      class="grid w-2/3 border-dashed border-2 border-slate-500 mx-2">
  24.       
  25.        id="code" name="code" class="h-full">
  26.

  • class="grid w-1/3 border-dashed border-2 border-slate-500 mx-2">

  • readonly class="p-8 text-slate-200 bg-slate-900" id="output" name="output">

  • onclick="evaluatePython()" type="button" class="mx-2 my-4 h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-green-700 hover:bg-green-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-700 text-slate-300">Run

  • onclick="clearHistory()" type="button" class="mx-2 my-4 h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-red-700 hover:bg-red-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-700 text-slate-300">Clear History

    • 在 index.html文件的头部，我们导入了用于格式化的Tailwind CSS，Pyodide.js 0.20.0，以及CodeMirror及其依赖包。

    UI有三个重要的组成部分：

    1、Editor。用户可以在这里写Python代码。它是一个文本区域的HTML元素，其ID为代码。当我们初始化codemirror时，我们让它知道我们想用这个元素作为一个代码编辑器。

    2、Output。显示代码输出的地方。它是一个id为output的textarea元素。当Pyodide执行Python代码时，它将把结果输出到这个元素。我们也在这个元素中显示一个错误信息。

    3、Run button。当用户点击这个按钮时，我们抓取编辑器元素的值并将其作为一个字符串传递给 pyodide.runPython。当 pyodide.runPython返回结果时，我们在输出元素中显示它。

    现在在项目的根部，创建 static/js文件夹。然后，在 js文件夹下，创建一个名为 main.js的新文件。

    static/js/main.js：

    1. // find the output element
    2. const output = document.getElementById("output");

    4. // initialize codemirror and pass configuration to support Python and the dracula theme
    5. const editor = CodeMirror.fromTextArea(
    6.   document.getElementById("code"), {
    7.     mode: {
    8.       name: "python",
    9.       version: 3,
    10.       singleLineStringErrors: false,
    11.     },
    12.     theme: "dracula",
    13.     lineNumbers: true,
    14.     indentUnit: 4,
    15.     matchBrackets: true,
    16.   }
    17. );
    18. // set the initial value of the editor
    19. editor.setValue("print('Hello world')");
    20. output.value = "Initializing...\n";

    22. // add pyodide returned value to the output
    23. function addToOutput(stdout) {
    24.   output.value += ">>> " + "\n" + stdout + "\n";
    25. }

    27. // clean the output section
    28. function clearHistory() {
    29.   output.value = "";
    30. }

    32. // init pyodide and show sys.version when it's loaded successfully
    33. async function main() {
    34.   let pyodide = await loadPyodide({
    35.     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/",
    36.   });
    37.   output.value = pyodide.runPython(`
    38.     import sys
    39.     sys.version
    40.   `);
    41.   output.value += "\n" + "Python Ready !" + "\n";
    42.   return pyodide;
    43. }

    45. // run the main function
    46. let pyodideReadyPromise = main();

    48. // pass the editor value to the pyodide.runPython function and show the result in the output section
    49. async function evaluatePython() {
    50.   let pyodide = await pyodideReadyPromise;
    51.   try {
    52.     pyodide.runPython(`
    53.       import io
    54.       sys.stdout = io.StringIO()
    55.     `);
    56.     let result = pyodide.runPython(editor.getValue());
    57.     let stdout = pyodide.runPython("sys.stdout.getvalue()");
    58.     addToOutput(stdout);
    59.   } catch (err) {
    60.     addToOutput(err);
    61.   }
    62. }

    我们完成了以下步骤：

    1、初始化CodeMirror，支持Python和Dracula主题。

    2、初始化Pyodide。

    3、添加了一个名为 evaluatePython的函数，当用户点击运行按钮时执行。它将代码元素的值传递给 pyodide.runPython，并通过 addToOutput 在输出元素中显示结果。

    4、增加了一个叫 clearHistory的函数，当用户点击 ClearHistory按钮时，它将清除输出元素。

    要在本地运行Flask开发服务器，请运行：

    1. (env)$ flask run

    现在服务器应该在5000端口运行。在你的浏览器中导航到 http://127.0.0.1:5000，测试一下代码编辑器。

    总结

    在本教程中，主要讲解了如何使用WebAssembly在浏览器中运行Python代码，但一般来说，WebAssembly涵盖了更广泛的使用情况。

    我们的部署平台比以往任何时候都更加多样化。WebAssembly可以影响客户端Web开发、服务器端开发、游戏、教育、云计算、移动平台、loT、serverless等方面。

    本文完整源代码请扫描下方二维码加入会员后获取

    - 点击下方阅读原文加入社区会员 -


    浏览 35
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报
    评论
    图片
    表情
    推荐
    Krustlet在 Kubernetes 上运行 WebAssembly
    Krustlet是在Kubernetes上运行WebAssembly工作负载的工具。它就像Kubernetes集群中的节点一样。Krustlet通过在事件流上侦听调度程序根据特定的Kubernetes
    Krustlet在 Kubernetes 上运行 WebAssembly
    Krustlet 是在 Kubernetes 上运行 WebAssembly 工作负载的工具。它就像
    Wasm 玩出花？在浏览器中运行虚拟机！
    前端宇宙
    0
    Wasmer-JS在浏览器和 Node.js 中运行 Wasi
    Wasmer-JS允许开发人员在Node和浏览器中运行Wasi模块。Wasmer-JS构建在现有解决方案之上，这允许开发人员在JavaScript环境中运行Wasi。Wasmer-JS是一个由四个包组
    Wasmer-JS在浏览器和 Node.js 中运行 Wasi
    Wasmer-JS 允许开发人员在 Node 和浏览器中运行 Wasi 模块。Wasmer-JS 构
    PyScript 来了！终于可以在浏览器运行 Python 应用
    Python 知识大全
    0
    PyScript 来了！终于可以在浏览器运行 Python 应用
    Python学习与数据挖掘
    0
    PyScript 来了!终于可以在浏览器运行 Python 应用
    FightingCoder
    0
    PyScript 来了！终于可以在浏览器运行 Python 应用
    简说Python
    0
    Scala.js在浏览器上运行 Scala
    Scala.js是一个将Scala语言编译成JavaScript的工具，可以让你直接在浏览器上使用Scala编写程序。示例代码：def sayHelloWithDOMInput(name: Strin
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报