如何将后端接收的第三方webhook数据主动推送给前端？

1 接口返回值的响应对象问题 #

是的，该接口的res返回内容只会发送给发起请求的第三方平台。HTTP协议遵循请求-响应一一对应的规则，谁发起的请求，响应就会返回给谁，你的前端没有发起这个/webhook请求，自然无法直接接收这个响应。

另外你贴出的代码存在语法错误：app.get的回调函数被提前闭合，res.json写在了回调外部，运行会报错，需要调整括号位置：

// 修正后的基础代码结构
app.get('/webhook', (req, res) => {
  console.log("webhook fired");
  // 其他逻辑
  res.json({message: "webHook response"}); // 该响应返回给第三方调用方
});

2 把webhook数据发送给前端的实现方案 #

下面列几种适合你本地前后端（端口3000/5000）场景的实现方式：

方案1：WebSocket 实时推送（推荐，实时性最高） #

通过前后端建立WebSocket长连接，后端收到webhook触发时主动给前端推数据，是实时通知的标准实现方案。

后端实现（Node.js + Express）

1. 先安装WebSocket依赖：
   npm install ws
2. 代码示例：

const express = require('express');
const WebSocket = require('ws');
const app = express();

// 启动WebSocket服务
const wss = new WebSocket.Server({ port: 8080 });
// 存储连接的前端客户端
let frontendWsClient = null;
wss.on('connection', (ws) => {
  console.log('前端已连接WebSocket');
  frontendWsClient = ws;
});

// webhook接口
app.get('/webhook', (req, res) => {
  console.log("webhook fired");
  const webhookData = req.query; // 可获取第三方传递的所有参数
  // 向前端推送数据
  if (frontendWsClient && frontendWsClient.readyState === WebSocket.OPEN) {
    frontendWsClient.send(JSON.stringify({
      event: 'webhook_trigger',
      data: webhookData
    }));
  }
  res.json({message: "webHook response"});
});

app.listen(5000, () => console.log('后端运行在localhost:5000'));

前端实现（localhost:3000侧）

// 页面加载时建立WebSocket连接
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.event === 'webhook_trigger') {
    console.log('收到webhook触发数据：', msg.data);
    // 此处写前端业务逻辑，比如更新页面、弹窗提示等
  }
};

方案2：前端轮询（临时调试用，无额外依赖） #

如果只是临时开发调试，不想引入额外依赖，可以用轮询方案，实现成本最低。

后端实现

新增内存变量存储webhook数据，同时新增一个给前端查询的接口：

// 内存存储最新的webhook数据，生产环境可替换为数据库/Redis
let latestWebhookData = null;

app.get('/webhook', (req, res) => {
  console.log("webhook fired");
  latestWebhookData = req.query; // 存储第三方传递的参数
  res.json({message: "webHook response"});
});

// 给前端提供的查询接口
app.get('/api/latest-webhook', (req, res) => {
  res.json({ data: latestWebhookData });
  // 可选：查询后清空数据，避免重复获取旧数据
  latestWebhookData = null;
});

前端实现

加定时器定期拉取接口数据：

setInterval(async () => {
  const res = await fetch('http://localhost:5000/api/latest-webhook');
  const { data } = await res.json();
  if (data) {
    console.log('拿到webhook触发数据：', data);
    // 此处写前端业务逻辑
  }
}, 1000); // 轮询间隔可自行调整，单位为毫秒

方案3：Server-Sent Events（SSE） #

比WebSocket更轻量的单向推送方案，仅支持后端向浏览器发消息，也适合这个场景，实现复杂度介于前两个方案之间。

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