如何在两个不同标签页的Node/Express服务器间实现双向数据通信？

一、改造Server1：异步提交表单避免页面跳转 #

原来的表单提交会触发页面跳转，改用Fetch API异步发送请求，保留当前页面状态。

1. 替换Server1的HTML表单代码：

<form id="msgForm">
  <input type="text" name="mensaje" placeholder="输入消息内容">
  <button type="submit">发送</button>
</form>

<script>
document.getElementById('msgForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认跳转行为
  const formData = new FormData(e.target);
  const msg = formData.get('mensaje');

  try {
    await fetch('http://localhost:3001/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `mensaje=${encodeURIComponent(msg)}`
    });
    e.target.reset(); // 提交后清空表单
  } catch (err) {
    console.error('发送失败:', err);
  }
});
</script>

2. 配置Server2允许跨域请求：
   因为Server1和Server2属于不同端口，需要在Server2中安装并启用CORS：

npm install cors

在Server2的入口文件（如app.js）中添加：

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));

二、给Server2添加WebSocket实现实时推送 #

用ws库搭建WebSocket服务，让Server2能主动向所有连接的客户端推送新消息。

1. 安装WebSocket依赖：

npm install ws

2. 修改Server2入口文件，整合WebSocket服务：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const router = require('./routes/index'); // 你的路由文件

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

// 解析表单数据
app.use(express.urlencoded({ extended: true }));
app.use('/', router);

// 存储所有活跃的客户端连接
let activeClients = new Set();

wss.on('connection', (ws) => {
  activeClients.add(ws);
  console.log('新客户端已连接');

  ws.on('close', () => {
    activeClients.delete(ws);
    console.log('客户端已断开连接');
  });
});

// 广播消息到所有客户端
function broadcastMsg(msg) {
  activeClients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(msg);
    }
  });
}

// 将广播函数挂载到app，路由中可调用
app.set('broadcastMsg', broadcastMsg);

server.listen(3001, () => {
  console.log('Server2 运行在 localhost:3001');
});

3. 修改Server2的POST路由，收到消息后立即广播：

router.post('/', (req, res) => {
  const mensaje = req.body.mensaje;
  console.log('收到消息:', mensaje);
  // 调用广播函数推送给所有客户端
  const broadcastMsg = req.app.get('broadcastMsg');
  broadcastMsg(mensaje);
  res.send('消息已推送');
});

三、改造Server2前端页面，监听WebSocket更新内容 #

Server2的页面需要连接WebSocket，收到消息后自动更新显示。

示例页面（如public/index.html）：

<!DOCTYPE html>
<html>
<head>
  <title>Server2 实时消息面板</title>
</head>
<body>
  <h2>实时消息：</h2>
  <div id="msgBox"></div>

  <script>
    const ws = new WebSocket('ws://localhost:3001');
    const msgBox = document.getElementById('msgBox');

    // 收到消息时更新页面
    ws.onmessage = (event) => {
      const msgElement = document.createElement('p');
      msgElement.textContent = event.data;
      msgBox.appendChild(msgElement);
      // 自动滚动到最新消息
      msgBox.scrollTop = msgBox.scrollHeight;
    };

    // 连接断开时自动重连
    ws.onclose = () => {
      console.log('连接断开，3秒后重连');
      setTimeout(() => window.location.reload(), 3000);
    };
  </script>
</body>
</html>

四、测试步骤 #

1. 启动Server1：node server1.js
2. 启动Server2：node server2.js
3. 打开两个标签页：localhost:3000（Server1表单页）和localhost:3001（Server2消息页）
4. 在Server1表单输入内容提交，Server2页面会自动显示新消息，Server1页面无跳转。

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