Netty集成WebSocket实现客户端、服务端长连接

女爷i 2023-01-01 03:37 506阅读 0赞

# 1 概述 #

(1) Http协议是无状态的,浏览器和服务器间的请求响应一次,下ー次会重新创建连接。  
(2) 要求:实现基于 websockete的长连接的全双工的交互。  
(3) 改变Http协议多次请求的约束,实现长连接了,服务器可以发送消息给浏览器。  
(4) 客户端浏览器和服务器端会相互感知,比如服务器关闭了,浏览器会感知,同样浏览器关闭了,服务器会感知。

# 2 实现 #

## 2.1 WebSocketServerConsts ##

public final class WebSocketServerConsts { 
    
        private WebSocketServerConsts() { 
    
        }
    
    
        public static final Integer port = 8888;
    
    }

## 2.2 WebSocketHandler ##

public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> { 
    
        @Override
        protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception { 
            System.out.println("服务器接收到消息：" + msg.text());
            //回复消息
            ctx.channel().writeAndFlush(new TextWebSocketFrame("服务器时间" + LocalDateTime.now() + " " + msg.text()));
        }
    
    
        /** * 客户端连接后 */
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) throws Exception { 
            System.out.println("handlerAdded 被调用" + ctx.channel().id().asLongText());
            System.out.println("handlerAdded 被调用" + ctx.channel().id().asShortText());
        }
    
        /** *客户端断开连接时触发 */
        @Override
        public void handlerRemoved(ChannelHandlerContext ctx) throws Exception { 
            System.out.println("handlerRemoved 被调用" + ctx.channel().id().asLongText());
        }
    
    
        @Override
        public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception { 
            System.out.println("发生异常" + cause.getMessage());
            ctx.channel();
        }
    }

## 2.3 WebSocketServerChannelInitializer ##

public class WebSocketServerChannelInitializer extends ChannelInitializer<SocketChannel> { 
        @Override
        protected void initChannel(SocketChannel ch) throws Exception { 
    
            ChannelPipeline pipeline = ch.pipeline();
    
            //http 编码、解码器
            pipeline.addLast(new HttpServerCodec());
            //以块的方式写
            pipeline.addLast(new ChunkedWriteHandler());
            //http数据在传输过程中是分段的，HttpObjectAggregator可以将多个段聚合
            pipeline.addLast(new HttpObjectAggregator(8192));
            //websocketServerProtocolHandler，将http协议升级为ws协议，浏览器请求时uri为 ws://localhost:8888/hello
            pipeline.addLast(new WebSocketServerProtocolHandler("/hello"));
            //自定义handler
            pipeline.addLast(new WebSocketHandler());
        }
    }

## 2.4 WebSocketServer ##

public class WebSocketServer { 
    
    
        public static void main(String[] args) { 
    
            EventLoopGroup bossGroup = new NioEventLoopGroup(1);
            EventLoopGroup workerGroup = new NioEventLoopGroup();
    
            try { 
    
                ServerBootstrap serverBootstrap = new ServerBootstrap();
                serverBootstrap.group(bossGroup, workerGroup)
                        .channel(NioServerSocketChannel.class)
                        .childHandler(new WebSocketServerChannelInitializer());
    
                ChannelFuture channelFuture = serverBootstrap.bind(WebSocketServerConsts.port).sync();
    
                System.out.println("服务器已经开启......");
                channelFuture.channel().closeFuture().sync();
            } catch (InterruptedException e) { 
                e.printStackTrace();
            } finally { 
                bossGroup.shutdownGracefully();
                workerGroup.shutdownGracefully();
            }
    
        }
    
    
    }

## 2.5 hello.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WebSocket</title>
    </head>
    <body>
    
    <form onsubmit="return false">
    
        <textarea name="message" style="height: 300px;width: 300px;"></textarea>
        <input type="button" value="发送消息" onclick="send(this.form.message.value)">
        <textarea id="responseText" name="responseText" style="height: 300px;width: 300px;"></textarea>
        <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    
    </form>
    
    
    <script> var socket; if (window.WebSocket) { socket = new WebSocket("ws://localhost:8888/hello"); //接收服务器消息 socket.onmessage = function (ev) { var rt = document.getElementById("responseText"); rt.value = rt.value + "\n" + ev.data; } //连接开启 socket.onopen = function (ev) { var rt = document.getElementById("responseText"); rt.value = "连接开启......"; } //连接关闭 socket.onclose = function (ev) { var rt = document.getElementById("responseText"); rt.value = rt.value + "\n" + "连接关闭了......"; } } else { alert("当前浏览器不支持websocket"); } //发送消息 function send(message) { if (!window.WebSocket) { return; } if (socket.readyState == WebSocket.OPEN) { socket.send(message); } else { alert("连接没有开启"); } } </script>
    
    
    </body>
    </html>

# 3 测试 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTI1OTk5_size_16_color_FFFFFF_t_70]

关闭浏览器后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTI1OTk5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTI1OTk5_size_16_color_FFFFFF_t_70]: /images/20221120/9545a1fe36434d0da3f96352c0c47283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTI1OTk5_size_16_color_FFFFFF_t_70 1]: /images/20221120/b4de4daec1d241e4920547cd19e19f14.png