WebSocket是一种全双工通信的协议，其通信在TCP连接上进行，所以属于应用层协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket编程中，浏览器和服务器只需要完成一次升级握手就直接可以创建持久性的连接，并进行双向数据传输。
该开源项目的地址为https://gitee.com/crazymaker/Websocket_chat_room。

11.1　WebSocket协议简介

WebSocket协议的目标，是在一个独立的持久连接上提供全双工双向通信。客户端和服务器可以向对方主动发送和接受数据。

11.1.1　Ajax短轮询和Long Poll长轮询的原理

  1. Ajax短轮询： 让浏览器每隔几秒就发送一次请求，询问服务器是否有新信息
  2. Long Poll长轮询： 原理与Ajax短轮询差不多，都是采用轮询的方式，不过采取的是服务端阻塞模型

以上两种都有缺陷，都不是最好的双向通信方式，都需要很多资源

11.1.2　WebSocket与HTTP之间的关系

WebSocket的通信连接建立的前提需要借助HTTP协议，完成通信连接建立之后，通信链接上的双向通信就与HTTP协议无关了
WebSocket协议的握手和通信过程如图11-2所示。
image.png

11.2　WebSocket回显演示程序开发

11.2.1　WebSocket回显程序的客户端代码

使用JavaScript实现WebSocket协议通信相对简单，这里分为三个步骤进行介绍

  1. 建立WebSocket连接

    1. socket = new WebSocket("ws://192.168.0.5:18899/ws","echo");

    以上调用的WebSocket()方法的第一个参数为服务端的WebSocket监听URL地址，第二个参数为服务端配置的WebSocket子协议（业务协议），子协议为应用程序自己使用的某个标识或者命名，客户端与服务端保持一致即可。

  2. 监听WebSocket连接的open事件 ```javascript socket.onopen = function (event) { var target = document.getElementById(‘responseText’); target.value = “Web Socket 连接已经开启!”; };

  2. 3. 监听WebSocket连接的message消息事件
  3. ```javascript
  4. socket.onmessage = function (event) {
  5.            var ta = document.getElementById('responseText');
  6.            ta.value = ta.value + '\n' + event.data
  7.    };

完整的WebSocket回显演示程序的客户端JavaScript脚本大致如下：

  1. <script type="text/javascript">
  2.     var socket;
  3.     if (!window.WebSocket) {
  4.         window.WebSocket = window.MozWebSocket;
  5.     }
  6.     //获取浏览器上URL中的主机名称
  7.      var domain = window.location.host;
  8.      if (window.WebSocket) {
  9.         //建立WebSocket连接
  10.         socket = new WebSocket("ws://"+domain+"/ws","echo");
  11.         socket.onmessage = function (event) {
  12.             var ta = document.getElementById('responseText');
  13.             ta.value = ta.value + '\n' + event.data
  14.         };
  16.        //连接打开事件
  17.        socket.onopen = function (event) {
  18.             var target = document.getElementById('responseText');
  19.             target.value = "Web Socket 连接已经开启!";
  20.         };
  21.         //连接关闭事件
  22.         socket.onclose = function (event) {
  23.             var target = document.getElementById('responseText');
  24.             target.value = ta.value + "Web Socket 连接已经断开";
  25.         };
  26.     } else {
  27.         alert("Your browser does not support Web Socket.");
  28. }
  30.     //发送WebSocket消息，在JavaScript发送WebSocket消息时调用
  31.     function send(message) {
  32.         if (!window.WebSocket) {
  33.             return;
  34.         }
  35.         if (socket.readyState == WebSocket.OPEN) {
  36.             //通过套接字发送消息
  37.             socket.send(message);
  38.         } else {
  39.             alert("The socket is not open.");
  40.         }
  41.     }
  42. </script>

11.2.2　WebSocket相关的Netty内置处理类

WebSocket协议中大致包含了5种类型的数据帧，与这5种数据帧相对应，Netty包含了5种WebSocket数据帧的封装类型。这些类型都是WebSocketFrame类的子类
image.png
image.png
与服务端WebSocket通信相关的Netty内置Handler处理器
image.png
其中WebSocketServerProtocolHandler是非常关键的处理器，负责开始升级握手和控制帧的处理，可以理解为握手处理器，握手完成后，双方的通信协议会从HTTP升级到WebSocket协议
以WebSocket回显演示程序为例，以在协议升级之前，通道Pipeline处理流水线的状态如下图所示：
image.png
在握手升级过程中，握手处理器WebSocketServerProtocolHandshakeHandler会被加入到Pipeline流水线上，负责进行协议的升级握手。 握手完成之后，握手处理器会将解码器HttpRequestDecoder替换为WebSocketFrameDecoder对应WebSocket版本的子类实例，也会将编码器HttpResponseEncoder替换WebSocketFrameEncoder对应版本的子类实例。

在握手完成协议升级之后，通道Pipeline处理流水线的状态如下图所示
image.png

11.2.3　WebSocket的回显服务器

  1. package com.crazymakercircle.netty.Websocket;
  2. //省略import
  3. @Slf4j
  4. public final class WebSocketEchoServer
  5. {
  6.     //流水线装配器
  7.     static class EchoInitializer extends
  8.                             ChannelInitializer<SocketChannel>       {
  9.         @Override
  10.         public void initChannel(SocketChannel ch)
  11.         {
  12.             ChannelPipeline pipeline = ch.pipeline();
  13.             //HTTP请求解码器
  14.             pipeline.addLast(new HttpRequestDecoder());
  15.             //HTTP响应编码器
  16.             pipeline.addLast(new HttpResponseEncoder());
  17.             //HttpObjectAggregator 将HTTP消息的多个部分合成一条完整的HTTP消息
  18.             pipeline.addLast(new HttpObjectAggregator(65535));
  19.             //WebSocket协议处理器，配置WebSocket的监听URI、协议包长度限制
  20.             pipeline.addLast(
  21.                     new WebSocketServerProtocolHandler("/ws", "echo",
  22.                                                         true, 10 * 1024));
  23.             //增加网页的处理逻辑
  24.             pipeline.addLast(new WebPageHandler());
  25.             //TextWebSocketFrameHandler 是自定义的WebSocket业务处理器
  26.             pipeline.addLast(new TextWebSocketFrameHandler());
  27.         }
  28.     }
  30.     /**
  31.      * 启动
  32.      */
  33.     public static void start(String ip) throws Exception
  34.     {
  35.         //创建连接监听reactor 轮询组
  36.         EventLoopGroup bossGroup = new NioEventLoopGroup(1);
  37.         //创建连接处理 reactor 轮询组
  38.         EventLoopGroup workerGroup = new NioEventLoopGroup();
  39.         try
  40.         {
  41.             //服务端启动引导实例
  42.             ServerBootstrap b = new ServerBootstrap();
  43.             b.group(bossGroup, workerGroup)
  44.                     .channel(NioServerSocketChannel.class)
  45.                     .handler(new LoggingHandler(LogLevel.DEBUG))
  46.                     .childHandler(new EchoInitializer());
  48.             //监听端口，返回同步通道
  49.             Channel ch = b.bind(18899).sync().channel();
  50.             log.info("WebSocket服务已经启动 http://{}:{}/",ip,18899);
  51.             ch.closeFuture().sync();
  52.         } finally
  53.         {
  54.             bossGroup.shutdownGracefully();
  55.             workerGroup.shutdownGracefully();
  56.         }
  57.     }
  58. }

在上面的代码中，演示程序所设置的WebSocket服务监听的URL为“/ws”、子协议为“echo”。这就要求客户端在发起Websocket连接时，需要使用同样的URL和子协议，否则会连接失败。 所以，当服务端收到客户端的URL为“/ws”、子协议为“echo”的HTTP请求时，握手处理器WebSocketServerProtocolHandler将启动协议升级机制， 着手将HTTP协议升级为WebSocket协议，握手完成之后， 双方正式进入WebSocket双向通信阶段

11.2.4　WebSocket的业务处理器

WebSocket回显服务器的业务处理器为TextWebSocketFrameHandler，在监听到握手完成事件之后，将WebSocket通信中不需要的WebPageHandler网页处理器移除。

  1. package com.crazymakercircle.netty.Websocket;
  2. //省略import
  3. @Slf4j
  4. public class TextWebSocketFrameHandler extends
  6. SimpleChannelInboundHandler<WebSocketFrame>
  7. {
  8.     @Override
  9.     protected void channelRead0(ChannelHandlerContext ctx,
  10.                                     WebSocketFrame frame) throws Exception
  11.     {
  12.         //Ping 和Pong 帧已经被前面WebSocketServerProtocolHandler处理器处理过了
  13.         if (frame instanceof TextWebSocketFrame)
  14.         {
  15.             //取得WebSocket的通信内容
  16.             String request = ((TextWebSocketFrame) frame).text();
  17.             log.debug("服务端收到：" + request);
  18.             //回显字符串
  19.             String echo = Dateutil.getTime() + "：" + request;
  20.             //构造TextWebSocketFrame文本帧，用于回复
  21.             TextWebSocketFrame echoFrame = new TextWebSocketFrame(echo);
  22.             //发送回显字符串
  23.             ctx.channel().writeAndFlush(echoFrame);
  24.         } else
  25.         {
  26.             //如果不是文本消息，抛出异常
  27.             //本演示不支持二进制消息
  28.             String message = "unsupported frame type: " +
  29.                                              frame.getClass().getName();
  30.             throw new UnsupportedOperationException(message);
  31.         }
  32.     }
  34.      //处理用户事件
  35.     @Override
  36.     public void userEventTriggered(ChannelHandlerContext ctx,
  37.                                            Object evt) throws Exception
  38.     {
  39.         //判断是否为握手成功事件，该事件表明通信协议已经升级为 WebSocket 协议
  40.         if (evt instanceof
  41.                          WebSocketServerProtocolHandler.HandshakeComplete)
  42.         {
  43.             //握手成功，移除 WebPageHandler，因此将不会接收到任何HTTP请求
  44.             ctx.pipeline().remove(WebPageHandler.class);
  45.             log.debug("WebSocket HandshakeComplete 握手成功");
  46.             log.debug("新的WebSocket 客户端加入，通道为：" + ctx.channel());
  47.         } else
  48.         {
  49.             super.userEventTriggered(ctx, evt);
  50.         }
  51.     }
  52. }

11.3　WebSocket协议通信的原理

11.3.1　抓取WebSocket协议的本机数据包

WebSocket回显演示程序的测试用例代码，具体如下：

  1. package com.crazymakercircle.NettyTest;
  2.         //省略import
  3.         /**
  4.          * WebSocket回显服务器的测试用例
  5.          **/
  6.         @Slf4j
  7.         public class WebSocketEchoTester
  8.         {
  9.                 @Test
  10.                 public void startServer() throws Exception
  11.                 {
  12.                         //抓包说明：由于WireShark只能抓取经过所监控的网卡的数据包
  13.                         //因此请求到localhost的本地包，默认是不能抓取到的。
  14.                         //如果要抓取本地的调试包，需要通过route指令增加服务器IP的路由表项配置
  15.                         //只有这样，让发往本地localhost的报文才会经过路由网关所绑定的网卡                                  //从而，发往localhost的本地包就能被抓包工具从监控网卡抓取到
  16.                         //具体的办法是通过增加路由表项来完成，其命令为route add，下面是一个例子
  17.                         //route add 192.168.0.5 mask 255.255.255.255 192.168.0.1
  18.                         //以上命令表示：目标为192.168.0.5的报文，经过192.168.0.1网关绑定的网卡
  19.                         //该路由项在使用完毕后，建议删除，其删除指令如下：
  20.                         //route delete 192.168.0.5 mask 255.255.255.255 192.168.0.1删除
  21.                         //如果没有删除，则所有本机报文都经过网卡到达路由器
  22.                         //然后，绕一圈再回来，会很消耗性能
  23.                         //如果该路由表项并没有保存，在电脑重启后将会失效
  24.                         //注意：以上用到的本地IP和网关IP需要结合自己的电脑网卡和网关去更改
  26.                         //启动WebSocket回显服务器
  27.                         WebSocketEchoServer.start("192.168.0.5");
  28.                 }
  29.         }

11.3.2　WebSocket握手过程

image.png
握手请求HTTP报文需要携带一些WebSocket协议规范约定的请求头，主要有如下几个：

  1. Sec-WebSocket-Key请求头
  2. Upgrade请求头
  3. Connection请求头
  4. Sec-WebSocket-Version请求头
  5. Sec-WebSocket-Protocol请求头

响应报文中所涉及的比较重要的响应头包括如下几项：

  1. Upgrade响应头
  2. Sec-WebSocket-Accept响应头
  3. Sec-WebSocket-Protocol请求头

    11.3.3　WebSocket通信报文格式