WebAssembly を使用してブラウザで Python を実行する
长期以来，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文件。
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
<script>
async function main() {
let pyodide = await loadPyodide({
indexURL : "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/"
});
console.log(pyodide.runPython("print('Hello, world from the browser!')"));
};
main();
</script>
</head>
在你的浏览器中打开该文件。然后，在你的浏览器的开发者工具控制台中，你应该做如下事情：
Loading distutils Loading distutils from https://cdn.jsdelivr.net/pyodide/v0.20.0/full/distutils.js Loaded distutils Python initialization complete 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://www.php.cn/link/3dcf44c3136a27a28b3bb27586fd5fc5
可以看一下其中的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
创建一个新的项目。
$ mkdir python_editor_wasm $ cd python_editor_wasm
创建并激活一个虚拟环境。
$ python3.10 -m venv env $ source env/bin/activate (env)$
安装Flask：
(env)$ pip install Flask
在项目的根部创建一个名为app.py的文件并添加以下代码。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
在我们项目的根部创建一个 "templates "文件夹，并在其下添加index.html文件。
templates/index.html:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- install tailwindcss from cdn, don't do this for production application -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- install pyodide version 0.20.0 -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
<!-- import codemirror stylings -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<!-- install codemirror.js version /5.63.3 from cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/codemirror.min.js"
integrity="sha512-XMlgZzPyVXf1I/wbGnofk1Hfdx+zAWyZjh6c21yGo/k1zNC4Ve6xcQnTDTCHrjFGsOrVicJsBURLYktVEu/8vQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- install codemirror python language support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/mode/python/python.min.js"
integrity="sha512-/mavDpedrvPG/0Grj2Ughxte/fsm42ZmZWWpHz1jCbzd5ECv8CB7PomGtw0NAnhHmE/lkDFkRMupjoohbKNA1Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- import codemirror dracula theme styles from cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/theme/dracula.css"/>
<style>
/* set codemirror ide height to 100% of the textarea */
.CodeMirror {
height: 100%;
}
</style>
</head>
<body >
<p >Run Python in your browser</p>
<!-- our code editor, where codemirror renders it's editor -->
<textarea name="code" ></textarea>
<!-- output section where we show the stdout of the python code execution -->
<textarea readonly name="output"></textarea>
<!-- run button to pass the code to pyodide.runPython() -->
<button onclick="evaluatePython()" type="button" >Run</button>
<!-- clean the output section -->
<button onclick="clearHistory()" type="button" >Clear History</button>
<script src="/static/js/main.js"></script>
</body>
</html>
在 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：
我们完成了以下步骤：
// find the output element
const output = document.getElementById("output");
// initialize codemirror and pass configuration to support Python and the dracula theme
const editor = CodeMirror.fromTextArea(
document.getElementById("code"), {
mode: {
name: "python",
version: 3,
singleLineStringErrors: false,
},
theme: "dracula",
lineNumbers: true,
indentUnit: 4,
matchBrackets: true,
}
);
// set the initial value of the editor
editor.setValue("print('Hello world')");
output.value = "Initializing...n";
// add pyodide returned value to the output
function addToOutput(stdout) {
output.value += ">>> " + "n" + stdout + "n";
}
// clean the output section
function clearHistory() {
output.value = "";
}
// init pyodide and show sys.version when it's loaded successfully
async function main() {
let pyodide = await loadPyodide({
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/",
});
output.value = pyodide.runPython(`
import sys
sys.version
`);
output.value += "n" + "Python Ready !" + "n";
return pyodide;
}
// run the main function
let pyodideReadyPromise = main();
// pass the editor value to the pyodide.runPython function and show the result in the output section
async function evaluatePython() {
let pyodide = await pyodideReadyPromise;
try {
pyodide.runPython(`
import io
sys.stdout = io.StringIO()
`);
let result = pyodide.runPython(editor.getValue());
let stdout = pyodide.runPython("sys.stdout.getvalue()");
addToOutput(stdout);
} catch (err) {
addToOutput(err);
}
}
1、初始化CodeMirror，支持Python和Dracula主题。
2、初始化Pyodide。
3、添加了一个名为 evaluatePython的函数，当用户点击运行按钮时执行。它将代码元素的值传递给 pyodide.runPython，并通过 addToOutput 在输出元素中显示结果。
4、增加了一个叫 clearHistory的函数，当用户点击 ClearHistory按钮时，它将清除输出元素。
要在本地运行Flask开发服务器，请运行：
(env)$ flask run
现在服务器应该在5000端口运行。在你的浏览器中导航到 http://127.0.0.1:5000，测试一下代码编辑器。
总结
在本教程中，主要讲解了如何使用WebAssembly在浏览器中运行Python代码，但一般来说，WebAssembly涵盖了更广泛的使用情况。
我们的部署平台比以往任何时候都更加多样化。WebAssembly可以影响客户端Web开发、服务器端开发、游戏、教育、云计算、移动平台、loT、serverless等方面。
以上がWebAssembly を使用してブラウザで Python を実行するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7469
15
1376
52
77
11
19
29
mysqlは支払う必要がありますか
Apr 08, 2025 pm 05:36 PM
MySQLには、無料のコミュニティバージョンと有料エンタープライズバージョンがあります。コミュニティバージョンは無料で使用および変更できますが、サポートは制限されており、安定性要件が低く、技術的な能力が強いアプリケーションに適しています。 Enterprise Editionは、安定した信頼性の高い高性能データベースを必要とするアプリケーションに対する包括的な商業サポートを提供し、サポートの支払いを喜んでいます。バージョンを選択する際に考慮される要因には、アプリケーションの重要性、予算編成、技術スキルが含まれます。完璧なオプションはなく、最も適切なオプションのみであり、特定の状況に応じて慎重に選択する必要があります。
インストール後にMySQLの使用方法
Apr 08, 2025 am 11:48 AM
この記事では、MySQLデータベースの操作を紹介します。まず、MySQLWorkBenchやコマンドラインクライアントなど、MySQLクライアントをインストールする必要があります。 1. mysql-uroot-pコマンドを使用してサーバーに接続し、ルートアカウントパスワードでログインします。 2。CreatedAtaBaseを使用してデータベースを作成し、データベースを選択します。 3. createTableを使用してテーブルを作成し、フィールドとデータ型を定義します。 4. INSERTINTOを使用してデータを挿入し、データをクエリし、更新することでデータを更新し、削除してデータを削除します。これらの手順を習得することによってのみ、一般的な問題に対処することを学び、データベースのパフォーマンスを最適化することでMySQLを効率的に使用できます。
MySQLダウンロードファイルが破損しており、インストールできません。修復ソリューション
Apr 08, 2025 am 11:21 AM
mysqlダウンロードファイルは破損していますが、どうすればよいですか？残念ながら、MySQLをダウンロードすると、ファイルの破損に遭遇できます。最近は本当に簡単ではありません！この記事では、誰もが迂回を避けることができるように、この問題を解決する方法について説明します。それを読んだ後、損傷したMySQLインストールパッケージを修復するだけでなく、将来の行き詰まりを避けるために、ダウンロードとインストールプロセスをより深く理解することもできます。最初に、ファイルのダウンロードが破損した理由について話しましょう。これには多くの理由があります。ネットワークの問題は犯人です。ダウンロードプロセスの中断とネットワーク内の不安定性は、ファイル腐敗につながる可能性があります。ダウンロードソース自体にも問題があります。サーバーファイル自体が壊れており、もちろんダウンロードすると壊れています。さらに、いくつかのウイルス対策ソフトウェアの過度の「情熱的な」スキャンもファイルの破損を引き起こす可能性があります。診断問題：ファイルが本当に破損しているかどうかを判断します
MySQLはダウンロード後にインストールできません
Apr 08, 2025 am 11:24 AM
MySQLのインストール障害の主な理由は次のとおりです。1。許可の問題、管理者として実行するか、SUDOコマンドを使用する必要があります。 2。依存関係が欠落しており、関連する開発パッケージをインストールする必要があります。 3.ポート競合では、ポート3306を占めるプログラムを閉じるか、構成ファイルを変更する必要があります。 4.インストールパッケージが破損しているため、整合性をダウンロードして検証する必要があります。 5.環境変数は誤って構成されており、環境変数はオペレーティングシステムに従って正しく構成する必要があります。これらの問題を解決し、各ステップを慎重に確認して、MySQLを正常にインストールします。
MySQLインストール後に開始できないサービスのソリューション
Apr 08, 2025 am 11:18 AM
MySQLは開始を拒否しましたか？パニックにならないでください、チェックしてみましょう！多くの友人は、MySQLのインストール後にサービスを開始できないことを発見し、彼らはとても不安でした！心配しないでください、この記事はあなたがそれを落ち着いて対処し、その背後にある首謀者を見つけるためにあなたを連れて行きます！それを読んだ後、あなたはこの問題を解決するだけでなく、MySQLサービスの理解と問題のトラブルシューティングのためのあなたのアイデアを改善し、より強力なデータベース管理者になることができます！ MySQLサービスは開始に失敗し、単純な構成エラーから複雑なシステムの問題に至るまで、多くの理由があります。最も一般的な側面から始めましょう。基本知識：サービススタートアッププロセスMYSQLサービススタートアップの簡単な説明。簡単に言えば、オペレーティングシステムはMySQL関連のファイルをロードし、MySQLデーモンを起動します。これには構成が含まれます
高負荷アプリケーションのMySQLパフォーマンスを最適化する方法は？
Apr 08, 2025 pm 06:03 PM
MySQLデータベースパフォーマンス最適化ガイドリソース集約型アプリケーションでは、MySQLデータベースが重要な役割を果たし、大規模なトランザクションの管理を担当しています。ただし、アプリケーションのスケールが拡大すると、データベースパフォーマンスのボトルネックが制約になることがよくあります。この記事では、一連の効果的なMySQLパフォーマンス最適化戦略を検討して、アプリケーションが高負荷の下で効率的で応答性の高いままであることを保証します。実際のケースを組み合わせて、インデックス作成、クエリ最適化、データベース設計、キャッシュなどの詳細な主要なテクノロジーを説明します。 1.データベースアーキテクチャの設計と最適化されたデータベースアーキテクチャは、MySQLパフォーマンスの最適化の基礎です。いくつかのコア原則は次のとおりです。適切なデータ型を選択し、ニーズを満たす最小のデータ型を選択すると、ストレージスペースを節約するだけでなく、データ処理速度を向上させることもできます。
MySQLインストール後にデータベースのパフォーマンスを最適化する方法
Apr 08, 2025 am 11:36 AM
MySQLパフォーマンスの最適化は、インストール構成、インデックス作成、クエリの最適化、監視、チューニングの3つの側面から開始する必要があります。 1。インストール後、INNODB_BUFFER_POOL_SIZEパラメーターやclose query_cache_sizeなど、サーバーの構成に従ってmy.cnfファイルを調整する必要があります。 2。過度のインデックスを回避するための適切なインデックスを作成し、説明コマンドを使用して実行計画を分析するなど、クエリステートメントを最適化します。 3. MySQL独自の監視ツール（ShowProcessList、ShowStatus）を使用して、データベースの健康を監視し、定期的にデータベースをバックアップして整理します。これらの手順を継続的に最適化することによってのみ、MySQLデータベースのパフォーマンスを改善できます。
mysqlはインターネットが必要ですか？
Apr 08, 2025 pm 02:18 PM
MySQLは、基本的なデータストレージと管理のためにネットワーク接続なしで実行できます。ただし、他のシステムとのやり取り、リモートアクセス、または複製やクラスタリングなどの高度な機能を使用するには、ネットワーク接続が必要です。さらに、セキュリティ対策（ファイアウォールなど）、パフォーマンスの最適化（適切なネットワーク接続を選択）、およびデータバックアップは、インターネットに接続するために重要です。
