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
$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();

---

四、实际应用案例

项目	描述	技术亮点
WordPress Playground	浏览器内运行完整 WordPress	PHP + SQLite WASM，支持插件安装
Drupal Playground	Drupal CMS 的 WASM 版本	完整 CMS 客户端运行
PlayWithLaravel	Laravel 框架浏览器版	支持 Composer 包管理
3v4l.org	在线 PHP 代码执行平台	多版本 PHP 对比执行
LiveCodes	多语言在线编辑器	支持 80+ 编程语言

---

五、WebUI 方案现状

当前状况

PHP WASM 生态仍处于早期阶段，暂时没有类似 React/Vue 的专门 PHP 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