WordPress hoàn toàn được hỗ trợ bởi PHP chỉ chạy trên trình duyệt với WebAssembly
Khi lần đầu xem WordPress Playground, có vẻ như đây là một trang web bình thường, có thể chỉ có nền đầy màu sắc. Không cần gì cả. Những gì bạn thực sự đang xem là toàn bộ ngăn xếp công nghệ WordPress, bao gồm PHP và một cơ sở dữ liệu, chạy trực tiếp trong trình duyệt của bạn.
Trong bài đăng này, Adam Zieliwithgoogleski (trưởng nhóm WordPress Playground) và Thomas Nattestad (Nhà quản lý sản phẩm cho V8) khám phá:
- Cách WordPress Playground có thể hỗ trợ bạn với tư cách là nhà phát triển WordPress.
- Tìm hiểu sâu về cách hoạt động.
- Ý nghĩa của điều này đối với tương lai của WordPress.
Sử dụng WordPress mà không cần cài đặt, nhúng WordPress vào ứng dụng của bạn và thậm chí kiểm soát WordPress bằng JavaScript
Bạn có thể sử dụng và tuỳ chỉnh WordPress được nhúng miễn phí tại playground.wordpress.net. Không có cơ sở hạ tầng đám mây và dịch vụ hỗ trợ trả phí, vì trang web đó chỉ nằm hoàn toàn trên trình duyệt của bạn – không ai khác có thể truy cập trang web đó. Đó cũng là giải pháp tạm thời. Ngay sau khi bạn làm mới trang, trang đó sẽ biến mất. Bạn có thể có bao nhiêu trang web trong số này tuỳ thích để tạo nguyên mẫu, dùng thử trình bổ trợ và nhanh chóng khám phá các ý tưởng.
Bạn thậm chí có thể sử dụng chúng để kiểm thử mã của mình trong nhiều môi trường bằng cách sử dụng trình chuyển đổi phiên bản PHP và WordPress tích hợp sẵn:
WordPress Playground là một cách sử dụng WordPress hoàn toàn mới. Tuy nhiên, bạn chỉ có thể mở khoá toàn bộ sức mạnh của WordPress bằng cách đưa vào ứng dụng. Cách dễ dàng là nhúng WordPress Playground vào <iframe> và định cấu hình WordPress bằng API tham số truy vấn.
Đó là mục đích của nội dung quảng bá chính thức. Ví dụ: khi bạn chọn Pendant theme (Giao diện mặt dây chuyền) và trình bổ trợ Coblocks, iframe nhúng sẽ được cập nhật để trỏ đến https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
Iframe là một cách dễ dàng để bắt đầu, nhưng nó cũng bị giới hạn chỉ ở tuỳ chọn cấu hình cơ bản. Nếu cần nhiều hơn thế, bạn có một API khác mạnh mẽ hơn.
Ứng dụng JavaScript của WordPress Playground cho phép toàn quyền kiểm soát trang web được nhúng
Bạn có thể kiểm soát toàn bộ trang web WordPress, bao gồm cả hệ thống tệp và PHP, bằng cách sử dụng API đầy đủ có sẵn thông qua gói npm @wp-playground/client. Hãy xem ví dụ sau để biết cách sử dụng đối tượng này. Hãy xem hướng dẫn mang tính tương tác để biết thêm ví dụ:
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);
Sử dụng WebAssembly PHP ngay cả khi không dùng WordPress
WordPress Playground không phải là một khối đá. WebAssembly PHP được phát hành độc lập với WordPress và bạn cũng có thể sử dụng nó một cách riêng biệt. Đối với web, bạn có thể sử dụng gói npm @php-wasm/web npm được tối ưu hoá cho kích thước gói thấp và trong Node.js, bạn có thể dựa vào @php-wasm/node cung cấp thêm tiện ích PHP. Adam đã sử dụng API này để thêm đoạn mã PHP tương tác vào hướng dẫn về WP_HTML_Tag_Processor này. Sau đây là phần giới thiệu sơ lược về cách sử dụng công cụ này:
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
Đến lúc này, bạn phải tự hỏi: làm thế nào để nó hoạt động? Câu hỏi rất hay! Hãy cùng tìm hiểu sâu hơn và tìm hiểu sâu hơn. Hãy khoá cài!
Trong trường hợp này, chúng ta có WebAssembly PHP, một trình biên dịch SQL và một máy chủ trong trình duyệt
PHP chạy dưới dạng tệp nhị phân WebAssembly
PHP không chỉ hoạt động ngay trong trình duyệt. WordPress Playground đã phát triển một quy trình chuyên dụng để tạo trình thông dịch PHP cho WebAssembly bằng cách sử dụng Emscripten. Việc tạo vanilla PHP không quá phức tạp – bạn chỉ cần điều chỉnh chữ ký hàm tại đây, buộc một biến cấu hình ở đó và áp dụng một vài bản vá nhỏ. Sau đây là cách bạn có thể tự tạo:
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
Tuy nhiên, các bản dựng vanilla PHP không thật hữu ích trong trình duyệt. Là phần mềm máy chủ, PHP không có API JavaScript để truyền nội dung yêu cầu, tải tệp lên hoặc điền vào luồng php://stdin. WordPress Playground phải xây dựng
một dự án từ đầu. Tệp nhị phân WebAssembly đi kèm với một mô-đun API PHP chuyên dụng được viết bằng C và một lớp JavaScript JavaScript hiển thị các phương thức như writeFile() hoặc run().
Vì mọi phiên bản PHP chỉ là một tệp .wasm tĩnh, nên trình chuyển đổi phiên bản PHP thực sự khá nhàm chán. Phương thức này chỉ yêu cầu trình duyệt tải xuống, chẳng hạn như php_7_3.wasm thay vì php_8_2.wasm.
Cơ sở dữ liệu được hỗ trợ nhờ lớp dịch SQL
WordPress yêu cầu MySQL. Tuy nhiên, bạn không thể chạy phiên bản WebAssembly của MySQL nào trong trình duyệt. Do đó, WordPress Playground sẽ phân phối PHP bằng trình điều khiển SQLite gốc và dựa vào SQLite.
Nhưng làm thế nào WordPress có thể chạy trên một cơ sở dữ liệu khác?
Trên thực tế, trình bổ trợ Tích hợp cơ sở dữ liệu SQLite chính thức sẽ chặn tất cả truy vấn MySQL và ghi lại bằng phương ngữ SQLite. Bản phát hành 2.0 cung cấp lớp dịch mới dựa trên WordPress Playground, cho phép WordPress trên SQLite vượt qua 99% bộ kiểm thử đơn vị WordPress.
Máy chủ web nằm bên trong trình duyệt
Trong WordPress thông thường, việc nhấp vào một đường liên kết, chẳng hạn như Blog,sẽ khởi tạo một yêu cầu HTTP tới phần phụ trợ từ xa để tìm nạp trang blog. Tuy nhiên, WordPress Playground không có phần phụ trợ từ xa. Dịch vụ này có một Trình chạy dịch vụ chặn tất cả các yêu cầu gửi đi và chuyển chúng đến một phiên bản PHP trong trình duyệt chạy trong một Trình chạy web riêng.
Kết nối mạng được hỗ trợ thông qua WebSockets
Đối với việc kết nối mạng, các chương trình WebAssembly chỉ gọi được các API JavaScript. Đây là một tính năng an toàn nhưng cũng có nhiều thách thức. Làm cách nào để bạn hỗ trợ mã kết nối mạng đồng bộ, cấp thấp mà PHP sử dụng cùng với các API không đồng bộ cấp cao có trong JavaScript?
Đối với WordPress Playground, câu trả lời sẽ liên quan đến WebSocket với proxy cổng TCP, Không đồng bộ hoá và vá các mã PHP nội bộ sâu như php_select. Việc này phức tạp nhưng luôn có phần thưởng. Bản dựng PHP nhắm mục tiêu đến Node.js có thể yêu cầu API web, cài đặt gói trình soạn thảo và thậm chí kết nối với máy chủ MySQL.
WordPress có thể được sử dụng ở nhiều nơi hơn nữa so với trình duyệt
Vì WordPress hiện có thể chạy trên WebAssembly, nên bạn cũng có thể chạy trong máy chủ Node.js — đó cũng là công cụ V8! Tất nhiên với StackBlitz, bạn cũng có thể chạy Node.js trực tiếp trong trình duyệt, tức là bạn có thể chạy WordPress và PHP được biên dịch thành WebAssembly, thực thi trong Node.js, cũng được biên dịch để WebAssembly chạy trong trình duyệt. WebAssembly cũng đang ngày càng phổ biến trong không gian không máy chủ và trong tương lai, điều này cũng có thể chạy trên cơ sở hạ tầng đó.
Trong tương lai, các ứng dụng WordPress có thể thiết lập tự động, có tính tương tác và cộng tác
Hãy tưởng tượng bạn đi thẳng vào trình soạn thảo mã nơi bạn có thể dễ dàng xây dựng bản dựng ngay lập tức khi hoàn tất toàn bộ quá trình thiết lập. Thậm chí bạn có thể chia sẻ một đường liên kết đơn giản và bắt đầu phiên chỉnh sửa nhiều người chơi, chẳng hạn như trong Google Tài liệu. Sau khi hoàn tất, bạn chỉ cần nhấp một lần là có thể triển khai liền mạch các tác phẩm của mình cho nhiều dịch vụ lưu trữ mà không cần cài đặt bất cứ thứ gì trên thiết bị!
Và đó chỉ là thông tin sơ lược! Chúng tôi có thể xem các hướng dẫn tương tác, bản minh hoạ trình bổ trợ trực tiếp, trang web thử nghiệm, WordPress phi tập trung trên các máy chủ gần nguồn và thậm chí là tạo trình bổ trợ trên điện thoại.
Tương lai thật thú vị và bạn có thể là một phần trong tương lai đó! Ý tưởng và đóng góp của bạn là oxy của WordPress Playground. Hãy truy cập vào kho lưu trữ GitHub, nói xin chào trong #meta-playground kênh Slack của WordPress.org và vui lòng liên hệ với Adam theo địa chỉ adam@adamziel.com.