快捷導(dǎo)航

前端連接tcp服務(wù)接收數(shù)據(jù)的實(shí)現(xiàn)步驟(附代碼)

更新時(shí)間：2025年07月11日 09:42:39 作者：三思而后行，慎承諾

TCP 協(xié)議是面向連接的通信協(xié)議,即傳輸數(shù)據(jù)之前,在發(fā)送端和接收端建立邏輯連接,再傳輸數(shù)據(jù),這篇文章主要介紹了前端連接tcp服務(wù)接收數(shù)據(jù)的實(shí)現(xiàn)步驟,需要的朋友可以參考下

前言

在傳統(tǒng)的瀏覽器前端環(huán)境中，由于瀏覽器的同源策略和安全限制，無法直接建立 TCP 連接。不過，可以通過 WebSocket 或者使用 WebRTC 來間接實(shí)現(xiàn)與 TCP 服務(wù)的通信，另外在 Node.js 環(huán)境中可以直接使用 net 模塊建立 TCP 連接。下面分別介紹這些方法：

利用 WebSocket 作為中間橋梁

WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議，可借助 WebSocket 服務(wù)器作為中間層來間接連接 TCP 服務(wù)。

實(shí)現(xiàn)步驟

搭建 WebSocket 服務(wù)器：這個(gè)服務(wù)器負(fù)責(zé)與 TCP 服務(wù)建立連接，同時(shí)接收來自前端的 WebSocket 連接。可以使用 Node.js 的 ws 庫來實(shí)現(xiàn)。
前端使用 WebSocket 連接：前端頁面通過 WebSocket 與 WebSocket 服務(wù)器通信。

示例代碼

WebSocket 服務(wù)器（Node.js）

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

// 創(chuàng)建 WebSocket 服務(wù)器
const wss = new WebSocket.Server({ port: 8081 });

// 連接到 TCP 服務(wù)
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 接收數(shù)據(jù)并發(fā)送到 TCP 服務(wù)
    ws.on('message', (message) => {
        tcpClient.write(message);
    });

    // 從 TCP 服務(wù)接收數(shù)據(jù)并發(fā)送到 WebSocket 客戶端
    tcpClient.on('data', (data) => {
        ws.send(data.toString());
    });

    // 處理連接關(guān)閉
    ws.on('close', () => {
        console.log('Client disconnected via WebSocket');
    });
});

// 處理 TCP 連接錯(cuò)誤
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>

運(yùn)用 WebRTC 進(jìn)行連接

WebRTC 可用于在瀏覽器之間建立點(diǎn)對點(diǎn)連接，也能通過它連接到 TCP 服務(wù)。不過，這種方法相對復(fù)雜，需要使用信令服務(wù)器來協(xié)調(diào)連接。

在 Node.js 環(huán)境中直接連接

如果前端開發(fā)是在 Node.js 環(huán)境下進(jìn)行，那么可以使用 net 模塊直接建立 TCP 連接。

示例代碼

const net = require('net');

// 創(chuàng)建 TCP 客戶端
const client = net.createConnection({ port: 8888, host: 'localhost' }, () => {
    console.log('Connected to TCP server');
    // 發(fā)送數(shù)據(jù)到 TCP 服務(wù)
    client.write('Hello, TCP server!');
});

// 接收 TCP 服務(wù)的數(shù)據(jù)
client.on('data', (data) => {
    console.log(`Received from TCP server: ${data.toString()}`);
    // 關(guān)閉連接
    client.end();
});

// 處理連接關(guān)閉
client.on('end', () => {
    console.log('Disconnected from TCP server');
});

// 處理連接錯(cuò)誤
client.on('error', (err) => {
    console.error('TCP connection error:', err);
});

tcp和websocket的區(qū)別和聯(lián)系

TCP（傳輸控制協(xié)議）和WebSocket都是用于網(wǎng)絡(luò)通信的協(xié)議，它們存在以下區(qū)別和聯(lián)系：

區(qū)別

1. 協(xié)議層次

TCP：處于傳輸層，負(fù)責(zé)提供可靠的、面向連接的字節(jié)流傳輸服務(wù)。它不關(guān)心應(yīng)用層的數(shù)據(jù)內(nèi)容，只確保數(shù)據(jù)準(zhǔn)確無誤、按序到達(dá)目標(biāo)。
WebSocket：屬于應(yīng)用層協(xié)議，建立在 TCP 之上，專注于為 Web 應(yīng)用提供實(shí)時(shí)雙向通信功能。

2. 連接方式

TCP：采用三次握手建立連接，四次揮手關(guān)閉連接。在數(shù)據(jù)傳輸前，客戶端和服務(wù)器需要先建立連接，之后才能進(jìn)行數(shù)據(jù)傳輸。
WebSocket：基于 HTTP 協(xié)議進(jìn)行握手，客戶端發(fā)送特殊的 HTTP 請求，服務(wù)器響應(yīng)后將 HTTP 連接升級為 WebSocket 連接。一旦連接建立，就可以在該連接上進(jìn)行雙向數(shù)據(jù)傳輸。

3. 數(shù)據(jù)傳輸特點(diǎn)

TCP：以字節(jié)流形式傳輸數(shù)據(jù)，沒有明顯的消息邊界，應(yīng)用層需要自行處理數(shù)據(jù)的分割和重組。
WebSocket：以幀為單位傳輸數(shù)據(jù)，每個(gè)幀包含消息類型、長度等信息，有明確的消息邊界，便于消息解析。

4. 通信模式

TCP：雖然本身支持全雙工通信，但在實(shí)際應(yīng)用中，很多基于 TCP 的協(xié)議采用請求 - 響應(yīng)模式，即客戶端發(fā)送請求，服務(wù)器響應(yīng)請求。
WebSocket：強(qiáng)調(diào)實(shí)時(shí)雙向通信，服務(wù)器可以主動(dòng)向客戶端推送數(shù)據(jù)，無需客戶端發(fā)起請求，適用于實(shí)時(shí)性要求高的場景。

5. 應(yīng)用場景

TCP：適用于對數(shù)據(jù)傳輸可靠性要求高、需要大量數(shù)據(jù)傳輸?shù)膱鼍?，如文件傳輸、電子郵件、數(shù)據(jù)庫連接等。
WebSocket：主要用于實(shí)時(shí)性要求高、需要雙向通信的場景，如在線聊天、實(shí)時(shí)游戲、股票行情推送、實(shí)時(shí)監(jiān)控等。

6. 瀏覽器支持

TCP：由于瀏覽器的安全限制，不能在瀏覽器中直接使用 TCP 連接。
WebSocket：現(xiàn)代瀏覽器廣泛支持 WebSocket 協(xié)議，可以在瀏覽器中直接使用。

聯(lián)系

TCP 是 WebSocket 的基礎(chǔ)：WebSocket 協(xié)議依賴于 TCP 提供的可靠傳輸服務(wù)。WebSocket 連接建立在 TCP 連接之上，利用 TCP 的特性確保數(shù)據(jù)的可靠傳輸。
都用于網(wǎng)絡(luò)通信：TCP 和 WebSocket 都是為了實(shí)現(xiàn)網(wǎng)絡(luò)中不同節(jié)點(diǎn)之間的通信而設(shè)計(jì)的，它們在不同的層面和場景下發(fā)揮著作用。