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

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

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

当您第一次看到 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 版本切换器：

phpinfo 页面。

WordPress Playground 是一种全新的 WordPress 使用方式。它的能量满满， 但只有将其加入您的应用中才能解锁。最简单的方法就是 <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 软件包。下例展示了如何使用 - 请查看 互动式教程 查看更多示例：

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。

流程图从指向资源 wp-admin 的 iframe 开始，Service Worker 拦截这些调用，在 Worker 线程中呈现，并最终由浏览器内的服务器转换为 WordPress 响应。

通过 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 联系，电子邮件地址为 adam@adamziel.com。