如何将Twilio推送的POST短信数据从Node服务端传递至React前端

我帮你梳理两个实用的方案，把Twilio推给服务端的短信数据同步到React前端，根据你的需求选就行：

方案一：实时推送（推荐，适合即时展示） #

因为短信是实时收到的，用WebSocket（这里用Socket.io实现）能让前端立刻收到新短信，体验最好。

服务端修改（Node.js） #

首先安装依赖：

npm install socket.io express cors

然后更新你的服务端代码，集成Socket.io并推送短信：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');
const app = express();
const server = http.createServer(app);

// 配置CORS，允许React跨域请求
app.use(cors());
// 解析Twilio发送的POST请求体
app.use(express.urlencoded({ extended: true }));

// 初始化Socket.io，允许React前端连接
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 替换成你的React应用地址
    methods: ["GET", "POST"]
  }
});

app.post('/sms', (req, res) => {
  const msgFrom = req.body.From;
  const msgBody = req.body.Body;
  
  // 收到短信后，立刻推送给所有连接的前端
  io.emit('new-sms', { from: msgFrom, body: msgBody });
  
  // 必须给Twilio返回XML响应，否则它会重复发送请求
  res.writeHead(200, {'Content-Type': 'text/xml'});
  res.end('<Response></Response>');
});

server.listen(3001, () => {
  console.log('服务端运行在3001端口');
});

React前端实现 #

安装Socket.io客户端：

npm install socket.io-client

然后写一个展示短信的组件：

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const SmsViewer = () => {
  const [messages, setMessages] = useState([]);
  // 连接到服务端的Socket
  const socket = io('http://localhost:3001');

  useEffect(() => {
    // 监听服务端发来的新短信
    socket.on('new-sms', (newMessage) => {
      // 把新短信加到列表里，顺序可以自己调整
      setMessages(prev => [...prev, newMessage]);
    });

    // 组件卸载时断开Socket连接
    return () => {
      socket.disconnect();
    };
  }, []);

  return (
    <div className="sms-container">
      <h2>收到的短信</h2>
      {messages.length === 0 ? (
        <p>暂无短信</p>
      ) : (
        messages.map((msg, index) => (
          <div key={index} className="sms-item">
            <p><strong>发送方:</strong> {msg.from}</p>
            <p><strong>内容:</strong> {msg.body}</p>
            <hr />
          </div>
        ))
      )}
    </div>
  );
};

export default SmsViewer;

方案二：定时轮询（适合非实时场景） #

如果不需要即时展示，前端可以定时请求服务端的接口获取最新短信，实现起来更简单。

服务端修改 #

先安装依赖：

npm install express cors

然后更新代码，保存短信并提供GET接口：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.urlencoded({ extended: true }));

// 用数组临时存储短信（生产环境建议用数据库，比如MongoDB/MySQL）
let smsHistory = [];

app.post('/sms', (req, res) => {
  const msgFrom = req.body.From;
  const msgBody = req.body.Body;
  // 保存短信，加上时间戳方便排序
  smsHistory.push({
    from: msgFrom,
    body: msgBody,
    timestamp: new Date().toISOString()
  });

  res.writeHead(200, {'Content-Type': 'text/xml'});
  res.end('<Response></Response>');
});

// 提供GET接口给前端获取所有短信
app.get('/api/sms', (req, res) => {
  res.json(smsHistory);
});

app.listen(3001, () => {
  console.log('服务端运行在3001端口');
});

React前端实现 #

写一个组件定时请求接口：

import { useEffect, useState } from 'react';

const SmsViewer = () => {
  const [messages, setMessages] = useState([]);

  // 定义获取短信的函数
  const fetchSms = async () => {
    try {
      const response = await fetch('http://localhost:3001/api/sms');
      const data = await response.json();
      setMessages(data);
    } catch (error) {
      console.error('获取短信失败:', error);
    }
  };

  useEffect(() => {
    // 页面加载时先获取一次
    fetchSms();
    // 每5秒请求一次（可以根据需求调整间隔）
    const interval = setInterval(fetchSms, 5000);
    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="sms-container">
      <h2>收到的短信</h2>
      {messages.length === 0 ? (
        <p>暂无短信</p>
      ) : (
        messages.map((msg, index) => (
          <div key={index} className="sms-item">
            <p><strong>发送方:</strong> {msg.from}</p>
            <p><strong>内容:</strong> {msg.body}</p>
            <p><small>时间:</small> {new Date(msg.timestamp).toLocaleString()}</p>
            <hr />
          </div>
        ))
      )}
    </div>
  );
};

export default SmsViewer;

注意事项 #

• 跨域问题：如果React和Node服务端不在同一个域名/端口，一定要配置CORS，上面的代码已经加了cors中间件，不用额外处理。
• Twilio响应：必须返回XML格式的<Response></Response>，不然Twilio会认为请求失败，重复发送短信。
• 生产环境优化：用内存数组存短信只是临时方案，生产环境要换成数据库持久化存储，避免服务重启后数据丢失。

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