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

// 浏览器中直接执行
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 示例
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
$window = new Vrzno;
$document = $window->document;

// 获取元素
$element = $document->getElementById('app');
$element->innerHTML = '<h1>Hello from PHP!</h1>';

// 创建元素
$newDiv = $document->createElement('div');
$newDiv->className = 'container';
$element->appendChild($newDiv);

#### 2. 调用 JavaScript API

<?php
$window = new Vrzno;

// 使用 fetch
$response = vrzno_await($window->fetch('https://api.example.com/data'));
$json = vrzno_await($response->json());

// 使用 Promise
$Promise = $window->Promise;
$p = new $Promise(function($resolve, $reject) use ($window) {
    $window->setTimeout(fn() => $resolve('Done!'), 1000);
});
$p->then(var_dump(...));

#### 3. 导入 JavaScript 库

<?php
// 动态导入 JS 库
$plot = vrzno_import('https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm');

三、PHP-GTK：桌面应用方案

GitHub: https://github.com/seanmorris/php-gtk

通过 php-wasm + Vrzno + node-gtk，可以用 PHP 编写桌面 GUI 应用：

<?php
$Gtk = vrzno_env('Gtk');
$window = new $Gtk\Window();
$window->setTitle('PHP Desktop App');
$window->setDefaultSize(400, 300);

$button = new $Gtk\Button('Click Me');
$button->connect('clicked', function() {
    echo "Button clicked!\n";
});

$window->add($button);
$window->showAll();
$Gtk->main();

四、实际应用案例

五、WebUI 方案现状

当前状况

可行的 WebUI 方案

#### 方案 1：直接使用 JavaScript UI 框架 通过 Vrzno 在 PHP 中调用 Vue/React/Angular：

<?php
$window = new Vrzno;

// 创建 Vue 应用
$Vue = $window->Vue;
$app = $Vue->createApp([
    'data' => fn() => ['message' => 'Hello from PHP!'],
    'template' => '<div>{{ message }}</div>'
]);
$app->mount('#app');

#### 方案 2：封装 PHP UI 组件类 基于 Vrzno 封装自己的组件库：

<?php
abstract class Component {
    protected $window;
    protected $element;
    
    public function __construct() {
        $this->window = new Vrzno;
        $this->element = $this->createElement();
    }
    
    abstract protected function createElement();
    abstract public function render();
}

class Button extends Component {
    private $text;
    private $onClick;
    
    public function __construct($text) {
        $this->text = $text;
        parent::__construct();
    }
    
    protected function createElement() {
        $btn = $this->window->document->createElement('button');
        $btn->textContent = $this->text;
        $btn->className = 'php-btn';
        return $btn;
    }
    
    public function onClick($callback) {
        $this->element->addEventListener('click', $callback);
        return $this;
    }
    
    public function render($parentId) {
        $parent = $this->window->document->getElementById($parentId);
        $parent->appendChild($this->element);
    }
}

// 使用
$btn = new Button('Click Me');
$btn->onClick(fn() => $window->alert('Clicked!'))
    ->render('app');

#### 方案 3：服务器/客户端同构 PHP 同一套 PHP 代码既可以在服务器运行，也可以在浏览器运行：

<?php
// 检测运行环境
if (class_exists('Vrzno')) {
    // 浏览器环境：直接操作 DOM
    $window = new Vrzno;
    $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