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

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

說明:本篇博客是基於學習某網有關視頻教學。
目的:建立一個websocket服務器,獲取客戶端傳來的數據,同時向客戶端發送數據

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作了些處理工做。

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、測試

經過測試能夠總結

一、頁面初始化的時候就已經成功和服務端websocket創建鏈接成功。
二、服務端收到客戶端數據,並向客戶端發送數據。
三、當關閉頁面的時候,既至關於關閉了該websocket鏈接,服務端會自動移除。