WebSocket API是HTML5中的一大特色，能够使得建立连接的双方在任意时刻相互推送消息，这意味着不同于HTTP，服务器服务器也可以主动向客户端推送消息了。

WebSocket协议是在Http协议的基础上升级而来的。

WebSocket协议建链过程：

Client端需要向服务器端发送一个Http请求，请求头携带Connection: Upgrade以及Upgrade: websocket两字段，用来告知服务器这是一个WebSocket握手请求。

我们可以使用JavaScript代码，发起一个WebSocket链接请求，然后在浏览器F12查看请求信息如下：

服务端收到握手请求后，会返回有Connection和Upgrade字段来表明这是一个WebSocket数据包。响应状态为101.

此时WebSocke链接已经建立，这是一个长连接，我们可以看下F12中websocket的状态：

可以看到Time栏中显示为Pending，等待用户和服务器交互数据了。

此时我们可以在服务端再来看下接收到的请求日志：

(PS: 需要打开debug日志级别，同时需要显示处理握手信息)

2024-05-23 15:45:39 DEBUG [NioWebSocketHandler] 收到消息：HttpObjectAggregator$AggregatedFullHttpRequest(decodeResult: success, version: HTTP/1.1, content: CompositeByteBuf(ridx: 0, widx: 0, cap: 0, components=0))
GET /websocket HTTP/1.1
Host: localhost:8081
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Upgrade: websocket
Origin: null
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9
Sec-WebSocket-Key: +iXe1OUXfWR045vV7eEOvA==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
content-length: 0

可以看到服务端收到的确实是一个FullHttpRequest请求。

下面看下WebSocket数据交换过程：

客户端浏览器发送数据后，服务端会返回一个响应：

还是在F12的websocket的Messages页中可以看到Client发送和接收的消息

具体的客户端和服务端的代码，可以参考【GitCode - 开发者的代码家园https://gitcode.com/Siwash/websocketWithNetty/blob/master/README.md】。

 参考:


Java NIO实现WebSocket服务器_nio websocket-CSDN博客

WebSocket协议_js websocket ping-CSDN博客