Woocommerce Webhook接收后如何在对应URL页面触发alert提醒

首先你需要明确：WooCommerce发送的Webhook是服务器到服务器的POST请求，无法直接触发用户浏览器内运行的JS代码，因为浏览器和后端服务默认没有保持长连接，所以需要补充「中间存储+前端查询/服务端推送」的链路，完整流程如下：

• 步骤1：WooCommerce触发新订单事件，向你预先配置的Webhook地址发送POST请求
• 步骤2：你的PHP接收脚本收到请求后，除了发送邮件，额外把事件数据存储到公共可查询的位置（数据库、Redis、临时文件都可），同时标记事件为未读状态
• 步骤3：自定义仪表盘页面通过两种方案获取新事件：
  • 方案A（低成本快速实现）：前端JS定时发送请求查询后端有没有未读的新订单事件，查询到新事件就触发alert弹出
  • 方案B（实时性更好）：用WebSocket建立浏览器和后端的长连接，PHP收到Webhook后主动推送消息给前端

1. 修改后的Webhook接收PHP代码 #

<?php
$msg = "woo order \n";
if($_SERVER['REQUEST_METHOD']=="POST")
{
    $data = file_get_contents('php://input');
    $msg .= strval($data);
    // 新增：把事件存储到临时JSON文件，正式环境建议替换为MySQL、Redis等数据库
    $eventFile = __DIR__ . '/woo_events.json';
    $events = json_decode(file_get_contents($eventFile), true) ?: [];
    $newEvent = [
        'id' => uniqid(),
        'type' => 'new_order',
        'data' => json_decode($data, true),
        'read' => 0,
        'created_at' => time()
    ];
    $events[] = $newEvent;
    file_put_contents($eventFile, json_encode($events));
}
// 保留原有发邮件逻辑
mail("yourmail@mail.com","woo order",strval($msg));

2. 后端未读事件查询接口（新建get_new_events.php） #

<?php
header('Content-Type: application/json');
// 正式环境请把*替换为你的仪表盘实际域名，避免跨域风险
header('Access-Control-Allow-Origin: *');
$eventFile = __DIR__ . '/woo_events.json';
$events = json_decode(file_get_contents($eventFile), true) ?: [];
// 筛选未读事件
$unreadEvents = array_filter($events, fn($e) => $e['read'] == 0);
// 查询后标记所有事件为已读
foreach ($events as &$e) {
    $e['read'] = 1;
}
file_put_contents($eventFile, json_encode($events));
echo json_encode(array_values($unreadEvents));

3. 自定义仪表盘页面JS代码 #

// 每3秒查询一次新事件，可根据你的需求调整查询间隔
setInterval(async () => {
    try {
        const res = await fetch('https://你的服务部署域名/get_new_events.php');
        const events = await res.json();
        if (events.length > 0) {
            events.forEach(event => {
                // 弹出alert提醒，可替换为你自己的自定义通知组件逻辑
                alert(`收到新订单！订单号：${event.data.id || '未知'}`);
                // 此处可添加你的其他业务逻辑，比如同步更新仪表盘订单列表
            });
        }
    } catch (e) {
        console.error('查询订单事件失败', e);
    }
}, 3000);

• 正式环境不要用JSON文件存储事件，替换为MySQL、Redis等数据库，避免并发写入冲突
• 轮询间隔可根据业务需求调整，实时性要求高就缩短间隔，要求低就拉长间隔降低服务器压力
• 配置WooCommerce Webhook时，主题选「订单创建」，投递地址填你部署的Webhook接收PHP文件地址，格式选JSON即可
• 如果需要更高的实时性，可以用SSE或者WebSocket方案替代轮询，实现复杂度会稍高

内容的提问来源于stack exchange，提问作者tyrese humphreys