当前位置：首页 > news >正文

前端如何连接tcp 服务，接收数据

news 来源：原创 2025/4/26 3:23:52

在传统的浏览器前端环境中，由于浏览器的同源策略和安全限制，无法直接建立 TCP 连接。不过，可以通过 WebSocket 或者使用 WebRTC 来间接实现与 TCP 服务的通信，另外在 Node.js 环境中可以直接使用 net 模块建立 TCP 连接。下面分别介绍这些方法：

利用 WebSocket 作为中间桥梁

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，可借助 WebSocket 服务器作为中间层来间接连接 TCP 服务。

实现步骤

搭建 WebSocket 服务器：这个服务器负责与 TCP 服务建立连接，同时接收来自前端的 WebSocket 连接。可以使用 Node.js 的 ws 库来实现。
前端使用 WebSocket 连接：前端页面通过 WebSocket 与 WebSocket 服务器通信。

示例代码

WebSocket 服务器（Node.js）

const net = require('net');
const WebSocket = require('ws');// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8081 });// 连接到 TCP 服务
const tcpClient = net.createConnection({ port: 8888, host: 'localhost' }, () => {console.log('Connected to TCP server');
});wss.on('connection', (ws) => {console.log('Client connected via WebSocket');// 从 WebSocket 接收数据并发送到 TCP 服务ws.on('message', (message) => {tcpClient.write(message);});// 从 TCP 服务接收数据并发送到 WebSocket 客户端tcpClient.on('data', (data) => {ws.send(data.toString());});// 处理连接关闭ws.on('close', () => {console.log('Client disconnected via WebSocket');});
});// 处理 TCP 连接错误
tcpClient.on('error', (err) => {console.error('TCP connection error:', err);
});```**前端页面**```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TCP Connection via WebSocket</title>
</head><body><button id="sendButton">Send Message</button><div id="output"></div><script>const socket = new WebSocket('ws://localhost:8081');const sendButton = document.getElementById('sendButton');const output = document.getElementById('output');socket.onopen = () => {console.log('Connected to WebSocket server');};socket.onmessage = (event) => {const message = document.createElement('p');message.textContent = `Received: ${event.data}`;output.appendChild(message);};socket.onclose = () => {console.log('Disconnected from WebSocket server');};sendButton.addEventListener('click', () => {const message = 'Hello, TCP server!';socket.send(message);});</script>
</body></html>

运用 WebRTC 进行连接

WebRTC 可用于在浏览器之间建立点对点连接，也能通过它连接到 TCP 服务。不过，这种方法相对复杂，需要使用信令服务器来协调连接。

在 Node.js 环境中直接连接

如果前端开发是在 Node.js 环境下进行，那么可以使用 net 模块直接建立 TCP 连接。

示例代码

const net = require('net');// 创建 TCP 客户端
const client = net.createConnection({ port: 8888, host: 'localhost' }, () => {console.log('Connected to TCP server');// 发送数据到 TCP 服务client.write('Hello, TCP server!');
});// 接收 TCP 服务的数据
client.on('data', (data) => {console.log(`Received from TCP server: ${data.toString()}`);// 关闭连接client.end();
});// 处理连接关闭
client.on('end', () => {console.log('Disconnected from TCP server');
});// 处理连接错误
client.on('error', (err) => {console.error('TCP connection error:', err);
});

tcp和websocket的区别和联系

TCP（传输控制协议）和WebSocket都是用于网络通信的协议，它们存在以下区别和联系：

区别

1. 协议层次

TCP：处于传输层，负责提供可靠的、面向连接的字节流传输服务。它不关心应用层的数据内容，只确保数据准确无误、按序到达目标。
WebSocket：属于应用层协议，建立在 TCP 之上，专注于为 Web 应用提供实时双向通信功能。

2. 连接方式

TCP：采用三次握手建立连接，四次挥手关闭连接。在数据传输前，客户端和服务器需要先建立连接，之后才能进行数据传输。
WebSocket：基于 HTTP 协议进行握手，客户端发送特殊的 HTTP 请求，服务器响应后将 HTTP 连接升级为 WebSocket 连接。一旦连接建立，就可以在该连接上进行双向数据传输。

3. 数据传输特点

TCP：以字节流形式传输数据，没有明显的消息边界，应用层需要自行处理数据的分割和重组。
WebSocket：以帧为单位传输数据，每个帧包含消息类型、长度等信息，有明确的消息边界，便于消息解析。

4. 通信模式

TCP：虽然本身支持全双工通信，但在实际应用中，很多基于 TCP 的协议采用请求 - 响应模式，即客户端发送请求，服务器响应请求。
WebSocket：强调实时双向通信，服务器可以主动向客户端推送数据，无需客户端发起请求，适用于实时性要求高的场景。

5. 应用场景

TCP：适用于对数据传输可靠性要求高、需要大量数据传输的场景，如文件传输、电子邮件、数据库连接等。
WebSocket：主要用于实时性要求高、需要双向通信的场景，如在线聊天、实时游戏、股票行情推送、实时监控等。

6. 浏览器支持

TCP：由于浏览器的安全限制，不能在浏览器中直接使用 TCP 连接。
WebSocket：现代浏览器广泛支持 WebSocket 协议，可以在浏览器中直接使用。

联系

TCP 是 WebSocket 的基础：WebSocket 协议依赖于 TCP 提供的可靠传输服务。WebSocket 连接建立在 TCP 连接之上，利用 TCP 的特性确保数据的可靠传输。
都用于网络通信：TCP 和 WebSocket 都是为了实现网络中不同节点之间的通信而设计的，它们在不同的层面和场景下发挥着作用。