Websocket入門コード

5279 ワード

リアルタイム通信
  • Ajax輪訓
  • 非同期の一定時間ごとにサーバに要求
  • を送信する.
  • Long pull
  • Ajaxリクエストのように、ブロックされた方法であり、リクエストサーバ側は、サーバ応答
  • を待機する.
  • websocket
  • HTTPプロトコルに基づく永続化プロトコル
  • WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
  • WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.


  • サービス側実装コード
    public class WSServer {
    
        public static void main(String[] args) throws InterruptedException {
            EventLoopGroup mainGroup = new NioEventLoopGroup();
            EventLoopGroup subGroup = new NioEventLoopGroup();
    
            try {
                ServerBootstrap server = new ServerBootstrap();
                server.group(mainGroup,subGroup)
                        .channel(NioServerSocketChannel.class)
                        .childHandler(new WSServerInitializer());
                ChannelFuture channelFuture = server.bind(8080).sync();
                channelFuture.channel().closeFuture().sync();
            } finally {
                mainGroup.shutdownGracefully();
                subGroup.shutdownGracefully();
            }
        }
    }
    
    public class WSServerInitializer extends ChannelInitializer {
    
    
        @Override
        protected void initChannel(SocketChannel ch) throws Exception {
            ChannelPipeline pipeline = ch.pipeline();
            // websocket  http  ,    http    
            pipeline.addLast(new HttpServerCodec());
            //          
            pipeline.addLast(new ChunkedWriteHandler());
            //  httpMessage    ,    FullHttpRequest fullHttpResponse
            pipeline.addLast(new HttpObjectAggregator(1024*64));
            // -----------------       HTTP  ------------------
            // websocket     ,               , : /ws
            //  handler              
            //          : handshaking(close,ping,pong) ping+pong=  
            //   websocket  ,   frames     ,          frames   
            pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
            //     handler
            pipeline.addLast(new ChatHandler());
        }
    }
    
    /**
     * @author: webin
     * @date: 2020/4/4 15:57
     * @description:         handler
     *  TextWebSocketFrame:  netty ,    websocket         ,frame      
     * @version: 0.0.1
     */
    public class ChatHandler extends SimpleChannelInboundHandler {
    
        /**              channel,    channel         */
        private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
    
        @Override
        protected void channelRead0(ChannelHandlerContext channelHandlerContext, TextWebSocketFrame msg) throws Exception {
            //             
            String text = msg.text();
            System.out.println("      : " + text);
    
            for (Channel channel : clients) {
                channel.writeAndFlush(
                        new TextWebSocketFrame("[        :]"+ LocalDateTime.now()+"      ,     : "+text)
                );
            }
            //        
    //        clients.writeAndFlush(
    //                new TextWebSocketFrame("[        :]"+ LocalDateTime.now()+"      ,     : "+text)
    //        );
    
        }
    
        /**
         *             
         *        channel,    channelGroup     
         * @param ctx
         * @throws Exception
         */
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
    
            clients.add(ctx.channel());
        }
    
        @Override
        public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
           //    handlerRemoved,ChannelGroup           Channel
            clients.remove(ctx.channel());
            System.out.println("     ,channel    id:" + ctx.channel().id().asLongText());
            System.out.println("     ,channel    id:" + ctx.channel().id().asShortText());
        }
    }
    

    クライアント実装コード Title
    :
    :
    window.CHAT = { socket: null, init: function () { if (window.WebSocket) { CHAT.socket = new WebSocket("ws://127.0.0.1:8080/ws"); CHAT.socket.onopen = 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 }; CHAT.socket.close = function() { console.log(" ...") }; CHAT.socket.onerror = function () { console.log(" ... ") } } else { alert(" WebSocket ") } }, chat: function () { var msg = document.getElementById("msgContent") CHAT.socket.send(msg.value) } } CHAT.init();