Webアセンブリを使用したブラウザでのPythonの実行

ポストRunning Python in the Browser with Web Assemblyは、Qvaultに最初に現れました.
私たちはQvault’s course curriculumを展開したかったです、そして、最も要求されたプログラミング言語のうちの1つはPythonでした.我々のコースが学生にウェブブラウザでコード権利を書いて、実行するのを許すので、我々は、Pythonインタプリタがウェブアセンブリを使用しているブラウザーで動くのを許す既存のプロジェクトを調べることに決めました.私たちはPyodideというツールに定住しました.
アクションでそれを見るために、finished product, a Python playgroundをチェックしてください.

Pyodideとは

Pyodideは、WebアセンブリにコンパイルされたPythonインタプリタを含むオープンソースプロジェクトです.

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

webassembly.org

言い換えると、通常、JavaScriptだけがブラウザで実行できますが、ソースコードをWASMにコンパイルすることができれば、ブラウザで任意のプログラミング言語を実行できます.(書いている時点で、私たちはPython、錆を走らせ、私たちのplaygroundに、そして私たちのcoursesにこのように行きます)

Pyodide brings the Python 3.8 runtime to the browser via WebAssembly, along with the Python scientific stack including NumPy, Pandas, Matplotlib, parts of SciPy, and NetworkX. The packages directory lists over 35 packages which are currently available.

Github Project

どうやってやったの？

Pythonの実行プランは、ブラウザでコードを実行する方法とよく似ています.基本的に3つのステップがあります.

コードが実行される方法を定義するワーカーファイルを

に書きます

は、労働者

のスピニング、通信、および終了の詳細を説明するワーカーヘルパーを書きます

ユーザーがコードを実行し、コードの出力

を参照できるように、ヘルパーをビューに実装します
どのようにすべての作品を読んでください知っている場合は
Webワーカーズの最初の記事を終えたら、PythonとGoのロジックの違いを理解する必要があるのは、ワーカーファイル自体です.

// pull down pyodide from the public CDN
importScripts('https://pyodide-cdn2.iodide.io/v0.15.0/full/pyodide.js');

addEventListener('message', async (e) => {
  // wait for the interpreter to be fully loaded
  await languagePluginLoader;

  self.runPythonWithStdout = () => {
    try {
      // execute the code passed to the worker
      pyodide.runPython(e.data);
    } catch (err){
      postMessage({
        error: err
      });
      return;
    }

    // capture the code's standard output
    // and send it back to the main thread
    let stdout = pyodide.runPython("sys.stdout.getvalue()")
    if (stdout) {
      stdout = stdout.split('\n')
      for (line of stdout){
        postMessage({
          message: line
        });
      }
    }
  }

  // redirect stdout to io.StringIO so that we can get it later
  pyodide.runPython(`
    import io, code, sys
    from js import runPythonWithStdout
    sys.stdout = io.StringIO()
    sys.stderr = io.StringIO()
    ## This runs self.runPythonWithStdout defined in the JS
    runPythonWithStdout()
  `)

  postMessage({
    done: true
  });
}, false);

ご覧の通り、我々のユースケースの唯一の特に挑戦的な部分は、コードの標準的な出力を適切に捕えるために接着剤を加えることでした.

進行中の前のGOのウェブ労働者とWASMに関するこの記事。 読書ありがとう！

あなたがどんな質問またはコメントをするならば、さえずりの上で我々について来てください
いくつかの
より多くのプログラミング記事のための我々の会報へのcoding courses on our new platform