使用 WordPress Playground 和 WebAssembly 建構瀏覽器中的 WordPress 體驗

完整採用 PHP 技術的 WordPress，不過完全只用 WebAssembly 在瀏覽器中執行

Adam Zieliński
Adam Zieliński
X GitHub 首頁
Thomas Nattestad
Thomas Nattestad
X

第一次看到 WordPress Playground 時 比方說，除了彩色背景外，隨時隨地 不過，實際上呈現的是整個 WordPress 技術堆疊 包括 PHP 和資料庫，可直接在瀏覽器中執行。

這篇文章中，《Adam Zielinnski》(WordPress Playground 負責人) 和 Thomas Nattestad (V8 產品經理) 探索：

  • WordPress Playground 對 WordPress 開發人員可以提供哪些幫助。
  • 詳細運作原理。
  • 對 WordPress 的未來有何影響。

不必安裝就能使用 WordPress、將 WordPress 嵌入您的應用程式，甚至利用 JavaScript 控制

您可以使用及自訂內嵌於以下網址的 WordPress playground.wordpress.net。還有 不提供付費的雲端基礎架構和支援服務，因為該網站的運作原理 其他人都無法存取。但又是暫時性的。 重新整理網頁就會消失您想透過這個聯播網 以及試用外掛程式，以及快速探索各種構想。

您甚至可以使用 或 WordPress 版本切換器：

phpinfo 頁面。

WordPress Playground 是全新的 WordPress 使用方式，電力滿載 不過，只有在您的應用程式中加入該 API 才能解鎖。方法很簡單 位於 <iframe> 中的 WordPress Playground，並使用 「查詢參數 API」。 這就是官方展示 確實如此假設您選取了 吊飾主題和 Coblocks 外掛程式、嵌入式 iframe 已更新為： https://playground.wordpress.net/?theme=pendant&amp;plugin=coblocks.

WordPress Playground 的展示畫面。

iframe 是最簡單的入門方式，但它也只適用於 基本設定選項如果您需要更多 以及功能強大的 API

WordPress Playground JavaScript 用戶端可完全控制嵌入的網站

您可以控制整個 WordPress 網站，包括檔案系統和 PHP 您可以透過 @wp-playground/client npm 套件。下列範例顯示瞭如何使用此功能：check 互動式教學課程 ，使用更多範例

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

即使沒有 WordPress，也能使用 WebAssembly PHP

WordPress Playground 並非單體。WebAssembly PHP 發布 而且可以單獨使用。針對網路 您可以使用 @php-wasm/web npm 針對低套裝組合大小完成最佳化的套件。在 Node.js 中，您可以 位於 @php-wasm/node，並提供 更多 PHP 擴充功能Adam 使用前者來新增互動式 PHP 程式碼片段 本WP_HTML_Tag_Processor 教學課程。 以下先概略介紹使用方式：

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

但在此之前，你必須思考：這個方法怎麼辦？好問題！ 接著來深入瞭解內部細節吧！請繫好安全帶！

技術背景中有 WebAssembly PHP、SQL 轉譯器和瀏覽器內伺服器

PHP 以 WebAssembly 二進位檔的形式執行

PHP 不能直接在瀏覽器中運作，WordPress 遊樂場 制定了 專屬管道 提供給 WebAssembly 的 PHP 解譯器 使用 Emscripten。 建構香草 PHP 不會太過複雜，只要 調整函式簽章 強制執行設定變數 並套用 介紹幾個小小修補程式 您可以按照以下方式自行建構應用程式：

git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2

不過，基本 PHP 版本對於瀏覽器來說並不實用。做為伺服器 軟體，PHP 沒有 JavaScript API，無法傳送要求主體 檔案，或填入 php://stdin 資料流。因此必須透過 WordPress Playground 從頭開始介紹WebAssembly 二進位檔隨附 專屬的 PHP API 模組 以 C 語言寫成 會呼叫的 JavaScript PHP 類別 會公開 writeFile() 或 run() 等方法。

因為每個 PHP 版本都只是靜態的 .wasm 檔案，所以 PHP 版本 其實就太無聊了只會指示瀏覽器下載 例如：php_7_3.wasm，而非 php_8_2.wasm。

SQL 翻譯層支援資料庫

WordPress 需要使用 MySQL。但沒有 WebAssembly 版本的 MySQL 可以在瀏覽器中運作因此，WordPress Playground 會搭配 原生 SQLite 驅動程式和 採用 SQLite 基礎模型

但 WordPress 該如何在其他資料庫上執行？

官方幕後花絮 SQLite 資料庫整合 外掛程式會攔截所有 MySQL 查詢，並以 SQLite 方言重新寫入。2.0 飛船 支援以 WordPress Playground 呈現的全新翻譯層 ，可讓 SQLite 上的 WordPress 傳遞 99% 的 WordPress 單元測試套件。

網路伺服器位於瀏覽器內

在一般 WordPress 中，點選連結 (指出「網誌」) 會啟動 HTTP 向遠端後端發出要求，以擷取 blog 網頁。不過，WordPress Playground 沒有遠端後端。這個平台提供 Service Worker 攔截所有傳出要求，並將這些要求傳遞至瀏覽器中的 PHP 執行個體 Web Worker。

此流程圖以一個 iframe 指向資源 wp-admin，接著由 Service Worker 攔截的呼叫，在背景工作執行緒中轉譯，最後由瀏覽器內伺服器轉譯為 WordPress 回應。

網路可透過 WebSockets 支援網路

在網路方面，WebAssembly 程式只能在 JavaScript API。這是安全功能，但附帶挑戰。如何 支援 PHP 使用的低階同步網路程式碼，搭配 JavaScript 提供的高階非同步 API？

在 WordPress Playground 中，答案涉及透過 WebSocket 轉向 TCP 通訊端 Proxy。 非同步，然後修補深層 PHP 內部元件，例如 php_select。這些複雜性雖然複雜，但卻有獎勵。 以 Node.js 為目標的 PHP 版本可以要求網路 API、安裝 Composer 套件，並 甚至連線至 MySQL 伺服器

在比瀏覽器更多的地方使用 WordPress

由於 WordPress 現在可以在 WebAssembly 上執行，因此您也可以使用 Node.js 因為它與 V8 引擎相同！當然，您也可以用 StackBlitz 直接在瀏覽器中執行 Node.js，代表您可以執行 WordPress 和 PHP 編譯成 WebAssembly，以 Node.js 執行，後者也編譯為 WebAssembly 執行中 在瀏覽器中。 WebAssembly 服務也在無伺服器領域日益受歡迎， 日後也可以在該基礎架構上執行

未來可能會推出零設定、互動式協作和協作式 WordPress 應用程式

想像一下直接進入程式碼編輯器 所有設定都已完成您甚至可以 簡易連結，即可開始多人遊戲編輯工作階段，例如在 Google 文件中。且 完成後，只要輕鬆按一下就能順利部署 對各種代管服務建立樣式 — 而且完全不需要安裝 本機！

這只是一小部分！我們可能會觀看互動式教學課程、即時外掛程式示範、 暫存網站、在邊緣伺服器中去中心化 WordPress， 外掛程式

未來發展令人期待，成為我們的一份子！你的想法和貢獻 是 WordPress Playground 的氧氣。前往 GitHub 存放區 #meta-playground 中的「嗨」 WordPress.org Slack 頻道， 歡迎來信至 adam@adamziel.com 與 Adam 聯絡。