如何通过Webhook触发Inertia重新渲染视图（更新数据）？

云原生阿岚

2026-8-22

问题解答

可以通过Webhook结合实时通信机制实现这个需求，但无法直接通过Webhook触发Inertia主动发起数据请求——因为Inertia是基于客户端导航的框架，本身没有内置监听后端推送事件的能力。以下是具体实现方案：

核心思路

Webhook是后端接收Stripe事件的入口，要更新前端，需要把Webhook收到的状态变化，通过实时推送机制发送给对应的前端用户，再由前端触发Inertia的重新渲染。

具体实现步骤

1. Webhook处理Stripe事件并记录状态

当后端收到Stripe的invoice.paid或invoice.payment_failed事件时：

验证Stripe事件签名（必须操作，防止伪造请求）
更新数据库中对应订阅的状态
记录该订阅所属的用户ID

2. 引入实时通信工具

选择一种实时推送工具，比如：

Pusher（简单易集成）
Socket.io（自托管，灵活性高）
Laravel Echo（若使用Laravel后端，适配性好）

以Laravel Echo为例，后端处理完Webhook事件后，向指定用户的私有频道发送状态更新事件：

// 后端Webhook处理代码
event(new SubscriptionStatusUpdated($userId, $newStatus));

3. 前端监听实时事件并触发Inertia更新

在Inertia前端页面中，监听对应实时频道的事件，收到状态更新时调用Inertia的reload()方法重新获取数据并渲染：

// 前端Vue组件示例
import Echo from 'laravel-echo';

export default {
  mounted() {
    Echo.private(`user.${this.$page.props.user.id}`)
      .listen('SubscriptionStatusUpdated', (event) => {
        // 触发Inertia重新加载当前页面数据
        this.$inertia.reload({ preserveState: false, preserveScroll: false });
      });
  }
}