网络编程懒人入门(十五)：外行也能读懂的网络硬件设备功能原理速成

Posted 2023-04-18 im中国人

本文是《网络编程懒人入门》系列文章的第15篇，本篇将继续以通俗易懂的文字，帮你无脑理解各种基础网络硬件设备的功能原理。

本文由黄工首先发表于strongerHuang公众号，原题“网络硬件的发展史”，本文有修订。

1、引言

本文是《网络编程懒人入门》系列文章的第15篇，本篇将继续以通俗易懂的文字，帮你无脑理解各种基础网络硬件设备的功能原理。

本文不罗列复杂、全面的计算机网络理论，目的是让阅读者脱离以往计算机理论专著的枯燥内容，在寓教于乐的语言文字中轻松快速的掌握这些知识，适合入门者，计网大佬和网络编程老油条们请略过。

学习交流：

- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》

- 开源IM框架源码：https://github.com/JackJiang2011/MobileIMSDK（备用地址点此）

（本文已同步发布于：http://www.52im.net/thread-4188-1-1.html）

2、如何连接个人计算机（PC）？

在发明网络之前，个人计算机之间是独立工作的，没有网卡、网线或协议栈，主要使用磁盘、CD 和其他东西来传输数据。

后来，网线出现了。

最小的网络单元由网线、网卡和协议栈组成：

• 1）网线起着物理介质的作用，以传输比特流 / 电信号；
• 2）网卡将转换数据（例如：它将计算机存储的数据转换为网线的比特流 / 电信号）；
• 3）协议栈作为一种通信语言，可以在通信过程中实现数据分析、地址寻址和流控制。

3、网线不够长怎么办？

如果终端之间的距离太远，一旦超过网线物理传输距离的上限，数据就会开始丢失。

中继器是物理层的设备，可以中继和放大信息以实现设备的远距离传输。

 

4、中继器端口不足怎么办？

中继器通常只有两个接口，这意味着如果网络中有三个以上的终端主机，则无法实现多个主机之间的直接数据通信。

集线器是一种多接口中继器，也是一个物理层设备。它可以中继和放大信息，从任何接口接收的数据都将被发送到所有其他接口。

5、如何有选择性的发送数据？

有人把网桥比喻成一个 “聪明” 的中继器。因为中继器只是对所接收的信号进行放大，然后直接发送到另一个端口连接的电缆上，主要用于扩展网络的物理连接范围。

而网桥除了可以扩展网络的物理连接范围外，还可以对 MAC 地址进行分区，隔离不同物理网段之间的碰撞（也就是隔离 “冲突域”）。

6、速度不够快怎么办？

交换机可以记录该终端主机的 MAC 地址，并生成一个 MAC 表。MAC 表相当于一个 “map”，交换机根据 MAC 表在主机之间转发数据流。

交换机基于网桥进行扩展和升级。

与网桥相比，交换机具有以下优点：

• 1）接口数量更密集（每个主机位于一个独立的冲突域中，带宽利用率大大提高）；
• 2）使用专用的 ASIC 硬件芯片进行高速转发；
• 3）VLAN 隔离（不仅可以隔离冲突域，还可以通过 VLAN 隔离广播域）。

交换机是一种局域网设备，通常用于局域网，不能实现远程广域网通信。

7、距离还不够怎么办？

世界上第一台路由器是由斯坦福大学的 Leonard Bossack 和 Santi Lerner 这对教师夫妇为斯坦福大学校园网络 (SUNet) 和思科公司发明的。

▲ 思科公司创始人Leonard Bossack 和 Santi Lerner 夫妇

路由器是一种基于 IP 寻址的网络层设备，利用路由表来实现数据转发。路由器主要用于连接不同的局域网以实现广播域隔离，也可以用于远程通信，如广域网连接。

诸如 IP 协议之类的逻辑寻址机制是实现不同类型局域网连接的关键。不同局域网的主机只要具有逻辑地址（IP 地址）和合理的逻辑地址规划（网段规划)，它们就可以通信。

路由器的诞生是互联网爆炸的主要原因，跨媒介、跨地域的网络集成已成为现实。

8、接线太麻烦怎么办？

无线 AP可以被视为具有无线功能的交换机 / 路由器。随着无线城市和移动办公的发展趋势，无线产品在网络中所占的比例正在增加。

根据部署方式的不同，可以分为胖 AP 和瘦 AP 解决方案。

1）在胖 AP 方案中，无线 AP 具有独立的操作系统，该操作系统可以独立调试无线热点的所有配置，类似于家用 Tp-link 产品。

2）在瘦 AP 方案中，无线 AP 仅具有无线信号传输功能，所有命令调试都集中在后台的 AC / 无线控制器上。

小型无线网络（家庭、小型企业）可以使用胖 AP 解决，而大型无线网络（无线城市、无线园区网络）则需要使用瘦 AP（AC + AP）解决。

9、不够安全怎么办？

防火墙是一种用于限制网络安全访问的网络安全产品，通常用于 Internet 的边缘，以防止外部黑客的攻击。

根据防火墙的技术特点，可以分为包过滤、应用代理和状态检测防火墙。根据产品形式，可以分为软件防火墙和硬件防火墙。

防火墙可视为具有安全功能的路由器。早期的防火墙在路由器的基础上增加了访问控制功能，因此在路由器上可以看到许多防火墙的功能，例如路由协议、访问控制列表、地址转换技术等。

防火墙和路由器可以同时存在于网络中。例如，防火墙可以放置在路由器之前或之后。在这种情况下，路由器侧重于地址转换和路由策略，而防火墙侧重于安全隔离等。

在防火墙的基础上，扩展出了 Web 防火墙、安全网关和入侵检测 / 入侵防御等安全产品。

10、网络拥塞怎么办？

网络中的流量控制设备主要分为：

• 1）上网行为管理；
• 2）负载均衡器 / 应用交付；
• 3）链路优化；
• ... ...

上网行为管理产品主要关注细粒度的区分和流量控制。

负载平衡 / 应用程序交付侧重于流量的负载平衡（根据流量特征、应用程序、地址等进行区分，然后分配到不同的链接和服务器）。

链接优化主要用于广域网等低速链路的边界，以使链路利用率最大化。

问题来了：组成一个网络需要多少种设备？

11、家庭 SOHO 网络

这是一个典型的家庭网络，它通过无线路由器提供 WiFi 热点访问，并提供路由器连接到外部网络。

12、小型企业网络

小型企业网络使用二层架构、单核拓扑，需要路由器、交换机和服务器。

13、园区网

最常见的园区网架构，如大中型企业网络 / 校园网络，采用接入汇聚核三层架构和双核组网。

根据网络需求，分为：

• 1）用户区；
• 2）内部服务区；
• 3）外部服务区；
• 4）管理区；
• 5）Internet 区；
• ... ...

它们通过核心交换机和防火墙连接并隔离。

互联网使用多出口连接，通过路由器实现拨号和 NAT，通过流量控制设备实现负载均衡 / 上网行为管理，通过防火墙实现安全隔离。

14、数据中心网络

上图是典型的大型第二层数据中心网络 / IDC 设计。

主要分为：

• 1）租户区（服务集群）；
• 2）Internet 区；
• 3）安全管理区域。

租户区：采用设备虚拟化和链路虚拟化技术，提高设备处理能力和链路承载能力，并将负载均衡器放置在服务器区域中，以合理有效的方式将流量分配给固定服务器。

Internet 出口区域：使用路由器执行 BGP 和地址反转，使用 IPS / anti-DDoS 设备进行大流量泛洪攻击，使用流量控制执行出口负载，并使用防火墙进行安全隔离。

安全管理区：通过防火墙安全访问，通过审计、日志、入侵检测、网络管理等产品对整个网络进行管理。

15、系列文章

本文是系列文章中的第15篇，本系列文章的大纲如下：

[1] 网络编程懒人入门(一)：快速理解网络通信协议（上篇）

[2] 网络编程懒人入门(二)：快速理解网络通信协议（下篇）

[3] 网络编程懒人入门(三)：快速理解TCP协议一篇就够

[4] 网络编程懒人入门(四)：快速理解TCP和UDP的差异

[5] 网络编程懒人入门(五)：快速理解为什么说UDP有时比TCP更有优势

[6] 网络编程懒人入门(六)：史上最通俗的集线器、交换机、路由器功能原理入门

[7] 网络编程懒人入门(七)：深入浅出，全面理解HTTP协议

[8] 网络编程懒人入门(八)：手把手教你写基于TCP的Socket长连接

[9] 网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？

[10] 网络编程懒人入门(十)：一泡尿的时间，快速读懂QUIC协议

[11] 网络编程懒人入门(十一)：一文读懂什么是IPv6

[12] 网络编程懒人入门(十二)：快速读懂Http/3协议，一篇就够！

[13] 网络编程懒人入门(十三)：一泡尿的时间，快速搞懂TCP和UDP的区别

[14] 网络编程懒人入门(十四)：到底什么是Socket？一文即懂！

[15] 网络编程懒人入门(十五)：外行也能读懂的网络硬件设备功能原理速成（* 本文)

16、参考资料

[1] 快速理解网络通信协议（上篇）

[2] 快速理解网络通信协议（下篇）

[3] 假如你来设计网络，会怎么做？

[4] 史上最通俗的集线器、交换机、路由器功能原理入门

[5] 面视必备，史上最通俗计算机网络分层详解

[6] 技术往事：改变世界的TCP/IP协议（珍贵多图、手机慎点）

[7] P2P技术详解(一)：NAT详解——详细原理、P2P简介

[8] 通俗讲解，有了IP地址，为何还要用MAC地址？

（本文已同步发布于：http://www.52im.net/thread-4188-1-1.html）

作者：Jack Jiang (点击作者姓名进入Github)
出处：http://www.52im.net/space-uid-1.html
交流：欢迎加入即时通讯开发交流群 215477170
讨论：http://www.52im.net/
Jack Jiang同时是【原创Java Swing外观工程BeautyEye】和【轻量级开源移动端即时通讯框架MobileIMSDK】的作者，可前往下载交流。
本博文 欢迎转载，转载请注明出处（也可前往 我的52im.net 找到我）。

没学过线代也能读懂的CSS3 matrix

编者按：本文来自明非的投稿，相信大家在线代里面一定学过各种矩阵变换，被各种横竖格子搞得头晕脑胀， 别怕， 这篇文章带你不用学线代也能搞清楚那在css3 transform中的matrix。

前言

CSS3 中使用 transform 可以对元素进行变换。其中包含：位移、旋转、偏移、缩放。 transform 可以使用 translate/rotate/skew/scale 的方式来控制元素变换，也可以使用 matrix 的方式来控制元素变换。

比如：

`<div class="box"></div>`

通过transform属性进行变换。

首先演示使用 translate/rotate/skew/scale 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);
}

也可以使用 matrix 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);
}

查看demo

Matrix 的中文是矩阵，是一个数学术语，在计算机科学中，会用矩阵来对象量进行变换，在 CSS3 的 transform 属性中，可以使用矩阵对图像进行变换。

矩阵长什么样子？

矩阵可以分为一个形容词+一个名字，矩是形容词，阵是名词。

如果你喜欢看战争片，不管是古代战争还是现代战争，都需要有阵势，打仗没阵型，等于耍流氓；或者是开一局农药，可能也要考虑各个英雄的站位，各种球类运动、各种棋类都需要有阵型。

阵型中的每一个个体对整体的都会产生影响。比如打王者荣耀射手时候，射手应该猥琐在一个位置输出，站错位置，输掉整个游戏。

那，其实矩阵就是一些列的数字按照矩形排列。

在数学中，矩阵用方括号包裹起来。

上图就是一个矩阵。

CSS3 里的 matrix 如何和矩阵对应呢？

为什么要用矩阵来表示转换呢？因为在计算机科学中，矩阵可以对向量进行转换。矩阵中的每一个数字，对向量的转换都会产生影响。

CSS3 里面可以用矩阵表示 2D 和 3D 转换，这里只讲 2D。

selector {
    transform: matrix(a, b, c, d, e, f);
}

2D 的转换是由一个 3*3 的矩阵表示的，前两行代表转换的值，分别是 a b c d e f，要注意是竖着排的，第一行代表 x 轴发生的变化，第二行代表 y 轴发生的变化，第三行代表 z 轴发生的变化，因为这里是 2D 不涉及 z 轴，所以这里是 0 0 1。

假设一个问题

创建一个宽高为 200px 的div，div 里面有一个红色的点，位置是{x:181px y:50px}。

倘若将这个div 向右平移 10px，x 轴向下平移 20px，旋转37°，x轴缩放 1.5 倍，y 轴缩放 2 倍：

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

那么红色点的变化后的位置在哪里呢？

既然我们知道矩阵可以对向量进行转换那么我们只要把上面的信息转换成矩阵信息，通过矩阵信息可以将我们的原始坐标转换到新的坐标。

缩放 scale(x, y)

缩放对应的是矩阵中的 a 和 d，x 轴的缩放比例对应 a，y 轴的缩放比例对应 d。

transform: scale(x,y);

a=x d=y

所以 scale(1.5, 2) 对应的矩阵是：

transform: matrix(1.5,0, 0,2,0, 0);

如果一个没有元素没有被缩放，默认a=1 d=1。

平移 translate(10, 20)

平移对应的是矩阵中的 e 和 f，平移的 x 和 y 分别对应 e 和 f。

transform: translate(10, 20)

e=10

f=20

对应： transform: matrix(a, b, c, d10, 20);

结合缩放： transform: matrix(1.5 0, 0, 2,10, 20);

平移只会影响 e 和 f 值。

旋转 rotate(θdeg)

旋转影响的是a/b/c/d四个值，分别是什么呢？

transform: rotate(θdeg)

a=cosθ

b=sinθ

c=-sinθ

d=cosθ

这个是高中学的哦~

如果要计算 30° 的sin值：

首先我们要将 30° 转换为弧度，传递给三角函数计算。用 JS 计算就是下面的样子了。

// 弧度和角度的转换公式：弧度=π/180×角度

const radian = Math.PI / 180 * 30 // 算出弧度

const sin = Math.sin(radian) // 计算 sinθ
const cos = Math.cos(radian) // 计算 cosθ

console.log(sin, cos) // 输出 ≈ 0.5, 0.866

这样我们算出了 sin 和 cos，分别是 0.5 和 0.866

如果我们不考虑缩放和偏移，只旋转30°，矩阵应该表示为

transform: rotate(30deg)

a=0.866

b=0.5

c=-0.5

d=0.866

transform: matrix(0.866, 0.5, -0.5, 0.866,0, 0);

偏移 skew(20deg, 30deg)

上面的题目中没有出现出现偏移值，偏移值也是由两个参数组成，x 轴和 y 轴，分别对应矩阵中的 c 和 b。是 x 对应 c，y 对应 b， 这个对应并不是相等，需要对 skew 的 x 值 和 y 值进行 tan 运算。

transform: skew(20deg, 30deg);

b=tan30°

c=tan20°

注意 y 对应的是 c，x 对应的是 b。

transform: matrix(a,tan(30deg), tan(20deg),d, e, f)

使用 JS 来算出 tan20 和 tan30

// 先创建一个方法，直接返回角度的tan值
function tan (deg) {
    const radian = Math.PI / 180 * deg
    return Math.tan(radian)
}

const b = tan(30)
const c = tan(20)
console.log(b, c) // 输出 ≈ 0.577, 0.364

b=0.577 c=0.364

transform: matrix(1,0.577, 0.364,1, 0, 0)

旋转+缩放+偏移+位移怎么办？

如果我们既要旋转又要缩放又要偏移，我们需要将旋转和缩放和偏移和位移多个矩阵相乘，要按照transform里面rotate/scale/skew/translate所写的顺序相乘。

这里我们先考虑旋转和缩放，需要将旋转的矩阵和缩放的矩阵相乘

实在是用语言解释不清楚如何去乘，用一张图解释吧：

这里我用小写字母代表第一个矩阵中的值，大写字母代表第二个矩阵里的值

将我们的已经得到的矩阵带入到公式

得出：

transform: rotate(30) scale(1.5 2);

转换为 matrix 表示为：

transform: matrix(1.299, 0.75, -1, 1.732,0, 0);

找到这次转换的矩阵

div 的 transform 值如下

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

translate(10px, 20px)

x 平移 10px，y 平移 20px，所以 e=10，f=20。

rotate(37deg)

sin37° ≈ 0.6

cos37° ≈ 0.8

根据 a 对应 cos b，对应 sin，c 对应 -sin，d 对应 cos 的值

得到：

a=0.8，b=0.6，c=-0.6，d=0.8

scale(1.5, 2)

x 轴缩放 1.5，y 轴缩放 2，所以 a=1.5，d=2

结合

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

我们使用 位移矩阵 旋转矩阵 缩放矩阵（根据transform中的变换类型书写的顺序）

可以使用矩阵计算器进行计算

从左往右依次计算

所以最终得到矩阵

matrix(1.2, 0.9, -1.2 1.6, 10, 20)

验证一下

transform: matrix(1.2, 0.9, -1.2 1.6, 10, 20)

和

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

效果是一样的

如何对一个坐标进行矩阵变换

我们已经知道了这个矩阵，如何通过矩阵对一个坐标进行变化，找到这个坐标变化后的位置呢？

我们用之前得出的变换矩阵去乘以这一个坐标组成的3*1（三排一列）矩阵。

上面已经介绍过如何进行矩阵乘法了，这里在介绍一遍

上图中左右两个矩阵颜色相同的位置相乘后相加，每一行都进行这样的计算：

得到一个3*1的矩阵，第一行是转换后的 x 值，第二行是转换后的 y 值，第三行是转换后的 z 值（2d不考虑z值）。

前面讲到，矩阵的第一行影响 x，第二行影响 y，也体现在这个地方。

假设我们的坐标是(50, 80)，这里还没有针对我们提出的问题上面的点进行计算。

我们把坐标写成矩阵的形式，设置 z 轴是1：

然后进行乘法计算：

通过我们计算出来的矩阵变换得到新的位置(46, 172)

继续刚刚问题

坐标是需要基于一个坐标系存在的，我们需要找到正确的坐标系才能算出准确的坐标。 在 CSS transform 中，有个属性是 transform-origin，来设置变换所基于的点，默认是transform-origin: 50% 50%，基于中间元素的中心点。我们需要以这个点建立坐标系。

在网页中，坐标系是 x 轴向右，y 轴向下。

转换前：

转换后：

根据题目我们知道，这个点相对于绿色div左上角的坐标是(181, 50) 绿色div的宽高为200 基于绿色div中心点建立的坐标系，这个点的坐标是(81, -50)

将坐标代入公式进行计算：

得到坐标约为(167, 13)

再将这个坐标转换成页面坐标系(267,113)

最终我们得到了这个点在经过转换后的坐标

总结

矩阵在计算机图形学中运用非常多，就像我们经常用的PhotoShop，虽然是设计软件，但它的图形也是依赖各种数学能力进行计算后展现的。我们玩的游戏、看的3D电影，其实都和数学息息相关，学好这些知识，才能真正的成为发明者，即便不成为发明者，在应用层理解这些，让我们能做的事情更多。

本文错误的地方，欢迎斧正。

关于奇舞周刊