【Netty】WebSocket
一、前言
前面學習了codec和ChannelHandler之間的關系,接著學習WebSocket。
二、WebSocket
2.1. WebSocket介紹
WebSocket協議允許客戶端和服務器隨時傳輸消息,要求他們異步處理接收的消息,而幾乎所有的瀏覽器都支持WebSocket協議,Netty支持WebSocket協議的所有實現,可以在應用中直接使用。
2.2. WebSocket應用示例
下面示例展示了如何使用WebSocket協議實現基於瀏覽器的實時聊天應用,示例邏輯圖如下圖所示。
處理邏輯如下
· 客戶端發送消息。
· 消息轉發至其他所有客戶端。
本示例中只實現服務端部分,客戶端網頁為index.html。
2.3 添加WebSocket支持
升級握手機制可用於從標準HTTP或HTTPS協議切換到WebSocket,使用WebSocket的應用程序以HTTP/S開頭,當請求指定URL時將會啟動該協議。本應用有如下慣例:如果URL請求以/ ws結尾,我們將使用升級的WebSocket協議,否則,將使用HTTP/S協議,連接升級後,所有數據將使用WebSocket傳輸。下圖展示服務端的邏輯。
1. 處理HTTP請求
首先我們實現處理HTTP請求的組件,該組件將為訪問聊天室的頁面提供服務,並顯示連接的客戶端發送的消息。下面是HttpRequestHandler代碼,其繼承SimpleChannelInboundHandler。
public class HttpRequestHandler extends SimpleChannelInboundHandler<FullHttpRequest> { private final String wsUri; private static final File INDEX; static { URL location = HttpRequestHandler.class .getProtectionDomain() .getCodeSource().getLocation();try { String path = location.toURI() + "index.html"; path = !path.contains("file:") ? path : path.substring(5); INDEX = new File(path); } catch (URISyntaxException e) { throw new IllegalStateException( "Unable to locate index.html", e); } } public HttpRequestHandler(String wsUri) { this.wsUri = wsUri; } @Override public void channelRead0(ChannelHandlerContext ctx, FullHttpRequest request) throws Exception { if (wsUri.equalsIgnoreCase(request.getUri())) { ctx.fireChannelRead(request.retain()); } else { if (HttpHeaders.is100ContinueExpected(request)) { send100Continue(ctx); } RandomAccessFile file = new RandomAccessFile(INDEX, "r"); HttpResponse response = new DefaultHttpResponse( request.getProtocolVersion(), HttpResponseStatus.OK); response.headers().set( HttpHeaders.Names.CONTENT_TYPE, "text/plain; charset=UTF-8"); boolean keepAlive = HttpHeaders.isKeepAlive(request); if (keepAlive) { response.headers().set( HttpHeaders.Names.CONTENT_LENGTH, file.length()); response.headers().set( HttpHeaders.Names.CONNECTION, HttpHeaders.Values.KEEP_ALIVE); } ctx.write(response); if (ctx.pipeline().get(SslHandler.class) == null) { ctx.write(new DefaultFileRegion( file.getChannel(), 0, file.length())); } else { ctx.write(new ChunkedNioFile(file.getChannel())); } ChannelFuture future = ctx.writeAndFlush( LastHttpContent.EMPTY_LAST_CONTENT); if (!keepAlive) { future.addListener(ChannelFutureListener.CLOSE); } } } private static void send100Continue(ChannelHandlerContext ctx) { FullHttpResponse response = new DefaultFullHttpResponse( HttpVersion.HTTP_1_1, HttpResponseStatus.CONTINUE); ctx.writeAndFlush(response); } @Override public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception { cause.printStackTrace(); ctx.close(); } }
上述代碼用於處理純HTTP請求,對於WebSocket而言,數據使用幀進行傳輸,完整的數據包含多幀。
2. 處理WebSocket幀
WebSocket定義了六種幀,如下圖所示。
對於聊天應用而言,其包含如下幀:CloseWebSocketFrame、PingWebSocketFrame、PongWebSocketFrame、TextWebSocketFrame。
下面代碼展示了用於處理TextWebSocketFrames的ChannelHandler。
public class TextWebSocketFrameHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> { private final ChannelGroup group; public TextWebSocketFrameHandler(ChannelGroup group) { this.group = group; } @Override public void userEventTriggered(ChannelHandlerContext ctx, Object evt) throws Exception { if (evt == WebSocketServerProtocolHandler .ServerHandshakeStateEvent.HANDSHAKE_COMPLETE) { ctx.pipeline().remove(HttpRequestHandler.class); group.writeAndFlush(new TextWebSocketFrame( "Client " + ctx.channel() + " joined")); group.add(ctx.channel()); } else { super.userEventTriggered(ctx, evt); } } @Override public void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception { group.writeAndFlush(msg.retain()); } }
3. 初始化ChannelPipeline
為在ChannelPipeline中添加ChannelHandler,需要繼承ChannelInitializer並且實現initChannel方法,下面是ChatServerInitializer的代碼。
public class ChatServerInitializer extends ChannelInitializer<Channel> { private final ChannelGroup group; public ChatServerInitializer(ChannelGroup group) { this.group = group; } @Override protected void initChannel(Channel ch) throws Exception { ChannelPipeline pipeline = ch.pipeline(); pipeline.addLast(new HttpServerCodec()); pipeline.addLast(new ChunkedWriteHandler()); pipeline.addLast(new HttpObjectAggregator(64 * 1024)); pipeline.addLast(new HttpRequestHandler("/ws")); pipeline.addLast(new WebSocketServerProtocolHandler("/ws")); pipeline.addLast(new TextWebSocketFrameHandler(group)); } }
對於使用HTTP協議(升級前)和WebSocket協議(升級後)的管道中的處理器分別如下圖所示。
4. Bootstrapping
ChatServer類用於啟動服務器並且安裝ChatServerInitializer,其代碼如下。
public class ChatServer { private final ChannelGroup channelGroup = new DefaultChannelGroup(ImmediateEventExecutor.INSTANCE); private final EventLoopGroup group = new NioEventLoopGroup(); private Channel channel; public ChannelFuture start(InetSocketAddress address) { ServerBootstrap bootstrap = new ServerBootstrap(); bootstrap.group(group) .channel(NioServerSocketChannel.class) .childHandler(createInitializer(channelGroup)); ChannelFuture future = bootstrap.bind(address); future.syncUninterruptibly(); channel = future.channel(); return future; } protected ChannelInitializer<Channel> createInitializer( ChannelGroup group) { return new ChatServerInitializer(group); } public void destroy() { if (channel != null) { channel.close(); } channelGroup.close(); group.shutdownGracefully(); } public static void main(String[] args) throws Exception { if (args.length != 1) { System.err.println("Please give port as argument"); System.exit(1); } int port = Integer.parseInt(args[0]); final ChatServer endpoint = new ChatServer(); ChannelFuture future = endpoint.start( new InetSocketAddress(port)); Runtime.getRuntime().addShutdownHook(new Thread() { @Override public void run() { endpoint.destroy(); } }); future.channel().closeFuture().syncUninterruptibly(); } }
上述代碼就完成了服務端的所有代碼,接著進行測試。
2.4 加密應用
上述代碼中可正常進行通信,但是並未加密,首先需要添加SecureChatServerInitializer,其代碼如下。
public class SecureChatServerInitializer extends ChatServerInitializer { private final SslContext context; public SecureChatServerInitializer(ChannelGroup group, SslContext context) { super(group); this.context = context; } @Override protected void initChannel(Channel ch) throws Exception { super.initChannel(ch); SSLEngine engine = context.newEngine(ch.alloc()); ch.pipeline().addFirst(new SslHandler(engine)); } }
然後添加SecureChatServerInitializer,代碼如下。
public class SecureChatServer extends ChatServer { private final SslContext context; public SecureChatServer(SslContext context) { this.context = context; } @Override protected ChannelInitializer<Channel> createInitializer( ChannelGroup group) { return new SecureChatServerInitializer(group, context); } public static void main(String[] args) throws Exception { if (args.length != 1) { System.err.println("Please give port as argument"); System.exit(1); } int port = Integer.parseInt(args[0]); SelfSignedCertificate cert = new SelfSignedCertificate(); SslContext context = SslContext.newServerContext( cert.certificate(), cert.privateKey()); final SecureChatServer endpoint = new SecureChatServer(context); ChannelFuture future = endpoint.start(new InetSocketAddress(port)); Runtime.getRuntime().addShutdownHook(new Thread() { @Override public void run() { endpoint.destroy(); } }); future.channel().closeFuture().syncUninterruptibly(); } }
2.5 測試應用
在編譯的classes文件夾中加入index.html(客戶端),其中index.html的源碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> <script type="text/javascript"> var socket; if (!window.WebSocket) { window.WebSocket = window.MozWebSocket; } if (window.WebSocket) { socket = new WebSocket("ws://localhost:8080/ws"); socket.onmessage = function(event) { var ta = document.getElementById(‘responseText‘); ta.value = ta.value + ‘\n‘ + event.data }; socket.onopen = function(event) { var ta = document.getElementById(‘responseText‘); ta.value = "connected!"; }; socket.onclose = function(event) { var ta = document.getElementById(‘responseText‘); ta.value = ta.value + "connection is shutdown"; }; } else { alert("your broswer do not support WebSocket!"); } function send(message) { if (!window.WebSocket) { return; } if (socket.readyState == WebSocket.OPEN) { socket.send(message); } else { alert("connection is not start."); } } </script> <form onsubmit="return false;"> <h3>WebSocket ChatRoom:</h3> <textarea id="responseText" style="width: 500px; height: 300px;"></textarea> <br> <input type="text" name="message" style="width: 300px" value=""> <input type="button" value="Send Message" onclick="send(this.form.message.value)"> <input type="button" onclick="javascript:document.getElementById(‘responseText‘).value=‘‘" value="Clear message"> </form> <br> <br> </body> </html>
然後啟動ChatServer(非加密方式),最後在瀏覽器中訪問localhost:8080(可打開多個窗口,多個客戶端),其運行效果如下。
可以看到兩個客戶端之間可以正常進行通信,互相發送消息。
三、總結
本篇博文通過一個示例講解了WebSocket協議的具體使用,可完成不同客戶端之間的通信,也謝謝各位園友的觀看~
【Netty】WebSocket