前端連接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)對(duì)點(diǎn)連接，也能通過它連接到 TCP 服務(wù)。不過，這種方法相對(duì)復(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 請(qǐng)求，服務(wù)器響應(yīng)后將 HTTP 連接升級(jí)為 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é)議采用請(qǐng)求 - 響應(yīng)模式，即客戶端發(fā)送請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求。
- WebSocket：強(qiáng)調(diào)實(shí)時(shí)雙向通信，服務(wù)器可以主動(dòng)向客戶端推送數(shù)據(jù)，無需客戶端發(fā)起請(qǐng)求，適用于實(shí)時(shí)性要求高的場景。
5. 應(yīng)用場景
- TCP：適用于對(duì)數(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ì)的，它們?cè)诓煌膶用婧蛨鼍跋掳l(fā)揮著作用。
總結(jié)
到此這篇關(guān)于前端連接tcp服務(wù)接收數(shù)據(jù)的文章就介紹到這了,更多相關(guān)前端連接tcp服務(wù)接收數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
node.js cookie-parser之parser.js
這篇文章主要介紹node.js cookie-parser之parser.js，講解的比較詳細(xì)，需要的朋友可以參考下。2016-06-06
nodejs基于WS模塊實(shí)現(xiàn)WebSocket聊天功能的方法
這篇文章主要介紹了nodejs基于WS模塊實(shí)現(xiàn)WebSocket聊天功能的方法,結(jié)合實(shí)例形式分析了nodejs使用WS模塊進(jìn)行WebSocket通信實(shí)現(xiàn)聊天功能的具體操作技巧,需要的朋友可以參考下2018-01-01
node.js根據(jù)不同請(qǐng)求路徑返回不同數(shù)據(jù)詳解流程
本篇文章介紹了我在開發(fā)過程中發(fā)現(xiàn)的一個(gè)小問題，就是node.js如何能夠根據(jù)不同的請(qǐng)求路徑來返回得到不同數(shù)據(jù)，通讀本篇對(duì)大家的學(xué)習(xí)或工作具有一定的價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Node.js之readline模塊的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了nodejs入門教程四之URL相關(guān)模塊用法,較為詳細(xì)的分析了URL相關(guān)模塊功能、方法與使用技巧,需要的朋友可以參考下2017-04-04
npm run dev和npm run serve的區(qū)別小結(jié)
npm run serve和npm run dev是在開發(fā)階段使用npm運(yùn)行腳本的兩種常見命令,本文就來介紹一下這兩者的區(qū)別,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
node.js中跨域請(qǐng)求實(shí)現(xiàn)方法詳解
這篇文章主要介紹了node.js中跨域請(qǐng)求實(shí)現(xiàn)方法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
基于Node.js實(shí)現(xiàn)一鍵生成個(gè)性化二維碼
這篇文章主要為大家詳細(xì)介紹了如何使用Node.js、Jimp和QRCode庫,結(jié)合一個(gè)簡單的腳本,通過命令行命令來快速給二維碼加上指定的背景,打造更有個(gè)性化的二維碼,感興趣的可以了解下2024-03-03
這篇文章主要介紹了node.js中的fs.fchmodSync方法使用說明,本文介紹了fs.fchmodSync的方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了node.js中的fs.mkdir方法使用說明,本文介紹了fs.mkdir方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12