如何在React中构建仅依赖信令服务器的无服务器P2P文本聊天应用？

核心结论：确实不需要WebRTC #

既然你能接受延迟、仅需文本聊天，WebRTC的实时性、点对点穿透等复杂特性对你来说完全是冗余的。直接用WebSocket（或HTTP轮询/POST）+ 信令服务器转发的方案更简单、可靠，开发成本低很多。

你的疑问解答 #

1. 关于ICE候选和STUN服务器 #

ICE候选和STUN是WebRTC专属技术，用于建立点对点实时连接。既然你不用WebRTC，完全不需要处理这些。如果只是好奇原理：

• ICE候选由WebRTC的RTCPeerConnection对象生成，需先创建连接、生成SDP offer/answer，再监听icecandidate事件获取候选列表。
• 向STUN服务器的请求是RTCPeerConnection自动完成的，只需初始化时配置STUN服务器地址（比如stun:stun.l.google.com:19302），无需手动发送HTTP请求。

2. 客户端间的消息收发 #

直接用对方IP+端口作为URL发axios请求几乎不可行——绝大多数客户端处于NAT（家庭/公司网络）后面，外部无法直接访问内部IP和端口。即使拿到IP端口列表，也大概率连不通。

更务实的方案是让信令服务器作为消息中转站，步骤如下：

1. 客户端A和B都连接到信令服务器（用WebSocket或HTTP长连接）。
2. 双方通过信令服务器交换身份信息（比如用户名、房间ID）。
3. 客户端A发消息时先传给信令服务器，服务器再转发给B；反之亦然。

如果一定要尝试点对点（不推荐，复杂度高），需要用到TURN服务器做中继，但这又回到类似WebRTC的复杂度，完全没必要为延迟可接受的文本聊天折腾。

基础演示代码 #

1. 信令服务器（Node.js + Express + WebSocket） #

先安装依赖：

npm install express ws

服务器代码server.js：

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

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

// 存储房间：key为房间ID，value为连接的客户端集合
const rooms = new Map();

wss.on('connection', (ws) => {
  let currentRoom = null;

  ws.on('message', (data) => {
    const message = JSON.parse(data);
    switch (message.type) {
      // 加入房间
      case 'join':
        currentRoom = message.roomId;
        if (!rooms.has(currentRoom)) {
          rooms.set(currentRoom, new Set());
        }
        rooms.get(currentRoom).add(ws);
        console.log(`Client joined room ${currentRoom}`);
        break;
      // 发送消息
      case 'message':
        if (currentRoom && rooms.has(currentRoom)) {
          // 向房间内除自己外的所有客户端转发消息
          rooms.get(currentRoom).forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
              client.send(JSON.stringify({
                type: 'message',
                sender: message.sender,
                content: message.content
              }));
            }
          });
        }
        break;
    }
  });

  // 断开连接时移除房间内的客户端
  ws.on('close', () => {
    if (currentRoom && rooms.has(currentRoom)) {
      rooms.get(currentRoom).delete(ws);
      if (rooms.get(currentRoom).size === 0) {
        rooms.delete(currentRoom);
      }
      console.log(`Client left room ${currentRoom}`);
    }
  });
});

const PORT = 3000;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

2. 客户端（HTML + JavaScript） #

创建client.html：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Chat</title>
  <style>
    #chat-container { max-width: 600px; margin: 20px auto; }
    #messages { height: 300px; border: 1px solid #ccc; padding: 10px; overflow-y: auto; margin-bottom: 10px; }
    #message-input { width: 80%; padding: 8px; }
    button { padding: 8px 16px; }
  </style>
</head>
<body>
  <div id="chat-container">
    <div>
      <input type="text" id="room-id" placeholder="输入房间ID" value="test-room">
      <input type="text" id="username" placeholder="输入用户名" value="user1">
      <button onclick="joinRoom()">加入房间</button>
    </div>
    <div id="messages"></div>
    <input type="text" id="message-input" placeholder="输入消息" onkeydown="if(event.keyCode===13) sendMessage()">
    <button onclick="sendMessage()">发送</button>
  </div>

  <script>
    let ws;

    function joinRoom() {
      const roomId = document.getElementById('room-id').value;
      const username = document.getElementById('username').value;
      if (!roomId || !username) return;

      // 连接WebSocket服务器
      ws = new WebSocket(`ws://localhost:3000`);
      
      ws.onopen = () => {
        console.log('Connected to server');
        // 发送加入房间的消息
        ws.send(JSON.stringify({
          type: 'join',
          roomId: roomId
        }));
      };

      ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.type === 'message') {
          addMessageToChat(`${message.sender}: ${message.content}`);
        }
      };

      ws.onclose = () => {
        console.log('Disconnected from server');
      };
    }

    function sendMessage() {
      const input = document.getElementById('message-input');
      const content = input.value.trim();
      const username = document.getElementById('username').value;
      if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;

      ws.send(JSON.stringify({
        type: 'message',
        sender: username,
        content: content
      }));
      // 自己发送的消息也显示到聊天框
      addMessageToChat(`我: ${content}`);
      input.value = '';
    }

    function addMessageToChat(text) {
      const messagesDiv = document.getElementById('messages');
      const messageElement = document.createElement('div');
      messageElement.textContent = text;
      messagesDiv.appendChild(messageElement);
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }
  </script>
</body>
</html>

运行演示 #

1. 启动服务器：node server.js
2. 打开两个浏览器窗口，加载client.html，分别输入不同用户名（比如user1和user2）、同一个房间ID（比如test-room），点击加入房间。
3. 在输入框输入消息并发送，即可看到对方收到消息。

这个方案完全满足你的需求：服务器仅作为信令/消息中转，支持文本聊天，延迟极低且在可接受范围内，代码简单易懂，没有WebRTC的复杂配置。

内容的提问来源于stack exchange，提问作者János