如何用Node.js触发客户端JavaScript函数并同步API数据至前端？

下面是几种实用的实现方式，可根据你的场景选择：

一、前端定时轮询（快速上手） #

前端定期向Node.js查询最新数据，拿到数据后触发展示函数。这种方式无需复杂的长连接，适合数据更新频率不高的场景。

Node.js 后端代码（Express框架） #

const express = require('express');
const app = express();
app.use(express.json());

// 暂存外部程序发来的最新数据（生产环境建议用数据库/缓存）
let latestData = null;

// 接收外部程序的请求，存储数据
app.post('/apiResponse', (req, res) => {
  latestData = req.body;
  res.status(200).send('数据已接收');
});

// 提供给前端查询数据的接口
app.get('/getLatestData', (req, res) => {
  res.json(latestData || {});
});

app.listen(3000, () => console.log('服务运行在 http://localhost:3000'));

前端代码 #

// 定时拉取数据的函数
function fetchAndRenderData() {
  fetch('http://localhost:3000/getLatestData')
    .then(res => res.json())
    .then(data => {
      if (Object.keys(data).length > 0) {
        // 触发自定义函数展示数据
        renderData(data);
      }
    })
    .catch(err => console.error('拉取数据失败:', err));
}

// 每3秒查询一次（可根据需求调整间隔）
setInterval(fetchAndRenderData, 3000);

// 自定义的页面展示函数
function renderData(data) {
  const container = document.getElementById('data-display');
  container.textContent = JSON.stringify(data, null, 2);
}

二、Server-Sent Events（SSE，单向实时推送） #

Node.js在收到外部数据后，主动推送给已建立长连接的前端，前端实时触发处理函数。适合仅后端向前端推送数据的场景。

Node.js 后端代码 #

const express = require('express');
const app = express();
app.use(express.json());

// 存储SSE客户端连接
const connectedClients = [];

// 接收外部程序的数据并推送给前端
app.post('/apiResponse', (req, res) => {
  const newData = req.body;
  // 向所有连接的前端推送数据
  connectedClients.forEach(client => {
    client.write(`data: ${JSON.stringify(newData)}\n\n`);
  });
  res.status(200).send('数据已推送至前端');
});

// 建立SSE连接的接口
app.get('/sse', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  // 将当前连接加入列表
  connectedClients.push(res);
  // 客户端断开连接时清理
  req.on('close', () => {
    const index = connectedClients.indexOf(res);
    if (index !== -1) connectedClients.splice(index, 1);
  });
});

app.listen(3000, () => console.log('服务运行在 http://localhost:3000'));

前端代码 #

// 建立SSE连接
const eventSource = new EventSource('http://localhost:3000/sse');

// 接收后端推送的数据并触发展示函数
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  renderData(data);
};

// 处理连接错误
eventSource.onerror = (err) => {
  console.error('SSE连接异常:', err);
  eventSource.close();
};

function renderData(data) {
  const container = document.getElementById('data-display');
  container.textContent = JSON.stringify(data, null, 2);
}

三、WebSocket（双向实时通信） #

支持前后端双向交互，Node.js收到外部数据后主动推送给前端，同时前端也能向后端发送指令。适合需要实时双向通信的复杂场景。

Node.js 后端代码（使用ws库） #

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

const app = express();
app.use(express.json());
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// 存储WebSocket客户端
const clients = new Set();

// 处理WebSocket连接
wss.on('connection', (ws) => {
  clients.add(ws);
  // 客户端断开时移除
  ws.on('close', () => clients.delete(ws));
});

// 接收外部程序的数据并推送给前端
app.post('/apiResponse', (req, res) => {
  const newData = req.body;
  clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(newData));
    }
  });
  res.status(200).send('数据已推送至前端');
});

server.listen(3000, () => console.log('服务运行在 http://localhost:3000'));

前端代码 #

// 建立WebSocket连接
const socket = new WebSocket('ws://localhost:3000');

// 连接成功提示
socket.onopen = () => console.log('WebSocket连接已建立');

// 接收后端推送的数据并触发展示函数
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  renderData(data);
};

// 处理连接错误
socket.onerror = (err) => console.error('WebSocket异常:', err);

// 连接关闭提示
socket.onclose = () => console.log('WebSocket连接已关闭');

function renderData(data) {
  const container = document.getElementById('data-display');
  container.textContent = JSON.stringify(data, null, 2);
}

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