==注意:==有些图片中,消息的时间和端口号与前面的不匹配,是因为图片是后提供的,不必纠结。
打开网络串口调试助手,如 netAssist,配置成 TCP Server 模式,如下:

用浏览器访问地址:localhost:12345
或者 127.0.0.1:12345
。
我们从网络调试助手上,首先看到客户端上线的通知,如下:

然后收到信息,如下:

具体数据为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| GET / HTTP/1.1 Host: localhost:12345 Connection: keep-alive sec-ch-ua: " Not;A Brand";v="99", "Microsoft Edge";v="91", "Chromium";v="91" sec-ch-ua-mobile: ?0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Edg/91.0.864.59 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Sec-Fetch-Site: none Sec-Fetch-Mode: navigate Sec-Fetch-User: ?1 Sec-Fetch-Dest: document Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6 Cookie: wp-settings-time-1=1612349861; wp-settings-1=mfold%3Do
|
由以上可知,浏览器 http 请求也不过就是通过 socket 发送的一串数据而已,只不过是遵循特定协议格式的数据。
在我们不回复消息时,浏览器会一直等待回复,表现就是刷新按钮一直在转圈圈。
直到超时或收到回复为止。
如果超时,则会断开socket连接。
如果我们在超时之前回复数据:
1 2 3 4 5 6
| HTTP/1.1 200 OK Content-Type: text/html charset: gbk Content-Length:44
<html><div><h1>hello world</h1></div></html>
|
浏览器收到后,会刷新网页为:

收到数据后,浏览器再次响应:

具体数据为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| GET /favicon.ico HTTP/1.1 Host: localhost:12345 Connection: keep-alive sec-ch-ua: " Not;A Brand";v="99", "Microsoft Edge";v="91", "Chromium";v="91" sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Edg/91.0.864.59 Accept: image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8 Sec-Fetch-Site: same-origin Sec-Fetch-Mode: no-cors Sec-Fetch-Dest: image Referer: http://localhost:12345/ Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6 Cookie: wp-settings-time-1=1612349861; wp-settings-1=mfold%3Do
|