前端工程师的奇妙之旅:一文搞懂如何使用 Node.js 进行 TCP 网络通信

开篇语

哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云/阿里云/华为云/51CTO;欢迎大家常来逛逛

  今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一个人虽可以走的更快,但一群人可以走的更远。

  我是一名后端开发爱好者,工作日常接触到最多的就是Java语言啦,所以我都尽量抽业余时间把自己所学到所会的,通过文章的形式进行输出,希望以这种方式帮助到更多的初学者或者想入门的小伙伴们,同时也能对自己的技术进行沉淀,加以复盘,查缺补漏。

小伙伴们在批阅的过程中,如果觉得文章不错,欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持!

前言

  回顾我前几年开发前段项目,有这样一段经历,你是否也感觉自己像一只躺在沙滩上的小螃蟹,看着远方的海浪拍打着后端的大门?今天,我们要做的,就是趁着 Node.js 这艘坚固的小船,勇敢地涉足那片神秘的海域——TCP 网络通信!放心,我会用通俗易懂的语言,带你一步步走进这个海域,既不深奥,也绝不无聊,好吧,所以,咱们开始吧。

目录

  1. 什么是 TCP 网络通信?
  2. 为什么使用 Node.js 进行 TCP 网络通信?
  3. 快速搭建一个 TCP 服务与客户端
  4. 实际案例:实现一个简单的聊天应用
  5. 延伸:如何优化和扩展 TCP 通信能力
  6. 小结:搞懂 TCP,向全栈进化迈进一步!

什么是 TCP 网络通信?

  TCP(Transmission Control Protocol)是什么?简单点说,它是计算机之间打电话的“规矩”。不像 UDP 那样随便喊几句,TCP 更讲究“握手”与“确认”。

  你可以把它想象成这样:两台计算机在一条线(Socket)上交流时,要先确认“喂,你在线吗?我有东西要跟你说”,然后你说“好,来吧”,之后才进入正式的“谈话”。

如下是TCP的连接与终止示意图:

特性简述

  • 可靠性:TCP 确保数据不会丢失,顺序也不会乱。
  • 流控制:发送端不会淹没接收端,彼此步调一致。
  • 双向通信:两台设备可以随时互相发送消息。

为什么使用 Node.js 进行 TCP 网络通信?

  说实话,Node.js 是前端开发通向全栈进阶的必经之路。它使用 V8 引擎,异步 I/O 模型,使得构建高性能网络服务变得相当简单。而它的 net 模块更是提供了开箱即用的工具来实现 TCP 通信!

特别适合的场景

  • 聊天应用:如多人实时聊天室。
  • 实时监控:设备或数据的双向流。
  • 游戏开发:如服务器与客户端之间的数据同步。

  简而言之,Node.js 是构建轻量级 TCP 服务的好手,我们只需几行代码,就能快速上手。

快速搭建一个 TCP 服务与客户端

  下面,我们直接来实战一波,不用担心会学不会敲不明白,代码量少得可怜,但却能跑出令人惊艳的效果。 不信往下看:

服务端代码

示例代码
// server.js
const net = require('net');

const server = net.createServer((socket) => {
    console.log('🌟 客户端已连接');
    
    socket.on('data', (data) => {
        console.log(`💬 收到消息: ${data}`);
        socket.write(`👋 你好,客户端!你发来的是: ${data}`);
    });

    socket.on('end', () => {
        console.log('🚪 客户端断开连接');
    });
});

server.listen(8080, () => {
    console.log('🚀 TCP 服务已启动,监听端口 8080');
});
代码解析

  针对如上示例代码,这里我给大家详细的代码剖析下,以便于帮助大家理解的更为透彻,帮助大家早日掌握。这段代码通过 Node.js 的 net 模块创建了一个简单的 TCP 服务端,能够接收客户端消息并响应。以下我会逐行进行代码解析:

  1. 模块引入

    const net = require('net');
    
    • 引入 Node.js 内置的 net 模块,用于创建 TCP 服务器和客户端。
  2. 创建 TCP 服务器

    const server = net.createServer((socket) => { ... });
    
    • 使用 net.createServer 创建一个 TCP 服务器。
    • 每当有客户端连接时,回调函数会被触发,socket 参数代表与客户端的通信通道。
  3. 处理客户端连接

    console.log('🌟 客户端已连接');
    
    • 当有客户端连接时,打印一条确认消息。
  4. 接收客户端数据

    socket.on('data', (data) => { ... });
    
    • socket.on('data') 监听从客户端发送的数据。
    • data 参数是客户端发送的消息,通常为 Buffer 格式。
    • console.log 打印收到的消息内容。
  5. 向客户端发送响应

    socket.write(`👋 你好,客户端!你发来的是: ${data}`);
    
    • 使用 socket.write 方法将数据发送回客户端。
    • 响应内容可以包含接收到的客户端数据(此处是 data)。
  6. 监听客户端断开连接

    socket.on('end', () => { ... });
    
    • socket.on('end') 监听客户端主动断开连接事件。
    • 打印一条消息以提示客户端已断开。
  7. 启动服务器并监听端口

    server.listen(8080, () => { ... });
    
    • 启动服务器并监听 8080 端口。
    • 成功后,执行回调函数,打印服务启动的确认信息。

功能说明:

  • 服务器启动:运行 server.js 后,服务监听端口 8080,等待客户端连接。
  • 客户端交互
    • 客户端连接后,发送消息,服务器会打印收到的消息并回复。
    • 客户端断开时,服务器打印断开信息。
  • 简单应用场景:可用于测试 TCP 通信、实时数据交换或构建更复杂的聊天服务器。
示例运行结果
  1. 服务器启动
   🚀 TCP 服务已启动,监听端口 8080
  1. 客户端连接
   🌟 客户端已连接
  1. 收到客户端消息
   💬 收到消息: Hello Server
  1. 客户端断开
   🚪 客户端断开连接

  大家可以在自己的本地测试一下,还是非常有入门意义的。

客户端代码

代码示例
// client.js
const net = require('net');

const client = net.createConnection({ port: 8080 }, () => {
    console.log('✨ 已连接到服务器');
    client.write('你好,服务端!');
});

client.on('data', (data) => {
    console.log(`🛎️ 收到来自服务端的消息: ${data}`);
    client.end();
});

client.on('end', () => {
    console.log('📴 断开与服务器的连接');
});

  运行这两段代码,你会发现服务端和客户端能完美对话!是不是超级简单?

代码解析

  针对如上示例代码,这里我给大家详细的代码剖析下,以便于帮助大家理解的更为透彻,帮助大家早日掌握。这段代码实现了一个通过 Node.js net 模块创建的 TCP 客户端,可以连接到 TCP 服务器,发送消息,并接收服务器的响应。以下为大家进行代码逐行解析:

  1. 模块引入
const net = require('net');
  • 引入 Node.js 内置的 net 模块,用于创建 TCP 连接。
  1. 创建客户端连接
const client = net.createConnection({ port: 8080 }, () => { ... });
  • 使用 net.createConnection 创建一个 TCP 客户端连接到服务器。
  • 配置选项:
    • { port: 8080 }:指定连接的服务器端口号(此处是 8080)。
  • 第二个参数是连接建立后调用的回调函数。
  1. 成功连接服务器时的回调
console.log('✨ 已连接到服务器');
client.write('你好,服务端!');
  • console.log:打印一条消息确认已成功连接到服务器。
  • client.write:通过 TCP 连接向服务器发送字符串消息 "你好,服务端!"
  1. 监听服务器返回的数据
client.on('data', (data) => { ... });
  • client.on('data'):监听从服务器接收到的数据。
  • 回调内容
    • data 参数是从服务器返回的数据,通常为 Buffer 格式。
    • 将数据打印到控制台,并调用 client.end() 主动断开连接。
  1. 监听连接结束
client.on('end', () => { ... });
  • client.on('end'):监听客户端与服务器的连接关闭事件。
  • 打印消息提示连接已断开。
    功能说明
  • 启动客户端:运行 client.js,自动连接到端口 8080 的服务器。
  • 发送消息:连接建立后,客户端发送 "你好,服务端!"
  • 接收响应:打印服务器返回的消息,并主动断开连接。
  • 断开提示:断开后打印通知。
客户端和服务器交互流程
  1. 启动服务器(运行 server.js):
   🚀 TCP 服务已启动,监听端口 8080
  1. 启动客户端(运行 client.js):

客户端输出:

   ✨ 已连接到服务器

服务端输出:

   🌟 客户端已连接
   💬 收到消息: 你好,服务端!
  1. 服务器回复并断开连接

客户端输出:

   🛎️ 收到来自服务端的消息: 👋 你好,客户端!你发来的是: 你好,服务端!
   📴 断开与服务器的连接

服务端输出:

   🚪 客户端断开连接

实际案例:实现一个简单的聊天应用

  我们再往前一步,做一个简单的多人聊天系统吧! 这个点子怎么样,大家是不是很感兴趣呢?那么我们便直接开始吧。

设计思路

  1. 服务端负责接收每个客户端的连接。
  2. 将某个客户端的消息广播给所有其他客户端。

服务端代码

// chat-server.js
const net = require('net');
const clients = [];

const server = net.createServer((socket) => {
    clients.push(socket);
    console.log('🌟 新用户加入聊天!');
    
    socket.on('data', (data) => {
        console.log(`💬 广播消息: ${data}`);
        clients.forEach(client => {
            if (client !== socket) {
                client.write(data);
            }
        });
    });

    socket.on('end', () => {
        console.log('🚪 用户退出聊天');
        clients.splice(clients.indexOf(socket), 1);
    });
});

server.listen(8080, () => {
    console.log('🚀 聊天服务启动,监听端口 8080');
});

代码解析:

针对如上示例代码,这里我给大家详细的代码剖析下,以便于帮助大家理解的更为透彻,帮助大家早日掌握。这段代码实现了一个简单的基于 TCP 的多人聊天服务器,功能包括用户加入、广播消息和退出通知。以下是代码解析:

  • 引入模块与存储客户端
    使用 net 模块创建服务器,clients 数组存储所有已连接的客户端。

  • 创建 TCP 服务器

    const server = net.createServer((socket) => { ... });
    

    每当有新客户端连接时,回调函数被触发,将客户端的 socket 添加到 clients 数组中。

  • 处理新用户连接

    clients.push(socket);
    console.log('🌟 新用户加入聊天!');
    

    新连接的客户端会被添加到 clients 列表,服务器打印提示信息。

  • 广播消息

    socket.on('data', (data) => {
        clients.forEach(client => {
            if (client !== socket) {
                client.write(data);
            }
        });
    });
    
    • 当某个客户端发送消息时,服务器接收到 data 并广播给其他所有客户端(除了消息发送者)。
  • 用户断开连接

    socket.on('end', () => {
        clients.splice(clients.indexOf(socket), 1);
        console.log('🚪 用户退出聊天');
    });
    
    • 当客户端断开连接时,从 clients 列表中移除该客户端。
    • 打印退出通知。
  • 启动服务器

    server.listen(8080, () => {
        console.log('🚀 聊天服务启动,监听端口 8080');
    });
    

    服务器监听 8080 端口,等待客户端连接。

客户端代码

// chat-client.js
const net = require('net');
const readline = require('readline');

const client = net.createConnection({ port: 8080 }, () => {
    console.log('✨ 已加入聊天,尽情发言吧!');
});

client.on('data', (data) => {
    console.log(`🛎️ 收到消息: ${data}`);
});

client.on('end', () => {
    console.log('📴 聊天已断开');
});

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.on('line', (input) => {
    client.write(input);
});

  运行后,打开多个客户端终端,就可以实时互相聊天了!这个大家真的可以去尝试一下,如果有看不懂的同学,也可以看如下的代码解析过程,把它学透,吃透,慢慢掌握即可。

代码解析:

  针对如上示例代码,这里我给大家详细的代码剖析下,以便于帮助大家理解的更为透彻,帮助大家早日掌握。这段代码实现了一个 TCP 聊天客户端,允许用户与服务器及其他客户端进行实时交互。以下是解析:

  • 连接到服务器

    const client = net.createConnection({ port: 8080 }, () => {
        console.log('✨ 已加入聊天,尽情发言吧!');
    });
    

    使用 net.createConnection 连接到服务器的 8080 端口。连接成功后打印提示信息。

  • 接收消息

    client.on('data', (data) => {
        console.log(`🛎️ 收到消息: ${data}`);
    });
    

    当从服务器接收到消息时,触发 data 事件,消息会打印到控制台。

  • 监听断开连接

    client.on('end', () => {
        console.log('📴 聊天已断开');
    });
    

    当服务器断开连接时,触发 end 事件,提示用户聊天已结束。

  • 用户输入

    const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
    });
    

    使用 readline 模块捕获用户输入。

  • 发送消息

    rl.on('line', (input) => {
        client.write(input);
    });
    

    监听用户输入的每一行文字,使用 client.write 方法将其发送到服务器。

延伸:如何优化和扩展 TCP 通信能力

TCP 网络通信是强大的,但为了让它更可靠、可扩展,我们还需要注意以下几点:

  1. 错误处理:确保服务端和客户端能够优雅地处理异常。
  2. 协议设计:如为数据添加标识符,避免消息粘包问题。
  3. 性能优化:对高并发情况进行压测和优化,如使用负载均衡。
  4. 数据加密:为通信内容添加加密机制,提升安全性。

小结

通过这篇文章,我们用最简单的方式了解了:

  1. TCP 是如何工作的。
  2. 如何用 Node.js 实现基本的 TCP 服务与客户端。
  3. 如何扩展到多人聊天应用,并进行优化思考。

  TCP 是强大且灵活的,而 Node.js 的异步特性让它与之完美结合。如果你学会了这些,下次再遇到前端与后端的深海鸿沟,不妨勇敢地涉足!👩‍💻

文末

好啦,以上就是我这期的全部内容,如果有任何疑问,欢迎下方留言哦,咱们下期见。

… …

学习不分先后,知识不分多少;事无巨细,当以虚心求教;三人行,必有我师焉!!!

wished for you successed !!!


⭐️若喜欢我,就请关注我叭。

⭐️若对您有用,就请点赞叭。

⭐️若有疑问,就请评论留言告诉我叭。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值