Netty案例介绍(websocket服务)

r囧r小猫 2023-06-26 08:21 2阅读 0赞

本文我们来实现一个基于WebSocket协议的案例。

# WebSocket案例 #

## 1.需求分析 ##

Http协议是`无状态`的, 浏览器和服务器间的请求响应一次，下一次会重新创建连接.所有在有些情况下并不是太适用。这时websocket就是我们的一种实现方案，具体的websocket的内容网上很多，自行查阅哦，本文主要是介绍基于netty如何实现websocket通信。

**要求**：

1.  实现基于webSocket的长连接的全双工的交互
2.  改变Http协议多次请求的约束，实现长连接了， 服务器可以发送消息给浏览器
3.  客户端浏览器和服务器端会相互感知，比如服务器关闭了，浏览器会感知，同样浏览器关闭了，服务器会感知

## 2.案例代码实现 ##

### 2.1 服务端处理器 ###

服务器处理器中我们仅仅需要处理请求和客户端连接和端口的情况，具体如下：

package com.dpb.netty.websocket;
    
    import io.netty.channel.ChannelHandlerContext;
    import io.netty.channel.SimpleChannelInboundHandler;
    import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
    
    import java.time.LocalDateTime;
    
    
    /** * @program: netty4demo * @description: 处理器 * @author: 波波烤鸭 * @create: 2019-12-30 22:39 */
    public class SocketServerHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> { 
    
        @Override
        protected void channelRead0(ChannelHandlerContext channelHandlerContext, TextWebSocketFrame textWebSocketFrame) throws Exception { 
            // 打印接收到的消息
            System.out.println("服务端接受到的消息:" + textWebSocketFrame.text());
            // 返回消息给客户端
            channelHandlerContext.writeAndFlush(new TextWebSocketFrame("服务器时间: " + LocalDateTime.now() + " ： " + textWebSocketFrame.text()));
        }
    
        /** * 客户端连接的时候触发 * @param ctx * @throws Exception */
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) throws Exception { 
            // LongText() 唯一的 ShortText() 不唯一
            System.out.println("handlerAdded：" + ctx.channel().id().asLongText());
            System.out.println("handlerAdded：" + ctx.channel().id().asShortText());
        }
    
        /** * 客户端断开连接的时候触发 * @param ctx * @throws Exception */
        @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("异常发生了...");
            ctx.close();
        }
    }

### 2.2 服务端 ###

服务端代码在原有的基础上需要转换相关的协议，具体如下:

package com.dpb.netty.websocket;
    
    import io.netty.bootstrap.ServerBootstrap;
    import io.netty.channel.*;
    import io.netty.channel.nio.NioEventLoopGroup;
    import io.netty.channel.socket.ServerSocketChannel;
    import io.netty.channel.socket.SocketChannel;
    import io.netty.channel.socket.nio.NioServerSocketChannel;
    import io.netty.handler.codec.http.HttpObjectAggregator;
    import io.netty.handler.codec.http.HttpServerCodec;
    import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
    import io.netty.handler.logging.LogLevel;
    import io.netty.handler.logging.LoggingHandler;
    import io.netty.handler.stream.ChunkedWriteHandler;
    
    import java.net.ServerSocket;
    
    /** * @program: netty4demo * @description: 基于WebSocket协议的服务端 * @author: 波波烤鸭 * @create: 2019-12-30 22:31 */
    public class SocketServerDemo { 
    
        public static void main(String[] args) throws Exception { 
            // 1.创建对应的EventLoopGroup对象
            EventLoopGroup bossGroup = new NioEventLoopGroup(1);
            EventLoopGroup workGroup = new NioEventLoopGroup();
            ServerBootstrap bootstrap = new ServerBootstrap();
            try{ 
                bootstrap.group(bossGroup,workGroup)
                        .channel(NioServerSocketChannel.class)
                        .handler(new LoggingHandler(LogLevel.INFO))
                        .childHandler(new ChannelInitializer<SocketChannel>() { 
                            @Override
                            protected void initChannel(SocketChannel socketChannel) throws Exception { 
                                // websocket 相关的配置
                                ChannelPipeline pipeline = socketChannel.pipeline();
                                //因为基于http协议，使用http的编码和解码器
                                pipeline.addLast(new HttpServerCodec());
                                //是以块方式写，添加ChunkedWriteHandler处理器
                                pipeline.addLast(new ChunkedWriteHandler());
    
                                /* 说明 1. http数据在传输过程中是分段, HttpObjectAggregator ，就是可以将多个段聚合 2. 这就就是为什么，当浏览器发送大量数据时，就会发出多次http请求 */
                                pipeline.addLast(new HttpObjectAggregator(8192));
                                /* 说明 1. 对应websocket ，它的数据是以 帧(frame) 形式传递 2. 可以看到WebSocketFrame 下面有六个子类 3. 浏览器请求时 ws://localhost:8888/hello 表示请求的uri 4. WebSocketServerProtocolHandler 核心功能是将 http协议升级为 ws协议 , 保持长连接 5. 是通过一个 状态码 101 */
                                pipeline.addLast(new WebSocketServerProtocolHandler("/hello"));
                                // 自定义handler，处理业务逻辑
                                pipeline.addLast(new SocketServerHandler());
    
                            }
                        });
                System.out.println("服务启动了....");
                ChannelFuture future = bootstrap.bind(8888).sync();
                future.channel().closeFuture().sync();
            }finally { 
                bossGroup.shutdownGracefully();
                workGroup.shutdownGracefully();
            }
        }
    }

### 2.3 客户端实现 ###

在客户端中我们就简单的实现一个HTML页面，在其中发送websocket协议相关的请求，然后接受相关的消息，如下，注意注释

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>websocket案例测试</title>
    </head>
    <body>
    <script> var socket; //判断当前浏览器是否支持websocket if(window.WebSocket) { //go on socket = new WebSocket("ws://localhost:8888/hello"); //相当于channelReado, ev 收到服务器端回送的消息 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.socket) { //先判断socket是否创建好 return; } if(socket.readyState == WebSocket.OPEN) { //通过socket 发送消息 socket.send(message) } else { alert("连接没有开启"); } } </script>
    <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" style="height: 300px; width: 300px"></textarea>
        <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    </form>
    </body>
    </html>

## 3.测试分析 ##

分别运行服务器和客户端，访问测试，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

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

运行效果：  
![在这里插入图片描述][20191230231002714.gif]

同时在第一次运行的时候打开调试环境：

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

好了，本文我们就介绍到此，感兴趣的可以自己运行下

欢迎关注点赞O(∩\_∩)O哈哈~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191230230743946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191230230757739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[20191230231002714.gif]: https://img-blog.csdnimg.cn/20191230231002714.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019123023121696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70