从后端回调发送数据到前端

Question

我在

React

上有网站并尝试集成支付引擎。支付引擎页面是使用

iframe

添加的，所以我无法添加

onClick

事件来处理用户为产品付款时点击“Pay”按钮然后使用axios来处理。例如，当我在前端使用

axios

或

fetch

时，它会在用户提交付款表单之前触发。

相反，每当用户提交表单时，支付引擎都会向我提供的

serviceUrl

发送发布请求。

所以，我收到了他们的发帖请求：

app.post("/api/payment-status", (req, res) => {
  console.log("Payment status received");
  const {transactionStatus, reason, reasonCode} = JSON.parse(Object.keys(req.body)[0]);
  console.log("transactionStatus: ", transactionStatus, "reason: ", reason, "reasonCode: ", reasonCode);
  let paymentData = {};

  if (transactionStatus === webConfig.wfpTransactionStatus && reason === webConfig.wfpReason && reasonCode === Number(webConfig.wfpReasonCode)) {
      console.log("Success!!!");
      paymentData = {
        isSuccess: true,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: "Success.",
        wfpReasonCode: reasonCode
      };
  } else {
      console.log("Failed!!!!");
      paymentData = {
        isSuccess: false,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: `Failed: ${reasonCode}!`,
        wfpReasonCode: reasonCode
      };
  }

  res.status(200).send("Payment status received.");
});

我必须将

paymentData

对象发送到前端。

因此，我决定使用

socket.io

将数据从后端传输到客户端。

后端代码：

const socketIO = require("socket.io");

const io = socketIO(server, {
  cors: {
    origin: "https://www.my-domain.com",
    methods: ["GET", "POST"]
  }
});

io.on("connection", (socket) => {
  console.log("A client connected: ", socket.id);

  socket.on("paymentClientID", (offerID) => {
    console.log("Client ID on backend: ", offerID);
  });

  socket.on("disconnect", () => {
    console.log("A client disconnected: ", socket.id);
    socket.close();
    socket.disconnect();
  });
});

app.post("/api/payment-status", (req, res) => {
  console.log("Payment status received");
  const {transactionStatus, reason, reasonCode, orderReference} = JSON.parse(Object.keys(req.body)[0]);
  console.log("transactionStatus: ", transactionStatus, "reason: ", reason, "reasonCode: ", reasonCode, "orderReference: ", orderReference);
  let paymentData = {};

  if (transactionStatus === webConfig.wfpTransactionStatus && reason === webConfig.wfpReason && reasonCode === Number(webConfig.wfpReasonCode) && orderReference) {
      console.log("Success!!!");
      paymentData = {
        isSuccess: true,
        wfpOrderReference: orderReference,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: "Success.",
        wfpReasonCode: reasonCode
      };
  } else {
      console.log("Failed!!!!");
      paymentData = {
        isSuccess: false,
        wfpOrderReference: orderReference,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: `Failed: ${reasonCode}!`,
        wfpReasonCode: reasonCode
      };
  }

  io.emit("paymentStatus", paymentData);
  res.status(200).send("Статус платежу отримано");
});

前端代码：

import io from "socket.io-client";
const socket = io("https://www.my-domain.com");

useEffect(() => {
    const wfpPaymentStatusSocket = () => {
      socket.emit("paymentClientID", offerID);

      socket.on("paymentStatus", (data) => {
        console.log("Data: ", data);
        alert(data);
        socket.emit("disconnect");
        console.log("Disconnecting....");
      });
    };

    wfpPaymentStatusSocket();
  }, [socket]);

从服务器日志中，我只看到：

客户端已连接：NUDCr7GnZclJuNYBAAAi

后台客户端ID：16132880

客户端已连接：ex9Kg5g-Bejn6oncAAAk

后台客户端ID：16132880

由于某种原因，它没有收到以下数据：

socket.on("paymentStatus", (data) => {
  console.log("Data: ", data);
  alert(data);
  socket.emit("disconnect");
  console.log("Disconnecting....");
});

有什么想法为什么它在客户端（前端）上没有收到 paymentStatus 数据吗？

Answer 1

所以，我通过添加解决了这个问题：

app.emit("paymentStatusReceived", paymentData);

app.post("/api/payment-status", (req, res) => {
  console.log("Payment status received");
  const {transactionStatus, reason, reasonCode, orderReference} = JSON.parse(Object.keys(req.body)[0]);
  console.log("transactionStatus: ", transactionStatus, "reason: ", reason, "reasonCode: ", reasonCode, "orderReference: ", orderReference);
  let paymentData = {};

  if (transactionStatus === webConfig.wfpTransactionStatus && reason === webConfig.wfpReason && reasonCode === Number(webConfig.wfpReasonCode) && orderReference) {
      console.log("Success!!!");
      paymentData = {
        isSuccess: true,
        wfpOrderReference: orderReference,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: "Success.",
        wfpReasonCode: reasonCode
      };
  } else {
      console.log("Failed!!!!");
      paymentData = {
        isSuccess: false,
        wfpOrderReference: orderReference,
        wfpStatus: transactionStatus,
        wfpReason: reason,
        msg: `Failed: ${reasonCode}!`,
        wfpReasonCode: reasonCode
      };
  }

  app.emit("paymentStatusReceived", paymentData);
  res.status(200).send("Статус платежу отримано");
});

这将触发事件以指示已收到付款状态。

然后我使用

Axios

方法创建了处理来自前端的

GET

请求的路由。

app.get("/api/get-payment-data", (req, res) => {
    // Listen for the paymentStatusReceived event
    app.once("paymentStatusReceived", (paymentData) => {
        // Send the payment data to the frontend
        res.json(paymentData);
    });
});

现在，它显示来自

Axios

的

GET

React

请求的“待处理”状态，并等待从支付引擎收到回调。收到回调后，它会将

paymentData

发送到前端（React），问题已解决。