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

更新时间：2025年07月11日 09:42:39 作者：三思而后行，慎承诺

TCP 协议是面向连接的通信协议,即传输数据之前,在发送端和接收端建立逻辑连接,再传输数据,这篇文章主要介绍了前端连接tcp服务接收数据的实现步骤,需要的朋友可以参考下

前言

在传统的浏览器前端环境中，由于浏览器的同源策略和安全限制，无法直接建立 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 都是为了实现网络中不同节点之间的通信而设计的，它们在不同的层面和场景下发挥着作用。

总结

到此这篇关于前端连接tcp服务接收数据的文章就介绍到这了,更多相关前端连接tcp服务接收数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

常用类之TCP连接类－socket编程

node.js cookie-parser之parser.js
这篇文章主要介绍node.js cookie-parser之parser.js，讲解的比较详细，需要的朋友可以参考下。
2016-06-06
nodejs基于WS模块实现WebSocket聊天功能的方法
这篇文章主要介绍了nodejs基于WS模块实现WebSocket聊天功能的方法,结合实例形式分析了nodejs使用WS模块进行WebSocket通信实现聊天功能的具体操作技巧,需要的朋友可以参考下
2018-01-01
node.js根据不同请求路径返回不同数据详解流程
本篇文章介绍了我在开发过程中发现的一个小问题，就是node.js如何能够根据不同的请求路径来返回得到不同数据，通读本篇对大家的学习或工作具有一定的价值，需要的朋友可以参考下
2021-10-10
Node.js之readline模块的使用详解
这篇文章主要介绍了Node.js之readline模块的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
nodejs入门教程四：URL相关模块用法分析
这篇文章主要介绍了nodejs入门教程四之URL相关模块用法,较为详细的分析了URL相关模块功能、方法与使用技巧,需要的朋友可以参考下
2017-04-04
npm run dev和npm run serve的区别小结
npm run serve和npm run dev是在开发阶段使用npm运行脚本的两种常见命令,本文就来介绍一下这两者的区别,具有一定的参考价值,感兴趣的可以了解一下
2024-03-03
node.js中跨域请求实现方法详解
这篇文章主要介绍了node.js中跨域请求实现方法详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-12-12
基于Node.js实现一键生成个性化二维码
这篇文章主要为大家详细介绍了如何使用Node.js、Jimp和QRCode库,结合一个简单的脚本,通过命令行命令来快速给二维码加上指定的背景,打造更有个性化的二维码,感兴趣的可以了解下
2024-03-03
node.js中的fs.fchmodSync方法使用说明
这篇文章主要介绍了node.js中的fs.fchmodSync方法使用说明,本文介绍了fs.fchmodSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
node.js中的fs.mkdir方法使用说明
这篇文章主要介绍了node.js中的fs.mkdir方法使用说明,本文介绍了fs.mkdir方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12