Trang này được dịch bởi Cloud Translation API.

Xây dựng trải nghiệm WordPress trong trình duyệt với WordPress Playground và WebAssembly

WordPress đầy đủ được hỗ trợ bởi PHP chỉ chạy trong trình duyệt với WebAssembly

Adam Zieliński

Thomas Nattestad

Có vẻ như khi nhìn thấy WordPress Playground lần đầu tiên, có vẻ như giống như một trang web bình thường–có thể ngoại trừ phần nền đầy màu sắc. Mọi thứ đều ổn nhưng. Những gì bạn thực sự đang xem là toàn bộ bộ phần mềm cơ sở của WordPress, bao gồm PHP và 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 Zielijkski (trưởng nhóm WordPress Playground) và Thomas Nattestad (Nhà quản lý sản phẩm cho V8) hãy khám phá:

Cách WordPress Playground có thể giúp bạn trong vai trò nhà phát triển WordPress.
Tìm hiểu sâu về cách hoạt động của tính năng này.
Ý nghĩa của nó đối với tương lai của WordPress.

Dùng WordPress mà không cần cài đặt, nhúng vào ứng dụng và thậm chí là kiểm soát bằng JavaScript

Bạn có thể sử dụng và tuỳ chỉnh WordPress được nhúng tại playground.wordpress.net miễn phí. Có không có cơ sở hạ tầng đám mây và dịch vụ hỗ trợ nào cần chi trả vì trang web đó hoạt động hoàn toàn trong trình duyệt của bạn–không ai khác có thể truy cập trang đó. Quá trình này cũng chỉ mang tính tạm thời. Ngay khi bạn làm mới trang, trang đã biến mất. Bạn có thể truy cập 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ã 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:

trang phpinfo.

WordPress Playground là một cách hoàn toàn mới để sử dụng WordPress. Tối đa hoá khả năng tuy nhiên, chỉ được mở khoá bằng cách đưa tính năng này vào ứng dụng của bạn. Cách dễ dàng là nhúng WordPress Playground trong <iframe> và định cấu hình công cụ này bằng cách sử dụng API tham số truy vấn. Đó là nội dung của nội dung giới thiệu chính thức làm. Ví dụ: khi bạn chọn Chủ đề mặt dây chuyền và Trình bổ trợ Coblocks, iframe được nhúng được cập nhật để trỏ đến https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

Giới thiệu WordPress Playground.

iframe là một cách dễ dàng để bắt đầu, nhưng cũng bị 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ế, hãy có một tổ chức khác nữa API mạnh mẽ.

Ứ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 @wp-playground/client npm . Hãy xem ví dụ sau đây về cách sử dụng hàm này phần hướng dẫn dạng tương tác để xem nhiều ví dụ hơn nữa:

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 sử dụng WordPress

WordPress Playground không phải là một khối đá nguyên khối. Phát hành WebAssembly PHP độ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ể dùng 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ể tinh chỉnh trên @php-wasm/node cung cấp các tiện ích PHP khác. Adam đã sử dụng dữ liệu trước đây để thêm các đoạn mã PHP tương tác vào hướng dẫn về WP_HTML_Tag_Processor này. Dưới đây là phần giới thiệu về cách sử dụng:

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 đây, bạn hẳn phải suy nghĩ – việc đó diễn ra như thế nào? Câu hỏi rất hay! Hãy cùng đi sâu vào nội bộ và tìm hiểu. Hãy khoá dây lên nào!

Nâng cao 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 ngay trong trình duyệt. Sân chơi WordPress đã phát triển một quy trình chuyên biệt để tạo trình phiên 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, chỉ cần điều chỉnh chữ ký hàm ở đây, buộc một biến cấu hình ở đó, và đang áp dụng một vài bản vá nhỏ. Dưới đâ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 hữu ích lắm trong trình duyệt. Với tư cách máy chủ phần mềm, PHP không có API JavaScript để truyền nội dung yêu cầu, hãy tải lên hoặc điền sẵn vào luồng php://stdin. WordPress Playground phải xây dựng một ứng dụng từ đầu. Tệp nhị phân WebAssembly đi kèm với mô-đun API PHP chuyên dụng được viết bằng C và a Lớp JavaScript JavaScript sẽ 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 phiên bản PHP trình chuyển đổi thực sự khá nhàm chán. Nó chỉ yêu cầu trình duyệt tải xuống, vì ví dụ: php_7_3.wasm thay vì nói php_8_2.wasm.

Cơ sở dữ liệu được hỗ trợ với một lớp dịch SQL

WordPress cần có MySQL. Tuy nhiên, không có phiên bản WebAssembly của MySQL bạn có thể chạy trong trình duyệt. Do đó, WordPress Playground gửi PHP cùng với trình điều khiển SQLite gốc và dựa vào SQLite.

Nhưng làm cách nào WordPress có thể chạy trên một cơ sở dữ liệu khác?

Trong hậu trường, Tích hợp cơ sở dữ liệu SQLite trình bổ trợ chặn tất cả các truy vấn MySQL và ghi lại chúng bằng phương ngữ SQLite. Giải pháp 2.0 thả tàu 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 một 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 HTTP yêu cầu đế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. Chiến dịch này có Trình chạy dịch vụ giúp chặn tất cả các yêu cầu gửi đi và chuyển chúng tới PHP trong trình duyệt thực thể chạy trong một Nhân viên web.

Sơ đồ quy trình bắt đầu bằng một iframe trỏ vào tài nguyên wp-admin, các lệnh gọi bị trình chạy dịch vụ chặn, được hiển thị trong luồng worker và cuối cùng được máy chủ trong trình duyệt dịch sang phản hồi WordPress.

Kết nối mạng được hỗ trợ thông qua WebSockets

Khi nói đến kết nối mạng, các chương trình WebAssembly chỉ giới hạn gọi API JavaScript. Đây là một tính năng an toàn nhưng đồng thời cũng là một thách thức. Làm sao bạn hỗ trợ mã mạng đồng bộ, cấp thấp được PHP sử dụng với API không đồng bộ cấp cao có sẵn trong JavaScript không?

Đối với WordPress Playground, câu trả lời liên quan đến proxy cổng WebSocket đến TCP, Không đồng bộ hoá và vá sâu Nội bộ PHP như php_select. Việc này phức tạp nhưng có phần thưởng. Chiến lược phát hành đĩa đơn Bản dựng PHP nhắm mục tiêu theo 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 dùng ở nhiều nơi hơn nữa ngoà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 Node.js máy chủ—đó 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 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 sang WebAssembly, thực thi trong Node.js, cũng được biên dịch thành WebAssembly đang chạy trong trình duyệt. WebAssembly cũng đang bùng nổ về mức độ phổ biến trong không gian không máy chủ và trong trong tương lai thì mã này cũng có thể chạy trên cơ sở hạ tầng đó.

Tương lai có thể mang đến các ứng dụng WordPress cộng tác, có tính tương tác và thiết lập tự động

Hãy tưởng tượng bạn có thể thoải mái thao tác với một trình soạn thảo mã ngay lập tức khi toàn bộ quá trình thiết lập đã hoàn tất. Bạn thậm chí có thể chia sẻ 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. và khi hoàn tất, chỉ cần một cú nhấp chuột để triển khai liền mạch cho nhiều dịch vụ lưu trữ khác nhau mà không cần cài đặt bất cứ thứ gì cục bộ!

Đó mới chỉ là thông tin sơ lược! 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, thử nghiệm các trang web, WordPress phi tập trung trên các máy chủ biên và thậm chí là tạo trên điện thoại của bạn.

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à nền tảng của WordPress Playground. Truy cập/ghé qua kho lưu trữ GitHub, giả sử xin chào trên #meta-playground Kênh Slack của WordPress.org, đừng ngại thoải mái liên hệ với Adam theo địa chỉ adam@adamziel.com.