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