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

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

article 2025/10/13 14:42:01

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

利用 WebSocket 作为中间桥梁

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

实现步骤
  1. 搭建 WebSocket 服务器：这个服务器负责与 TCP 服务建立连接，同时接收来自前端的 WebSocket 连接。可以使用 Node.js 的 ws 库来实现。
  2. 前端使用 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 服务，接收数据

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

编程日记 2025/9/20 2:27:48

STM32之DHT11温湿度传感器---附代码

DHT11简介 DHT11的供电电压为 3&#xff0d;5.5V。 传感器上电后&#xff0c;要等待 1s 以越过不稳定状态在此期间无需发送任何指令。 电源引脚&#xff08;VDD&#xff0c;GND&#xff09;之间可增加一个100nF 的电容&#xff0c;用以去耦滤波。 DATA 用于微处理器与DHT11之间…...

编程日记 2025/10/10 11:54:24

工业相机——镜头篇【机器视觉，图像采集系统，成像原理，光学系统，成像光路，镜头光圈，镜头景深，远心镜头，分辨率，MTF曲线，焦距计算 ，子午弧矢】

文章目录 1 机器视觉&#xff0c;图像采集系统2 相机镜头&#xff0c;属于一种光学系统3 常规镜头 成像光路4 镜头光圈5 镜头的景深6 远心镜头 及 成像原理7 远心镜头种类 及 应用场景8 镜头分辨率10 镜头的对比度11 镜头的MTF曲线12 镜头的焦距 计算13 子午弧矢 图解 反差 工业…...

编程日记 2025/10/12 1:48:28

如何在Spring Boot中禁用Actuator端点安全性

在 Spring Boot 应用中&#xff0c;Spring Boot Actuator 提供了一系列用于监控和管理应用的端点&#xff08;如 /actuator/health、/actuator/metrics&#xff09;&#xff0c;这些端点默认可能受到 Spring Security 的保护&#xff0c;要求身份验证或授权。然而&#xff0c;在…...

编程日记 2025/8/4 23:37:41

第48讲：空间大数据与智慧农业——时空大数据分析与农业物联网的融合实践

目录 🧠 一、什么是空间大数据？ 📡 二、农业物联网：数据采集的神经末梢 🔁 三、融合应用：空间大数据 + 农业IoT = 决策大脑 1. 精准灌溉管理 2. 时空病虫害预警 3. 农业碳监测与生态评估 💡 四、技术实践案例：农田干旱预警系统 📌 场景设定： 🛠 数据…...

编程日记 2025/10/7 20:19:50

openwrt查询网关的命令

方法一&#xff1a;route -n 方法二&#xff1a;ip route show...

编程日记 2025/9/29 9:51:10

华为OD机试真题——查找接口成功率最优时间段（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C、GO六种语言的最佳实现方式&#xff1b; 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析&#xff1b; 本文收录于专栏&#xff1a;《2025华为OD真题目录…...

编程日记 2025/10/5 3:37:25

SiamMask原理详解：从SiamFC到SiamRPN++，再到多任务分支设计

SiamMask原理详解&#xff1a;从SiamFC到SiamRPN&#xff0c;再到多任务分支设计 一、引言二、SiamFC&#xff1a;目标跟踪的奠基者1. SiamFC的结构2. SiamFC的局限性 三、SiamRPN&#xff1a;引入Anchor机制的改进1. SiamRPN的创新2. SiamRPN的进一步优化 四、SiamMask&#x…...

编程日记 2025/9/24 11:27:53

Gradle安装与配置国内镜像源指南

一、Gradle简介与安装准备 Gradle是一款基于JVM的现代化构建工具&#xff0c;广泛应用于Java、Kotlin、Android等项目的构建自动化。相比传统的Maven和Ant&#xff0c;Gradle采用Groovy或Kotlin DSL作为构建脚本语言&#xff0c;具有配置灵活、性能优越等特点。 在开始安装前…...

编程日记 2025/10/4 8:13:23

【“星睿O6”AI PC开发套件评测】开箱+刷机+基础环境配置

开箱 很荣幸可以参与“星睿O6”AI PC开发套件评测&#xff0c;话不多说先看开箱美图&#xff0c;板子的包装还是蛮惊艳的。 基础开发环境配置 刷机 刷机参考这里的文档快速上手即可&#xff0c;笔者同时验证过使用USB和使用NVMe硬盘盒直接在硬盘上刷机&#xff0c;操作下来建…...

编程日记 2025/10/7 12:57:38

力扣面试150题--环形链表和两数相加

Day 32 题目描述 思路 采取快慢指针 /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public boolean hasCycle(ListNod…...

编程日记 2025/10/11 23:30:35

Dapper的数据库操作备忘

Dapper是很好的C#生态的ORM工具 获取单条记录 var row conn.QueryFirstOrDefault("select abc as cc"); if (row null) return; string priField row.cc; //直接访问字段根据动态的字段名获取值,则需要先转为字典接口 var dict (IDictionary<string, objec…...

编程日记 2025/5/28 8:47:26

STM32 TIM输入捕获

一、输入捕获简介 IC&#xff08;Input Capture&#xff09;输入捕获输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数每个高级定时器和通用定…...

编程日记 2025/9/29 9:51:11

python项目实战-后端个人博客系统

本文分享一个基于 Flask 框架开发的个人博客系统后端项目&#xff0c;涵盖用户注册登录、文章发布、分类管理、评论功能等核心模块。适合初学者学习和中小型博客系统开发。 一、项目结构 blog │ app.py │ forms.py │ models.py │ ├───instance │ blog.d…...

编程日记 2025/10/11 9:17:33

白鲸开源与亚马逊云科技携手推动AI-Ready数据架构创新

在昨日举办的2025亚马逊云科技合作伙伴峰会圆桌论坛上&#xff0c;白鲸开源创始人兼CEO郭炜作为嘉宾&#xff0c;与亚马逊云科技及其他行业领袖共同探讨了“AI-Ready的数据架构&#xff1a;ISV如何构建面向生成式AI的强大数据基座”这一重要话题。此次论坛由亚马逊云科技大中华…...

编程日记 2025/10/8 13:23:22

【目标检测】目标检测综述 目标检测技巧

I. 目标检测中标注的关键作用 A. 目标检测数据标注的定义 目标检测是计算机视觉领域的一项基础且核心的任务&#xff0c;其目标是在图像或视频中准确识别并定位出预定义类别的目标实例 1。数据标注&#xff0c;在目标检测的语境下&#xff0c;指的是为原始视觉数据&#xff0…...

编程日记 2025/7/16 0:21:21

[AI技术(二)]JSONRPC协议MCPRAGAgent

Agent概述（一） AI技术基础（一） JSON-RPC 2.0 协议详解 JSON-RPC 2.0 是一种基于 JSON 的轻量级远程过程调用（RPC）协议，旨在简化跨语言、跨平台的远程通信。以下从协议特性、核心结构、错误处理、批量请求等角度进行详细解析： 一、协议概述 1. 设计原则 • 简单性：…...

编程日记 2025/9/27 11:20:39

探秘LLM推理模型：hidden states中藏着的self verification的“钥匙”

推理模型在数学和逻辑推理等任务中表现出色&#xff0c;但常出现过度推理的情况。本文研究发现&#xff0c;推理模型的隐藏状态编码了答案正确性信息&#xff0c;利用这一信息可提升推理效率。想知道具体如何实现吗&#xff1f;快来一起来了解吧&#xff01; 论文标题 Reasoni…...

编程日记 2025/10/7 12:07:21

大数据开发环境的安装，配置（Hadoop）

1. 三台linux服务器的安装 1. 安装VMware VMware虚拟机软件是一个“虚拟PC”软件&#xff0c;它使你可以在一台机器上同时运行二个或更多Windows、DOS、LINUX系统。与“多启动”系统相比&#xff0c;VMWare采用了完全不同的概念。 我们可以通过VMware来安装我们的linux虚拟机…...

编程日记 2025/10/11 5:37:40

【GCC bug】libstdc++.so.6: version `GLIBCXX_3.4.29‘ not found

在 conda 环境安装 gcc/gxx 之后&#xff0c;运行开始遇到了以下的报错 File "/mnt/data/home/xxxx/miniforge3/envs/GAGAvatar/lib/python3.12/site-packages/google/protobuf/internal/wire_format.py", line 13, in <module>from google.protobuf import de…...

编程日记 2025/10/5 0:21:54

Android killPackageProcessesLSP 源码分析

该方法用于终止指定包名/用户ID/应用ID下符合条件的应用进程&#xff0c;涉及多进程管理、资源冻结、进程清理及优先级更新等操作。核心流程分为进程筛选、资源冻结、进程终止与资源恢复三个阶段。 /*** 从已排序的进程列表中&#xff0c;提取从指定起始索引 startIdx 开始的连…...

编程日记 2025/9/21 13:26:25

驱动开发硬核特训 · Day 16：字符设备驱动模型与实战注册流程

&#x1f3a5; 视频教程请关注 B 站&#xff1a;“嵌入式 Jerry” 一、为什么要学习字符设备驱动&#xff1f; 在 Linux 驱动开发中&#xff0c;字符设备&#xff08;Character Device&#xff09;驱动 是最基础也是最常见的一类驱动类型。很多设备&#xff08;如 LED、按键、…...

编程日记 2025/10/9 16:53:32

CDN加速http请求

一、CDN加速定义 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是通过全球分布式节点服务器缓存网站内容&#xff0c;使用户就近获取数据的技术。其核心目标是缩短用户与内容之间的物理距离&#xff0c;解决网络拥塞、带宽不足等问题&#xff…...

编程日记 2025/9/14 12:51:41

SpringCloud微服务架构设计与实践 - 面试实战

SpringCloud微服务架构设计与实践 - 面试实战 第一轮提问 面试官&#xff1a;马架构&#xff0c;请问在SpringCloud微服务架构中&#xff0c;如何实现服务注册与发现&#xff1f; 马架构&#xff1a;在SpringCloud中&#xff0c;Eureka是常用的服务注册与发现组件。服务提供…...

编程日记 2025/9/22 21:46:32

关于位运算的一些小记

目录 1.判断一个整数是不是2的幂 2.判断一个整数是不是3的幂 3.大于n的最小的2次幂的数 4.交换两个数 5.找到1-n中缺失的数字 6.判断数组中2个出现次数为奇数的数 6.求给定范围内所有数字&的结果 7. 求出现次数少于m的数 1.判断一个整数是不是2的幂 提取出二进制里最…...

编程日记 2025/8/5 23:59:03

Virtuoso ADE采用Spectre仿真中出现MOS管最小长宽比满足要求依然报错的情况解决方法

在ADE仿真中错误问题如下&#xff1a; ERROR (CMI-2440): "xxx.scs" 46338: I2.M1: The length, width, or area of the instance does not fit the given lmax-lmin, wmax-wmin, or areamax-areamin range for any model in the I2.M3.nch_hvt group. The channel w…...

编程日记 2025/9/29 14:02:27

图论---朴素Prim（稠密图）

O( n ^2 ) 题目通常会提示数据范围&#xff1a; 若 V ≤ 500&#xff0c;两种方法均可&#xff08;朴素Prim更稳&#xff09;。 若 V ≤ 1e5&#xff0c;必须用优先队列Prim vector 存图。 // 最小生成树 —朴素Prim #include<cstring> #include<iostream> #i…...

编程日记 2025/7/19 16:17:56

Java知识日常巩固（四）

什么是 Java 中的自动装箱和拆箱? 在Java中，自动装箱（Autoboxing）和拆箱（Unboxing）是Java 5引入的特性，它们允许基本数据类型（如 int、double 等）和它们对应的包装类（如 Integer、Double 等）之间进行自动转换。 自动装箱是指将基本数据类型的值自动…...

编程日记 2025/9/17 4:04:19

go.mod介绍

在 Go 项目中&#xff0c;.mod 文件&#xff08;全称 go.mod&#xff09;是 Go 语言模块&#xff08;Module&#xff09;系统的核心配置文件&#xff0c;用于定义和管理项目的依赖关系、模块名称及兼容性规则。以下是其核心作用与结构的详细说明&#xff1a; 一、go.mod 文件的…...

编程日记 2025/7/16 4:04:35

大模型应用开发之LLM入门

一、大模型概述 1、大模型概念 LLM是指用有大量参数的大型预训练语言模型&#xff0c;在解决各种自然语言处理任务方面表现出强大的能力&#xff0c;甚至可以展现出一些小规模语言模型所不具备的特殊能力 2、语言模型language model 语言建模旨在对词序列的生成概率进行建模…...

编程日记 2025/10/6 22:46:35