从零学Netty（八）Netty实现WebSocket服务器

我就是我 2022-12-15 03:55 351阅读 0赞

# 简介 #

*  WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
 *  WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据
 *  浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
 *  HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ2MTI4MQ_size_16_color_FFFFFF_t_70][]

# WebSocket 属性 #

<table> 
 <tbody> 
  <tr> 
   <td>Socket.readyState</td> 
   <td> <p>只读属性&nbsp;<strong>readyState</strong>&nbsp;表示连接状态，可以是以下值：</p> 
    <ul> 
     <li> <p>0 - 表示连接尚未建立。</p> </li> 
     <li> <p>1 - 表示连接已建立，可以进行通信。</p> </li> 
     <li> <p>2 - 表示连接正在进行关闭。</p> </li> 
     <li> <p>3 - 表示连接已经关闭或者连接不能打开。</p> </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>Socket.bufferedAmount</td> 
   <td> <p>只读属性&nbsp;<strong>bufferedAmount</strong>&nbsp;已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</p> </td> 
  </tr> 
 </tbody> 
</table>

# WebSocket 事件 #

<table> 
 <tbody> 
  <tr> 
   <td>open</td> 
   <td>Socket.onopen</td> 
   <td>连接建立时触发</td> 
  </tr> 
  <tr> 
   <td>message</td> 
   <td>Socket.onmessage</td> 
   <td>客户端接收服务端数据时触发</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>Socket.onerror</td> 
   <td>通信发生错误时触发</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>Socket.onclose</td> 
   <td>连接关闭时触发</td> 
  </tr> 
 </tbody> 
</table>

# WebSocket 方法  #

<table> 
 <tbody> 
  <tr> 
   <td>Socket.send()</td> 
   <td> <p>使用连接发送数据</p> </td> 
  </tr> 
  <tr> 
   <td>Socket.close()</td> 
   <td> <p>关闭连接</p> </td> 
  </tr> 
 </tbody> 
</table>

# 实例demo #

Netty使用WebSocket协议实现服务器

/**
     * ws服务器
     *
     * @author LionLi
     */
    public class WebSocketServer {
    
        public static void main(String[] args) throws Exception {
            // 创建 boss 和 worker 工作组
            EventLoopGroup bossGroup = new NioEventLoopGroup(1);
            EventLoopGroup workerGroup = new NioEventLoopGroup();
            try {
                ServerBootstrap serverBootstrap = new ServerBootstrap();
                serverBootstrap.group(bossGroup, workerGroup);
                // 主线程处理
                serverBootstrap.channel(NioServerSocketChannel.class);
                // 子线程业务处理
                serverBootstrap.childHandler(new ChannelInitializer<SocketChannel>() {
                    @Override
                    protected void initChannel(SocketChannel ch) {
                        ChannelPipeline pipeline = ch.pipeline();
                        //因为基于http协议，使用http的编码和解码器
                        pipeline.addLast(new HttpServerCodec());
                        //是以块方式写，添加ChunkedWriteHandler处理器
                        pipeline.addLast(new ChunkedWriteHandler());
                        // http数据聚合器 用于将大数据量分段传输的数据 聚合
                        pipeline.addLast(new HttpObjectAggregator(8192));
                        // websocket协议处理器
                        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
                        // 自定义的业务处理
                        pipeline.addLast(new WebSocketHandler());
                    }
                });
                // 启动服务器
                ChannelFuture channelFuture = serverBootstrap.bind(8088).sync();
                channelFuture.channel().closeFuture().sync();
            } finally {
                bossGroup.shutdownGracefully();
                workerGroup.shutdownGracefully();
            }
        }
    }

自定义业务处理

/**
     * 业务处理器
     *
     * @author LionLi
     */
    // TextWebSocketFrame 文本处理
    public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    
        /**
         * 通道消息读取
         */
        @Override
        protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) {
            System.out.println("收到消息 " + msg.text());
            ctx.channel().writeAndFlush(new TextWebSocketFrame("收到消息 " + msg.text()));
        }
    
        /**
         * 连接初始化
         */
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) {
            System.out.println("客户端连接:通道唯一id为 => " + ctx.channel().id().asLongText());
            System.out.println("客户端连接:通道不唯一id为 => " + ctx.channel().id().asShortText());
        }
    
        /**
         * 退出连接
         */
        @Override
        public void handlerRemoved(ChannelHandlerContext ctx) {
            System.out.println("客户端断开" + ctx.channel().id().asLongText());
        }
    
        /**
         * 异常处理
         */
        @Override
        public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) {
            System.out.println("客户端异常 " + cause.getMessage());
            //关闭连接
            ctx.close();
        }
    }

# 测试 #

使用页面进行测试

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Netty实现WebSocket服务器</title>
    </head>
    <body>
    <script>
        var socket;
        // 判断当前浏览器是否支持websocket
        if (window.WebSocket) {
            // 创建连接
            socket = new WebSocket("ws://localhost:8088/ws");
            // 消息监听
            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) {
                return;
            }
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(message)
            } else {
                alert("连接没有开启");
            }
        }
    </script>
    <form onsubmit="return false">
        <label>
            <textarea name="message" style="height: 300px; width: 300px"></textarea>
        </label>
        <input type="button" value="发送消息" onclick="send(this.form.message.value)">
        <label for="responseText"></label>
        <textarea id="responseText" style="height: 300px; width: 300px"></textarea>
        <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    </form>
    </body>
    </html>

启动服务器

![2020101515334966.png][]

打开页面 自动连接服务器

![2020101515341579.png][]

![20201015153534239.png][]

发送消息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ2MTI4MQ_size_16_color_FFFFFF_t_70 1][]

![20201015153558777.png][]

关闭页面

![20201015153617902.png][]

项目已上传到gitee

地址: [netty-demo][]

如果帮到您了,请帮忙点个star

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ2MTI4MQ_size_16_color_FFFFFF_t_70]: /images/20221123/a5048ae358ac4ef8991b9c42583b837b.png
[2020101515334966.png]: /images/20221123/79e8194558fa453b9910e00b4a71254d.png
[2020101515341579.png]: /images/20221123/25445026d2c14f0d9882b03db1897112.png
[20201015153534239.png]: /images/20221123/b4f70a3718334e88b4ef47dc955fdd7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ2MTI4MQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/3c048b93a606488f981cb7ecf4303576.png
[20201015153558777.png]: /images/20221123/9f8f57f87303479f8cd7909af0b1dd2e.png
[20201015153617902.png]: /images/20221123/60a77008eded450d86479ad118b9eada.png
[netty-demo]: https://gitee.com/JavaLionLi/LionLi-Labs/tree/master/netty-demo