Express JS能否监听外部请求并向React JS前端推送变更通知？

你的需求完全可以实现，核心是解决后端接收外部请求后向前端推送更新的问题，以下是几种成熟方案：

方案1：WebSocket（实时双向通信，推荐） #

通过在Express中集成WebSocket库，和React前端建立持久连接，外部APP调用REST接口时，后端直接推送更新消息到前端。

实现步骤 #

• Express端：
  1. 安装socket.io库，启动HTTP服务器并挂载socket.io实例
  2. 编写处理外部请求的REST接口，在接口内通过socket向前端推送配置数据
• React端：
  1. 安装socket.io-client库，在组件中建立socket连接
  2. 监听后端推送的事件，更新组件状态以触发UI重渲染

代码示例 #

Express端：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
app.use(express.json());
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: "你的React前端域名/IP" } });

// 处理外部APP的字体更新请求
app.post('/api/update-font', (req, res) => {
  const fontConfig = req.body; // 示例：{ size: '18px', weight: 'bold', color: '#333' }
  // 推送给所有在线前端客户端
  io.emit('font-config-update', fontConfig);
  res.status(200).json({ success: true, message: '配置已推送' });
});

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

React端：

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

const socket = io('http://localhost:3001');

function ControlledText() {
  const [fontConfig, setFontConfig] = useState({
    size: '16px',
    weight: 'normal',
    color: '#000'
  });

  useEffect(() => {
    // 监听后端推送的配置更新事件
    socket.on('font-config-update', (newConfig) => {
      setFontConfig(prev => ({ ...prev, ...newConfig }));
    });
    // 组件卸载时断开连接
    return () => socket.disconnect();
  }, []);

  return (
    <div style={{
      fontSize: fontConfig.size,
      fontWeight: fontConfig.weight,
      color: fontConfig.color
    }}>
      可被外部应用控制的文本内容
    </div>
  );
}

export default ControlledText;

方案2：前端轮询（简单易实现） #

如果不需要实时性，React前端可以定时向Express发送请求，查询最新配置。外部APP调用REST接口时，后端将配置存储到内存/数据库，前端轮询时获取并更新UI。

实现要点 #

• Express端：维护字体配置的存储（比如全局变量或Redis），提供GET接口返回最新配置，POST接口接收外部更新请求
• React端：使用setInterval定时调用GET接口，更新组件状态

注意事项 #

• 轮询间隔建议设置为1-5秒，避免过多消耗服务器资源
• 适合更新频率低的场景

方案3：Server-Sent Events（SSE，单向推送） #

基于HTTP协议的单向推送方案，服务器主动向前端发送事件，适合仅需后端推送到前端的场景，比WebSocket轻量。

代码示例 #

Express端：

app.get('/api/font-sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 存储当前连接的响应对象，用于后续推送
  const clientRes = res;

  // 处理外部更新请求
  app.post('/api/update-font', (req, res) => {
    const config = req.body;
    // 向前端发送SSE事件
    clientRes.write(`data: ${JSON.stringify(config)}\n\n`);
    res.status(200).json({ success: true });
  });

  // 连接关闭时清理
  req.on('close', () => {
    clientRes.end();
  });
});

React端：

useEffect(() => {
  const eventSource = new EventSource('http://localhost:3001/api/font-sse');
  eventSource.onmessage = (event) => {
    const newConfig = JSON.parse(event.data);
    setFontConfig(newConfig);
  };
  return () => eventSource.close();
}, []);

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