【Netty】(7）---搭建websocket服务器

时间 2019-11-24

原文原文链接

【Netty】(7）---搭建websocket服务器

说明:本篇博客是基于学习某网有关视频教学。
目的:建立一个websocket服务器,获取客户端传来的数据,同时向客户端发送数据javascript

1、服务端

一、Main主类

public class WSServer {
    public static void main(String[] args) throws Exception {

        // 定义一对线程组
        // 主线程组, 用于接受客户端的链接，
        EventLoopGroup mainGroup = new NioEventLoopGroup();
        // 从线程组, 负责IO交互工做
        EventLoopGroup subGroup = new NioEventLoopGroup();
        try {
            //netty服务器的建立, 辅助工具类，用于服务器通道的一系列配置
            ServerBootstrap server = new ServerBootstrap();
            //绑定两个线程组
            server.group(mainGroup, subGroup)
                    //指定NIO的模式
                    .channel(NioServerSocketChannel.class)
                    //子处理器，用于处理workerGroup
                    .childHandler(new WSServerInitialzer());

            // 启动server，而且设置8088为启动的端口号，同时启动方式为同步
            ChannelFuture future = server.bind(8088).sync();
            // 监听关闭的channel，设置位同步方式
            future.channel().closeFuture().sync();
        } finally {
            //退出线程组
            mainGroup.shutdownGracefully();
            subGroup.shutdownGracefully();
        }
    }
}

二、WSServerInitialzer类(子处理器)

public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        ChannelPipeline pipeline = ch.pipeline();

        // websocket 基于http协议，因此要有http编解码器 服务端用HttpServerCodec
        pipeline.addLast(new HttpServerCodec());
        // 对写大数据流的支持
        pipeline.addLast(new ChunkedWriteHandler());

      /**
         * 咱们一般接收到的是一个http片断，若是要想完整接受一次请求的全部数据，咱们须要绑定HttpObjectAggregator，而后咱们
         * 就能够收到一个FullHttpRequest-是一个完整的请求信息。
         *对httpMessage进行聚合，聚合成FullHttpRequest或FullHttpResponse
         * 几乎在netty中的编程，都会使用到此hanler
         */
        pipeline.addLast(new HttpObjectAggregator(1024*64));

        // ====================== 以上是用于支持http协议 , 如下是支持httpWebsocket   ======================

        /**
         * websocket 服务器处理的协议，用于指定给客户端链接访问的路由 : /ws
         * 本handler会帮你处理一些繁重的复杂的事
         * 会帮你处理握手动做： handshaking（close, ping, pong） ping + pong = 心跳
         * 对于websocket来说，都是以frames进行传输的，不一样的数据类型对应的frames也不一样
         */
        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));

        // 自定义的handler
        pipeline.addLast(new ChatHandler());
    }

}

三、ChatHandler(助手类)

/**
 * @Description: 处理消息的handler
 * TextWebSocketFrame： 在netty中，是用于为websocket专门处理文本的对象，frame是消息的载体
 *  这里已经指定了类型 若是这里是Object 那么下面还需判断是否是TextWebSocketFrame类型
 */
public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {

    // 用于记录和管理全部客户端的channle
    private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);

    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg)
            throws Exception {
        // 获取客户端传输过来的消息
        String content = msg.text();
        System.out.println("接受到的数据：" + content);

//      for (Channel channel: clients) {
//          channel.writeAndFlush(
//              new TextWebSocketFrame(
//                      "[服务器在]" + LocalDateTime.now()
//                      + "接受到消息, 消息为：" + content));
//      }
        // 下面这个方法，和上面的for循环，一致   向客户端发送数据
        clients.writeAndFlush(new TextWebSocketFrame("我是服务器,我收到你的消息为:" + content));

    }

    /**
     * 当客户端链接服务端以后（打开链接）
     * 获取客户端的channle，而且放到ChannelGroup中去进行管理
     */
    @Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        clients.add(ctx.channel());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
        // 当触发handlerRemoved，ChannelGroup会自动移除对应客户端的channel,因此下面的remove不用咱们再手写
//      clients.remove(ctx.channel());
        System.out.println("客户端断开，channle对应的长id为：" + ctx.channel().id().asLongText());
        System.out.println("客户端断开，channle对应的短id为：" + ctx.channel().id().asShortText());
    }
}

到这里服务端已经写好了,和以前搭建的服务器大体没什么区别，主要区别在于ChannelPipeline添加了不一样的Handel,助手类对websocket作了些处理工做。html

2、客户端

客户端这边是采用Hbuilderx工具建立的前端项目，代码以下前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <div>发送消息:</div>
        <input type="text" id="msgContent"/>
        <input type="button" value="点我发送" onclick="CHAT.chat()"/>
        
        <div>接受消息：</div>
        <div id="receiveMsg" style="background-color: gainsboro;"></div>
        
        <script type="application/javascript">
            
            window.CHAT = {
                socket: null,
                init: function() {
                    <!--判断浏览器是否支持 websocket-->
                    if (window.WebSocket) {
                        <!--链接服务器websocket IP+端口号 ／ws是服务器WebSocketServerProtocolHandler添加的-->
                        CHAT.socket = new WebSocket("ws://127.0.0.1:8088/ws");
                        CHAT.socket.onopen = function() {
                            console.log("链接创建成功...");
                        },
                        CHAT.socket.onclose = function() {
                            console.log("链接关闭...");
                        },
                        CHAT.socket.onerror = function() {
                            console.log("发生错误...");
                        },
                        CHAT.socket.onmessage = function(e) {
                            console.log("接受到消息：" + e.data);
                            var receiveMsg = document.getElementById("receiveMsg");
                            var html = receiveMsg.innerHTML;
                            receiveMsg.innerHTML = html + "<br/>" + e.data;
                        }
                    } else {
                        alert("浏览器不支持websocket协议...");
                    }
                },
                <!--onclick事件触发-->
                chat: function() {
                    
                    <!--获取消息,发送消息-->
                    var msg = document.getElementById("msgContent");
                    CHAT.socket.send(msg.value);
                }
            };
            
            <!--初始化方法-->
            CHAT.init();
            
        </script>
    </body>
</html>

3、测试

经过测试能够总结java

一、页面初始化的时候就已经成功和服务端websocket创建链接成功。
二、服务端收到客户端数据,并向客户端发送数据。
三、当关闭页面的时候,既至关于关闭了该websocket链接,服务端会自动移除。