使用 WordPress Playground 和 WebAssembly 打造浏览器内的 WordPress 体验

由 PHP 驱动的完整 WordPress 使用 WebAssembly 仅在浏览器中运行

Adam Zieliński

Thomas Nattestad

当您第一次看到 WordPress Playground 时， 也许只是色彩斑斓的背景而已。随便什么 但是。您实际看到的是整个 WordPress 技术栈 包括 PHP 和数据库，可直接在浏览器中运行。

在这篇博文中，WordPress Playground 主管 Adam Zieliński 和 Thomas Nattestad （V8 产品经理）探索：

• WordPress Playground 对 WordPress 开发者有何助益。
• 运作方式。
• 这对 WordPress 的未来意味着什么。

无需安装即可使用 WordPress，将其嵌入您的应用中，甚至可以使用 JavaScript 控制它

你可以使用和自定义 playground.wordpress.net。还有 不需要支付任何云基础架构和支持费用， 任何人都无法访问这个问题也是暂时性的。您 刷新网页就消失了。您可以根据需要在 Google 展示广告网络 原型设计、试用插件，以及快速探索各种创意。

您甚至可以使用 Vertex AI Workbench 内置的 PHP 和 WordPress 版本切换器：

WordPress Playground 是一种全新的 WordPress 使用方式。它的能量满满， 但只有将其加入您的应用中才能解锁。最简单的方法就是 <iframe> 中的 WordPress Playground，并使用 查询参数 API。 这就是官方展示 用途。例如，当您选择 吊坠主题和 Coblocks 插件，嵌入式 iframe 更新为指向 https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

iframe 是一种简单的入门方式，但它也仅限于 基本配置选项如果你需要的内容不止这些 功能强大的 API。

借助 WordPress Playground JavaScript 客户端，用户可以完全控制嵌入的网站

您可以控制整个 WordPress 网站，包括文件系统和 PHP、 使用通过 @wp-playground/client npm 软件包。下例展示了如何使用 - 请查看 互动式教程 查看更多示例：

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 独立于 WordPress，也可以单独使用。对于网站 您可以使用 @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 Playground 开发了 专用流水线 构建适用于 WebAssembly 的 PHP 解释器 Emscripten。 构建 vanilla 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 没有用于传递请求正文、上传 文件，或填充 php://stdin 流。WordPress Playground 必须构建 从头开始WebAssembly 二进制文件带有 专用 PHP API 模块 用 C 和 a JavaScript PHP 类 公开了 writeFile() 或 run() 等方法。

由于每个 PHP 版本都只是一个静态 .wasm 文件，因此 切换器真的很无聊它只是告知浏览器进行下载 php_7_3.wasm，而不是 php_8_2.wasm。

SQL 转换层支持数据库

WordPress 需要 MySQL。不过，MySQL 没有 WebAssembly 版本 可以在浏览器中运行因此，WordPress Playground 原生 SQLite 驱动程序以及 依赖 SQLite。

但是，WordPress 如何在不同的数据库上运行呢？

幕后，官方 SQLite 数据库集成 插件会拦截所有 MySQL 查询并以 SQLite 方言重写它们。2.0 版 发布飞船 基于 WordPress Playground 的全新翻译层 让 SQLite 上的 WordPress 能够通过 WordPress 单元测试套件的 99% 测试。

Web 服务器位于浏览器内

在常规的 WordPress 中，点击链接（比如博客）会启动 HTTP 向远程后端发送以提取 blog 页面的请求。不过，WordPress Playground 没有远程后端。它具有 Service Worker 用于拦截所有传出请求并将其传递给浏览器内的 PHP 一个单独的实例中运行 Web Worker。

通过 WebSocket 支持网络

在网络方面，WebAssembly 程序仅限于调用 JavaScript API。这是一项安全功能，但同时也带来了挑战。如何 支持 PHP 通过 高级异步 API 是否可在 JavaScript 中使用？

对于 WordPress Playground，答案涉及 WebSocket 到 TCP 套接字代理， Asyncify 和深度修补 PHP 内部构件，例如 php_select。这很复杂，但有回报。通过 以 Node.js 为目标平台的 PHP build 可以请求 Web 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 联系，电子邮件地址为 [e-mail]。