PHP WASM 生态综述：在浏览器中运行 PHP 的现状与 WebUI 方案

前言

WebAssembly (WASM) 技术的成熟让 PHP 突破了服务端的限制，正式进入浏览器环境。本文综述 PHP WASM 的核心项目、实际应用案例，以及当前可用的 WebUI 方案。

一、核心项目：php-wasm

GitHub: https://github.com/seanmorris/php-wasm
官网: https://php-wasm.seanmorr.is/

由 Sean Morris 开发的 php-wasm 是目前最成熟的 PHP WASM 实现，提供两个主要包：

1. php-wasm

直接在浏览器中运行 PHP 代码，支持 PHP 8.0-8.4 多个版本。

// 浏览器中直接执行
const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;
await php.run(`<?php echo "Hello from PHP in Browser!";`);

2. php-cgi-wasm

在 Service Worker 中模拟 Apache/nginx 的 CGI 模式，可以拦截 HTTP 请求，完整运行 PHP 网站。

// Service Worker 示例
import { PhpCgiWorker } from "php-cgi-wasm/PhpCgiWorker";

const php = new PhpCgiWorker({
    prefix: '/php-wasm',
    docroot: '/persist/www',
});

self.addEventListener('fetch', event => php.handleFetchEvent(event));

二、Vrzno：PHP 与 JavaScript 的桥梁

Vrzno 是专为 php-wasm 开发的 PHP 扩展，让 PHP 可以无缝调用 JavaScript API。

核心功能

1. 操作 DOM

<?php
{{LATEX:0}}document = {{LATEX:1}}element = {{LATEX:2}}element->innerHTML = '<h1>Hello from PHP!</h1>';

// 创建元素
{{LATEX:3}}document->createElement('div');
{{LATEX:4}}element->appendChild({{LATEX:5}}window = new Vrzno;

// 使用 fetch
{{LATEX:6}}window->fetch('https://api.example.com/data'));
{{LATEX:7}}response->json());

// 使用 Promise
{{LATEX:8}}window->Promise;
{{LATEX:9}}Promise(function({{LATEX:10}}reject) use ({{LATEX:11}}window->setTimeout(fn() => {{LATEX:12}}p->then(var_dump(...));

3. 导入 JavaScript 库

<?php
// 动态导入 JS 库
{{LATEX:13}}Gtk = vrzno_env('Gtk');
{{LATEX:14}}Gtk\Window();
{{LATEX:15}}window->setDefaultSize(400, 300);

{{LATEX:16}}Gtk\Button('Click Me');
{{LATEX:17}}window->add({{LATEX:18}}window->showAll();
{{LATEX:19}}window = new Vrzno;

// 创建 Vue 应用
{{LATEX:20}}window->Vue;
{{LATEX:21}}Vue->createApp([
    'data' => fn() => ['message' => 'Hello from PHP!'],
    'template' => '<div>{{ message }}</div>'
]);
{{LATEX:22}}window;
    protected {{LATEX:23}}this->window = new Vrzno;
        {{LATEX:24}}this->createElement();
    }
    
    abstract protected function createElement();
    abstract public function render();
}

class Button extends Component {
    private {{LATEX:25}}onClick;
    
    public function __construct({{LATEX:26}}this->text = {{LATEX:27}}btn = {{LATEX:28}}btn->textContent = {{LATEX:29}}btn->className = 'php-btn';
        return {{LATEX:30}}callback) {
        {{LATEX:31}}callback);
        return {{LATEX:32}}parentId) {
        {{LATEX:33}}this->window->document->getElementById({{LATEX:34}}parent->appendChild({{LATEX:35}}btn = new Button('Click Me');
{{LATEX:36}}window->alert('Clicked!'))
    ->render('app');

方案 3：服务器/客户端同构 PHP

同一套 PHP 代码既可以在服务器运行，也可以在浏览器运行：

<?php
// 检测运行环境
if (class_exists('Vrzno')) {
    // 浏览器环境：直接操作 DOM
    {{LATEX:37}}window->document->write('<h1>Client Side</h1>');
} else {
    // 服务器环境：输出 HTML
    echo '<h1>Server Side</h1>';
}

六、技术限制与挑战

1. 性能: WASM 相比原生 JavaScript 有一定开销
2. 包体积: PHP WASM 运行时约 5-10MB
3. 调试: 浏览器中调试 PHP 体验不如服务端成熟
4. 生态: 缺乏专门的 UI 组件库和框架

七、未来展望

随着 PHP WASM 的发展，可能出现：

• PHP 原生 Web 组件框架：类似 React/Vue 的声明式 UI 框架
• 同构 PHP 框架：一套代码运行在服务器和客户端
• PHP 桌面应用生态：基于 WASM 的跨平台 GUI 方案
• 边缘计算: PHP 运行在 Cloudflare Workers 等边缘环境

八、相关资源

• php-wasm: https://github.com/seanmorris/php-wasm
• Vrzno 文档: https://php-wasm.seanmorr.is/extensions/vrzno.html
• WordPress Playground: https://wordpress.github.io/wordpress-playground/
• LiveCodes: https://livecodes.io
• Chrome DevTools Protocol PHP: https://github.com/jakubkulhan/chrome-devtools-protocol

总结

PHP WASM 已经具备了在浏览器中运行的完整能力，通过 Vrzno 扩展可以操作 DOM、调用 JavaScript API。虽然目前还没有成熟的 PHP WebUI 组件库，但开发者可以：

1. 使用 Vrzno 直接操作 DOM
2. 调用现有的 JavaScript UI 框架
3. 自己封装 PHP 组件类

对于想要尝试 PHP 前端开发的开发者，建议从 php-wasm + Vrzno 开始探索！

参考文章:

• https://developer.wordpress.org/news/2023/08/exploring-the-future-of-web-development-with-webassembly-and-php/
• https://wasmlabs.dev/articles/compiling-php-to-webassembly/
• https://web.dev/articles/wordpress-playground