第七篇：高阶开发与API集成（全栈开发实战：从REST API到实时通信）-货代QA社

一、WordPress REST API 深度整合

1. React前端对接实战

步骤1：创建React应用

npx create-react-app wp-react-frontend  
cd wp-react-frontend  
npm install @wordpress/api-fetch axios

步骤2：配置API认证（JWT）

安装插件「JWT Authentication for WP REST API」
在wp-config.php添加：

define('JWT_AUTH_SECRET_KEY', 'your_256bit_secret_key');  
define('JWT_AUTH_CORS_ENABLE', true);
[content_hide]

React中封装请求模块：

// src/api.js  
import apiFetch from '@wordpress/api-fetch';  
apiFetch.use(apiFetch.createRootURLMiddleware('https://yourdomain.com/wp-json'));  
apiFetch.use(apiFetch.createNonceMiddleware('your_wp_rest_nonce'));

步骤3：获取并渲染文章

// src/App.js  
function App() {  
  const [posts, setPosts] = useState([]);  
  useEffect(() => {  
    apiFetch({ path: '/wp/v2/posts' })  
      .then(data => setPosts(data));  
  }, []);  
  return (  
    <div>  
      {posts.map(post => (  
        <div key={post.id}>  
          <h2>{post.title.rendered}</h2>  
          <div dangerouslySetInnerHTML={{__html: post.content.rendered}} />  
        </div>  
      ))}  
    </div>  
  );  
}

二、自定义支付网关开发

1. 加密货币支付插件开发

文件结构：

/wp-content/plugins/crypto-paygate/  
├── crypto-paygate.php      # 主插件文件  
├── includes/  
│   ├── class-payment-api.php  
│   └── class-order-handler.php  
└── assets/  
    └── js/payment-form.js

核心代码（简化版）：

// crypto-paygate.php  
add_action('plugins_loaded', 'init_crypto_gateway');  
function init_crypto_gateway() {  
  class WC_Gateway_Crypto extends WC_Payment_Gateway {  
    public function __construct() {  
      $this->id = 'crypto_pay';  
      $this->method_title = 'Cryptocurrency';  
      $this->init_form_fields();  
    }  

    public function process_payment($order_id) {  
      // 调用Coinbase Commerce API生成支付地址  
      $response = wp_remote_post('https://api.commerce.coinbase.com/charges', [  
        'headers' => ['X-CC-Api-Key' => $this->api_key],  
        'body' => json_encode([  
          'name' => 'Order #'.$order_id,  
          'pricing_type' => 'fixed_price',  
          'local_price' => ['amount' => $order->total, 'currency' => 'USD']  
        ])  
      ]);  
      // 保存支付链接到订单元数据  
      update_post_meta($order_id, '_crypto_pay_url', $response['hosted_url']);  
      return ['result' => 'success', 'redirect' => $response['hosted_url']];  
    }  
  }  
}

2. 安全防护措施

非对称加密：使用OpenSSL对交易请求签名
监听区块链事件：通过Webhook接收支付确认

add_action('rest_api_init', function() {  
  register_rest_route('crypto/v1', '/webhook', [  
    'methods' => 'POST',  
    'callback' => 'handle_webhook',  
    'permission_callback' => '__return_true'  
  ]);  
});  

function handle_webhook($request) {  
  $payload = json_decode($request->get_body(), true);  
  // 验证签名  
  if (verify_signature($payload)) {  
    update_order_status($payload['event']['data']['metadata']['order_id']);  
  }  
}

三、实时聊天系统开发（WebSocket + React）

1. WebSocket服务端配置

使用Node.js + Socket.io：

// server.js  
const io = require('socket.io')(3001, {  
  cors: { origin: "https://yourdomain.com" }  
});  

io.on('connection', (socket) => {  
  socket.on('join_room', (roomId) => {  
    socket.join(roomId);  
  });  

  socket.on('send_message', ({ roomId, message }) => {  
    io.to(roomId).emit('receive_message', message);  
  });  
});

2. WordPress用户系统集成

前端鉴权流程：

用户登录WordPress → 获取JWT Token
连接WebSocket时携带Token：

3. 消息持久化方案

自定义数据库表：

// 插件激活时创建表  
register_activation_hook(__FILE__, 'create_chat_table');  
function create_chat_table() {  
  global $wpdb;  
  $table_name = $wpdb->prefix . 'chat_messages';  
  $charset = $wpdb->get_charset_collate();  

  $sql = "CREATE TABLE $table_name (  
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,  
    room_id VARCHAR(100) NOT NULL,  
    user_id BIGINT UNSIGNED NOT NULL,  
    message TEXT NOT NULL,  
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,  
    PRIMARY KEY (id)  
  ) $charset;";  

  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');  
  dbDelta($sql);  
}

四、调试与性能优化

1. Xdebug远程调试

php.ini配置：

[xdebug]  
zend_extension=xdebug.so  
xdebug.mode=debug  
xdebug.client_host=192.168.1.100  
xdebug.client_port=9003  
xdebug.start_with_request=yes

VSCode配置（launch.json）：

{  
  "version": "0.2.0",  
  "configurations": [  
    {  
      "name": "Xdebug",  
      "type": "php",  
      "request": "launch",  
      "port": 9003,  
      "pathMappings": {  
        "/var/www/html": "${workspaceFolder}/wp-content/plugins/my-plugin"  
      }  
    }  
  ]  
}

2. GraphQL性能优化

查询复杂度限制：

add_filter('graphql_query_analyzer_query_complexity', function($max) {  
  return 1000; // 限制单个查询复杂度  
});  

add_filter('graphql_results', function($response) {  
  if (isset($response->extensions['queryComplexity'])) {  
    error_log('Query Complexity: ' . $response->extensions['queryComplexity']);  
  }  
  return $response;  
});