如何用PHP或JS从TCP Socket实时接收并在网页展示数据？

当然有更高效的实时方案啦！不用每2秒轮询AJAX，下面给你两种最常用的实现方式，都能让网页实时获取服务器推送的数据：

1. WebSocket 双向实时通信 #

WebSocket是专为网页实时双向通信设计的协议，刚好适配你这种服务器主动发数据的场景。如果你的现有TCP服务器不能直接改造成WebSocket服务，可以做一个轻量的中间层（比如用Node.js），先连接到TCP服务器接收数据，再通过WebSocket推送给网页客户端。

中间层示例（Node.js + ws库） #

const net = require('net');
const WebSocket = require('ws');

// 连接到你的TCP服务器
const tcpClient = net.connect({ host: '你的TCP服务器IP', port: '端口号' }, () => {
  console.log('已连接到TCP服务器');
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('新的WebSocket客户端连接');
  
  // 收到TCP服务器的数据时，立刻推送给WebSocket客户端
  tcpClient.on('data', (data) => {
    const message = data.toString().trim();
    ws.send(message);
  });

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

前端网页代码 #

<!DOCTYPE html>
<html>
<body>
  <div id="data-display">等待数据...</div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const display = document.getElementById('data-display');

    ws.onmessage = (event) => {
      // 实时更新页面内容
      display.textContent = `最新数据：${event.data}`;
    };

    ws.onclose = () => {
      console.log('WebSocket连接断开');
      display.textContent = '连接已断开';
    };
  </script>
</body>
</html>

2. Server-Sent Events (SSE) 单向服务器推送 #

如果你的场景只需要服务器推数据给网页（不需要客户端发指令），SSE会更简单——它基于HTTP协议，不用处理复杂的双向通信逻辑，实现成本更低。

中间层示例（Node.js） #

const net = require('net');
const http = require('http');

// 连接到TCP服务器
const tcpClient = net.connect({ host: '你的TCP服务器IP', port: '端口号' }, () => {
  console.log('已连接到TCP服务器');
});

// 创建HTTP服务器处理SSE请求
const server = http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 收到TCP数据时，通过SSE推送给客户端
    tcpClient.on('data', (data) => {
      const message = data.toString().trim();
      res.write(`data: ${message}\n\n`);
    });

    req.on('close', () => {
      console.log('SSE客户端断开连接');
    });
  }
});

server.listen(8080);

前端网页代码 #

<!DOCTYPE html>
<html>
<body>
  <div id="data-display">等待数据...</div>

  <script>
    const display = document.getElementById('data-display');
    const eventSource = new EventSource('/sse');

    eventSource.onmessage = (event) => {
      display.textContent = `最新数据：${event.data}`;
    };

    eventSource.onerror = () => {
      console.log('SSE连接出错');
      eventSource.close();
      display.textContent = '连接出错';
    };
  </script>
</body>
</html>

小提示 #

• 如果你的TCP服务器支持直接修改，也可以直接集成WebSocket/SSE功能，省去中间层；如果不能改，中间层是最稳妥的方案。
• SSE优势是实现简单、兼容性好（除了IE）；WebSocket则支持双向通信，适合未来可能需要客户端交互的场景，你的需求用SSE完全足够。

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