websocket服务端启动类

基于 Netty 的特性，我们来看看简单聊天的系统是咋样的？那么，首先对于后端，我们需要创建一个Websocket Server，这里需要有一对线程组EventLoopGroup，定义完后，需要定义一个Server：

public static void main(String[] args) throws Exception {
        
        EventLoopGroup mainGroup = new NioEventLoopGroup();
        EventLoopGroup subGroup = new NioEventLoopGroup();
        
        try {
            ServerBootstrap server = new ServerBootstrap();
            server.group(mainGroup, subGroup)
                .channel(NioServerSocketChannel.class)
                .childHandler(new WSServerInitialzer());
            
            ChannelFuture future = server.bind(8088).sync();
            
            future.channel().closeFuture().sync();
        } finally {
            mainGroup.shutdownGracefully();
            subGroup.shutdownGracefully();
        }
}

将线程组加入Server，接下来，需要设置一个channel：NioServerSocketChannel，还有一个初始化器：WSServerInitialzer。

第二步，需要对Server进行端口版绑定：

ChannelFuture future = server.bind(8088).sync()

最后，需要对future进行监听。而且监听结束后需要对线程资源进行关闭：

mainGroup.shutdownGracefully();
subGroup.shutdownGracefully();

websocket子处理器initialzer

上面说了WebSocket Server，那么对于socket，有一个初始化处理器，这里我们来定义一个：

public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        ChannelPipeline pipeline = ch.pipeline();
        pipeline.addLast(new HttpServerCodec());
        pipeline.addLast(new ChunkedWriteHandler());
        pipeline.addLast(new HttpObjectAggregator(1024*64));

        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
        
        pipeline.addLast(new ChatHandler());
    }

}

由于websocket是基于http协议，所以需要有http的编解码器HttpServerCodec，同时，在一些http上，有一些数据流的处理，而且，数据流有大有小，那么可以添加一个大数据流的处理：ChunkedWriteHandler。

通常，会有对httpMessage进行聚合，聚合成FullHttpRequest或FullHttpResponse，而且，几乎在netty中的编程，都会使用到此hanler。

另外，websocket 服务器处理的协议，用于指定给客户端连接访问的路由 : "/ws"，本handler会帮你处理一些繁重的复杂的事，比如，会帮你处理握手动作： handshaking（close, ping, pong） ping + pong = 心跳。对于websocket来讲，都是以frames进行传输的，不同的数据类型对应的frames也不同。

最后，我们自定义了一个处理消息的handler：ChatHandler。

chatHandler对消息的处理

在Netty中，有一个用于为websocket专门处理文本的对象TextWebSocketFrame，frame是消息的载体。

public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    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);
        
        clients.writeAndFlush(new TextWebSocketFrame("服务器时间在 " + LocalDateTime.now() + " 接受到消息, 消息为：" + content));

    }

    @Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        clients.add(ctx.channel());
        System.out.println("客户端连接，channle对应的长id为：" + ctx.channel().id().asLongText());
        System.out.println("客户端连接，channle对应的短id为：" + ctx.channel().id().asShortText());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
        System.out.println("客户端断开，channle对应的长id为：" + ctx.channel().id().asLongText());
        System.out.println("客户端断开，channle对应的短id为：" + ctx.channel().id().asShortText());
    }
}

一开始消息在载体TextWebSocketFrame中，这时候可以直接拿到其中的内容，并且打印出来。而且可以把消息发到对应请求的客户端。当然，也可以把消息转发给所有的客户端，这就涉及到Netty中的channel。这时候，需要管理channel中的用户，这样才能把消息转发到所有channel的用户。也就是上面的handlerAdded函数，当客户端连接服务端之后打开连接，获取客户端的channle，并且放到ChannelGroup中去进行管理。同时，客户端与服务端断开、关闭连接后，会触发handlerRemoved函数，同时ChannelGroup会自动移除对应客户端的channel。

接下来，需要把数据获取后刷新到所有客户端：

for (Channel channel : clients) {
            channel.writeAndFlush(new TextWebSocketFrame("[服务器在]" + LocalDateTime.now() + "接受到消息, 消息为：" + content));
}

注意：这里需要借助于载体来把信息Flush，因为writeAndFlush函数是需要传对象载体，而不是直接字符串。其实同样，作为ChannelGroup clients，其本身提供了writeAndFlush函数，可以直接输出到所有客户端：

clients.writeAndFlush(new TextWebSocketFrame("服务器时间在 " + LocalDateTime.now() + " 接受到消息, 消息为：" + content));

基于js的websocket相关api介绍

首先，需要一个客户端与服务端的连接，这个连接桥梁在js中就是一个socket：

var socket = new WebSocket("ws://192.168.174.145:8088/ws");

再来看看其生命周期，在后端，channel有其生命周期，而前端socket中:

• onopen()，当客户端与服务端建立连接时，就会触发onopen事件
• onmessage()，是在客户端收到消息时，就会触发onmessage事件
• onerror()，出现异常时，前端会触发onerror事件
• onclose()，客户端与服务端连接关闭后，就会触发onclose事件

接下来看看两个主动的方法：

• Socket.send()，在前端主动获取内容后，通过send进行消息发送
• Socket.close()，当用户触发某个按钮，就会断开客户端与服务端的连接

以上就是对于前端websocket js相对应的api。

实现前端websocket

上面介绍了后端对于消息的处理、编解码等，又介绍了websocket js的相关。接下来，我们看看前端如何实现websocket，首先我们先写一个文本输入、点击等功能:

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <div>send msg:</div>
        <input type="text" id="msgContent"/>
        <input type="button" value="send" onclick="CHAT.chat()"/>
        
        <div>receive msg:</div>
        <div id="receiveMsg" style="background-color: gainsboro;"></div>
    </body>
</html>

访问连接：C:\Users\damon\Desktop\netty\WebChat\index.html，我们可以看到效果：

接下来，我们需要写websocket js：

<script type="application/javascript">
            
            window.CHAT = {
                socket: null,
                init: function() {
                    if (window.WebSocket) {
                        CHAT.socket = new WebSocket("ws://192.168.174.145: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协议...");
                    }
                },
                chat: function() {
                    var msg = document.getElementById("msgContent");
                    CHAT.socket.send(msg.value);
                }
            };
            
            CHAT.init();
            
        </script>

这样，一个简单的websocket js就写完了，当在文本框输入信息，点击发送，后端即可收到信息，并且回复。