菜鸟-创作你的创作

前端连接tcp服务接收数据的实现步骤(附代码)

lichongyang

下面给你一份 前端连接 TCP 服务并接收数据的完整实现步骤 + 可直接运行的代码示例。
⚠️注意：浏览器不能直接使用 TCP Socket（安全限制），所以必须通过：

浏览器前端 ↔ WebSocket ↔ WebSocket-转-TCP 服务器 ↔ 真实 TCP 服务

下面给你完整流程、架构、代码（Node.js WebSocket→TCP 转发器 + 前端 JS）。

✅ 一、实现方式架构图

[浏览器前端] -- WebSocket --> [Node.js 转发器] -- TCP Socket --> [TCP 服务端]

浏览器只能连 WebSocket
Node.js 使用 net 模块连 TCP
Node 通过 WebSocket 把 TCP 数据转发给前端

✅ 二、实现步骤（非常清晰）

步骤 1：创建一个 Node.js WebSocket → TCP 转发服务

用于把 WebSocket 客户端（浏览器）转成 TCP socket。

📌 安装依赖

npm install ws

📌 server.js

// server.js
const WebSocket = require('ws');
const net = require('net');

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

console.log('WebSocket Server started on ws://localhost:8080');

wss.on('connection', (ws) => {
  console.log('Browser connected');

  // 每个浏览器连接 → 创建一个 TCP 连接
  const tcpClient = new net.Socket();

  tcpClient.connect(5000, '127.0.0.1', () => {
    console.log('Connected to TCP server');
  });

  // TCP → WebSocket（推给前端）
  tcpClient.on('data', (data) => {
    ws.send(data.toString());
  });

  // TCP 关闭
  tcpClient.on('close', () => {
    console.log('TCP connection closed');
    ws.close();
  });

  tcpClient.on('error', (err) => {
    console.error('TCP error:', err);
    ws.close();
  });

  // WebSocket → TCP（前端发的数据写到 TCP）
  ws.on('message', (msg) => {
    tcpClient.write(msg);
  });

  ws.on('close', () => {
    console.log('Browser disconnected');
    tcpClient.destroy();
  });
});

运行服务器

node server.js

✅ 步骤 2：浏览器前端连接 WebSocket，间接收 TCP 数据

📌 index.html

<!DOCTYPE html>
<html>
<body>
  <h2>前端连接 TCP 的演示</h2>
  <div id="log"></div>

  <script>
    const ws = new WebSocket("ws://localhost:8080");

    ws.onopen = () => {
      console.log("已连接 Node WebSocket");
      ws.send("hello tcp");   // 给 TCP 服务发点测试数据
    };

    ws.onmessage = (event) => {
      const log = document.getElementById("log");
      log.innerHTML += `<p>收到数据：${event.data}</p>`;
      console.log("TCP 消息 → WebSocket → 前端：", event.data);
    };

    ws.onclose = () => {
      console.log("连接关闭");
    };
  </script>
</body>
</html>

只要 TCP 服务端发送数据 → 前端就能马上收到。

✅ 步骤 3：准备你的 TCP 服务端测试（可选）

如果你需要快速测试，可用这个 5000 端口的小 TCP server：

// tcp-server.js
const net = require('net');

const server = net.createServer((socket) => {
  console.log('Client connected');

  socket.write("欢迎来自TCP的第一条消息\n");

  socket.on('data', (data) => {
    console.log("收到前端发来的：", data.toString());
    socket.write("已收到你发的：" + data.toString());
  });
});

server.listen(5000, () => {
  console.log('TCP server on port 5000');
});

运行：

node tcp-server.js

✅ 三、效果：

  1. 浏览器打开 index.html
  2. 自动连接 ws://localhost:8080
  3. Node.js 自动连接 TCP 服务 127.0.0.1:5000
  4. TCP → Node → WebSocket → 前端
    前端就能看到 TCP 服务发来的消息了

🎁 四、可扩展功能（你需要我可以继续写）

我还可以帮你扩展：

✓ 自动重连 TCP
✓ 多客户端互相隔离
✓ 实现 JSON 协议封装
✓ 服务心跳机制
✓ 不同 TCP 服务的负载均衡
✓ 搭建生产环境版本（pm2 + nginx 反代）

退出移动版