本文使用的是Wireshark 4.0.3, Java 11 编写简易服务器,客户端使用Chrome浏览器
移动端开发或是前、后端开发又或是高大上的云计算都脱离不了网络,离开了网络的计算机就是一个孤岛,快速上手开发、背面试八股文固然有些急功近利,但确实是一种捷径,但经历过N年的应用开发后还是要从原理的角度搞清楚某项技术的来龙去脉,虽然有些痛苦,但好在也只是精神上面的,克服之后身体的灵活性不可同日而语, 在武林高手看来,这就打通了全身筋脉
一、安装Wireshark
https://www.wireshark.org
启动后的主界面

二、安装Java 11 和任意一款能编写Java代码的工具,如Editplus,Notepad++,Eclipse,Idea...
三、使用Java编写简单的Web服务器
有经验的朋友应该明白是用ServerSocket和Socket, 这哥俩配合很默契,使用起来简单便捷, 一对好基友,惊喜连绵
public class App {
public static void main( String[] args ) throws Exception {
ServerSocket serverSocket = new ServerSocket(8080);
while(true) {
System.out.println("waiting...");
Socket socket = serverSocket.accept();
System.out.println("ok");
}
}
}
启动这个应用

四、设置一下Wireshark
打开菜单 捕获/ 选项


五、打开Chrome浏览器
对浏览器进行一些简单设置


在地址栏中输入http://localhost:8080并回车

六、打开Wireshark看看浏览器是如何连接服务器的
'偷窥'网络数据包

三次握手TCP数据包

三次握手三个包,三个包数据如下
第一次握手
59123 → 8080 [SYN] Seq=0 Win=65535 Len=0 MSS=65475 WS=256 SACK_PERM
第二次握手
8080 → 59123 [SYN, ACK] Seq=0 Ack=1 Win=65535 Len=0 MSS=65475 WS=256 SACK_PERM
第三次握手
59123 → 8080 [ACK] Seq=1 Ack=1 Win=2618880 Len=0
三次握手的数据包信息要看明白,还是要了解TCP/IP协议
SYN表示正在发起连接请求,TCP连接是双向的所以建立连接时,双方都要发送SYN,可以看到第二个包中也有SYN
Seq表示当前传输数据的数据段号,因为TCP是有序传输,所以每个数据段都需要这样一个序号,使用序号的目的是因为如果接收端数据包乱序了可以重组成有序, 此处为什么Seq=0,原因在于Wireshark默认将其设置成了相对值,可以在Wireshark中配置, 将下图中的红线部分的勾去掉

TCP连接中不管是请求端还是响应端,双方都需要维护一个Seq号,所以你会发现第二次握手(从8080到59123 )也发送了一个Seq
Len是指数据的长度,这个长度是不包含TCP头的
Ack表示确认号,意思是接收连接的一方向发送连接的一方确认收到了多少数据
Win意思是向对方明示我这边接收数据的窗口(可认为是缓存)大小
连接建立好之后,浏览器向服务器发送了一个HTTP请求,但是我在代码中并没有编写响应内容,所以在浏览器中看到的结果就是无法访问此网站



七、完善服务端代码,让它给浏览器一个响应
public class App
{
public static void main( String[] args ) throws Exception
{
ServerSocket serverSocket = new ServerSocket(8080);
while(true) {
System.out.println("waiting...");
Socket socket = serverSocket.accept();
System.out.println("ok");
//读取HTTP协议请求头
BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));
String s = "";
while(!(s=in.readLine()).equals("")) {
System.out.println(s);
}
PrintWriter out = new PrintWriter(socket.getOutputStream(),true);
String msg = "<h1>Hello Chrome</h1>";
//拼接HTTP协议响应头
out.write("HTTP/1.1 200 OK\r\n");
out.write("Content-Type: text/html; charset=utf-8\r\n");
out.write("Content-Length: "+ msg.getBytes().length + "\r\n");
out.write("\r\n");
//向客户端写数据
out.write(msg);
out.flush();
}
}
}


观察HTTP响应头,可以看到最后负载的数据
八、总结
通过编写一个简易的服务器,使用Chrome浏览器发送请求,并使用Wireshark抓包,了解了TCP的三次握手过程
如果想知道TCP头的每一个参数的含义,推荐阅读TCP/IP详解
可以从包中读出网络分层,在最后一层中用的是HTTP协议