開始

在本章的開頭把程式碼奉上，大家下載下來對照的學習,這些程式碼都是執行通過的。
上節我們講解了HTTP協議開發，但是，Http協議的開銷問題，導致它們不適用於低延遲的應用。為了解決這些問題，我們引入了webSocket。

HTTP協議的弊端

我們來總結一下HTTP協議的弊端：

1.HTTP協議是半雙工的協議。大家知道對講機嗎？它就是半雙工的裝置。當對方在說話時，你就不能說話了，也就是說一個時間點上，只能一個人在說話。現在已經被全雙工的電話給替代掉了，現在對講機這東西用的不多了。
2.HTTP協議冗長而繁瑣。HTTP訊息包含訊息頭，訊息體，換行符等，採用文字形式傳播，相比二進位制通訊協議，非常冗長且繁瑣。
3.針對伺服器推送的黑客攻擊。例如長時間輪詢。
 

為了解決以上HTTP協議效率底下的問題，WebSocket協議應運而生，它能更好的節約頻寬和伺服器資源並且實時通訊。下面就讓我們看看websocket協議的神奇之處。

WebSocket協議的特點

1.單一的TCP連線，採用全雙工通訊
2.對代理，防火牆，路由器透明。
3.無頭部資訊，cookie和身份驗證
4.無安全開銷
5.通過ping幀保持鏈路啟用
6.伺服器可以主動的對客戶端進行傳送訊息，而不需要輪詢。

總的來說我們webSocket被設計出來的目的就是為了取代輪詢這種高消耗的方式。

websocket連線過程

建立連線過程如下：

1.客戶端瀏覽器首先要向伺服器傳送一個HTTP請求，這個請求和通常的HTTP請求不同，包含了一些附加資訊，其中附加資訊“UpgradeWebSocket”表明這是一個申請協議升級的http請求。
2.伺服器解析這些附加頭資訊，然後生成應答資訊返回給客戶端，這樣客戶端和伺服器端的webSocket連線就建立起來了
3.這個連線會一直持續到客戶端或者伺服器的某一方主動關閉連線。
 

我們來看一下客戶端向伺服器請求的訊息：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade:websocket
Connection:Upgrade
Sec-WeSocket-Key:dGhlweidxlkjsdZQ== 
Origin:http://example.com
Sec-WebSocket-Protocol:chat,superchat
Sec-webSocket-Version:13

我們來看一下伺服器返回給客戶端的應答訊息：

HTTP/1.1 101 Switching Protocols
Upgrade:websocket
Connection:Upgrade
Sec-WebSocket-accept:siefjosigdfsl=
Sec-WebSocket-Protocol：chat
 

請求訊息中的“Sec-WebSocket-Key”是隨機的，伺服器端會用這些資料來構造出一個SHA-1的資訊摘要，把“Sec-WebSocket-Key”加上一個魔幻字串“25EAFA5-E914-47DA-95CA-C54B0DC85B11”.使用SHA-1加密，然後進行BASE-64編碼，將結果作為Sec-WebSocket-accept頭的值，返回給客戶端。

連線示意圖如下：

websocket生命週期

握手成功後，客戶端和伺服器就可以通過”message”方式進行通訊了，一個訊息由一個或者多個幀組成。

websocket連線關閉。

為關閉websocket連線，客戶端和伺服器需要通過一個安全的方法關閉底層TCP連線及TLS會話。如果合適，丟棄任何可能接收的位元組：必要時可以通過任何可用的手段關閉連線。

編碼開始

需求：我們要編寫一個webSocket伺服器，支援WebSocket的瀏覽器通過webSocket協議傳送請求給我們編寫的webSocket伺服器，伺服器對請求訊息進行判斷，如果是合法的webSocket請求，則獲取請求訊息體，並在後面追加字串：“歡迎使用Netty WebSocket 服務，現在時刻：系統時間”。
當然客戶端也是我們編寫的，其中內嵌js指令碼去建立webSocket連線，如果握手成功列印：“開啟websocket 服務正常，瀏覽器支援Websocket！”

首先對webSocket伺服器的功能進行簡單講解。websocket服務端接收到請求訊息後，先對訊息的型別進行判斷，如圖所示：

我們就是判斷upgrade取它的值判斷是否是websocket,如果不是webSocket型別的請求訊息，則返回HTTP 400 BAD REQUEST 響應給客戶端。如果是伺服器返回訊息，雙方連線正式建立。

由於篇幅問題，只對核心程式碼講解，全部程式碼大家可以下載下來看看。

EventLoopGroup bossGroup = new NioEventLoopGroup();
    EventLoopGroup workerGroup = new NioEventLoopGroup();
    try {
        ServerBootstrap b = new ServerBootstrap();
        b.group(bossGroup, workerGroup)
        .channel(NioServerSocketChannel.class)
        .childHandler(new ChannelInitializer<SocketChannel>() {

            @Override
            protected void initChannel(SocketChannel ch) throws Exception {
                //HttpServerCodec的作用是將請求和應答訊息編碼或者解碼為HTTP訊息;
                ch.pipeline().addLast("http-codec", new HttpServerCodec());
                //使用HttpObjectAggregator會把多個訊息轉換為一個單一的FullHttpRequest或是FullHttpResponse
                ch.pipeline().addLast("http-aggregator", new HttpObjectAggregator(65536));
                //支援處理非同步傳送大資料檔案，但不佔用過多的記憶體，防止發生記憶體洩漏,這裡是向客戶端傳送html5檔案
                ch.pipeline().addLast("http-chunked", new ChunkedWriteHandler());
                //這個是我們自定義的，處理檔案伺服器邏輯。主要功能還是在這個檔案中
                ch.pipeline().addLast("http-fileServerHandler", new WebSocketServerHandler());
            }
        });
        Channel ch  = b.bind(port).sync().channel();//這裡寫你本機的IP地址
        System.out.println("web socket server started at port "+port+".");
        System.out.println("open your browser and navigate to http://localhost:"+port+"/");
        ch.closeFuture().sync();
    } catch (Exception e) {

    }finally{
        bossGroup.shutdownGracefully();
        workerGroup.shutdownGracefully();
    }

講解：

HttpServerCodec講解：HTTP協議的請求解碼器和響應編碼器即HttpServerCodec，它會將HTTP客戶端請求轉成HttpRequest物件，將HttpResponse物件編碼成HTTP響應傳送給客戶端。
HttpObjectAggregator講解：使用HttpObjectAggregator會把多個訊息轉換為一個單一的FullHttpRequest或是FullHttpResponse

下面我們來看一下核心類WebSocketServerHandler，我都做的詳細的註釋，希望大家能看懂。

/**
 * @author 作者 YYD
 * @version 建立時間：2016年8月17日 上午6:32:23
 * @function 未新增
 */
public class WebSocketServerHandler extends SimpleChannelInboundHandler<Object>{
    private static final Logger logger = Logger.getLogger(WebSocketServerHandler.class.getName());
    private WebSocketServerHandshaker handshaker;
    /**
     * 接收客戶端發過來的訊息並處理
     * FullHttpRequest ：
     *  官網解釋：Combine the {@link HttpRequest} and {@link FullHttpMessage}, so the request is a <i>complete</i> HTTP
     * request.
     * 這個請求是 代表http請求完成的標記。
     */
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, Object msg)
            throws Exception {
        if(msg instanceof FullHttpRequest){//接收到客戶端的握手請求，開始處理握手
            handleHttpRequest(ctx,(FullHttpRequest)msg);
        }else if(msg instanceof WebSocketFrame){//接收到客戶端發過來的訊息（只過濾文字訊息），處理後發給客戶端。
            handleWebSocketFrame(ctx, (WebSocketFrame)msg);
        }
    }
    @Override
    public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {
        ctx.flush();
    }
    private void handleHttpRequest(ChannelHandlerContext ctx,FullHttpRequest req) throws Exception{
         /**
          * 如果不成功或者訊息頭不包含"Upgrade"，說明不是websocket連線，報400異常。
          */
        if(!req.getDecoderResult().isSuccess()||(!"websocket".equals(req.headers().get("Upgrade")))){
            sendHttpResponse(ctx,req,new DefaultFullHttpResponse(HttpVersion.HTTP_1_1,HttpResponseStatus.BAD_REQUEST));
            return;
        }
        /**
         * WebSocket是一種全新的協議，不屬於http無狀態協議，協議名為"ws"，這意味著一個websocket連線地址會是這樣的寫法： 
           ws://127.0.0.1:8080/websocket。ws不是http，所以傳統的web伺服器不一定支援，需要伺服器與瀏覽器同時支援， WebSocket才能正常執行，目前大部分瀏覽器都支援Websocket。
           WebSocketServerHandshaker 官網的解釋是：伺服器端Web套接字開啟和關閉握手基類 
           WebSocketServerHandshakerFactory 官網的解釋是：自動檢測正在使用的網路套接字協議的版本，並建立一個新的合適的 WebSocketServerHandshaker。
         */
        WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory("ws://localhost:8080/websocket",null,false);
        handshaker = wsFactory.newHandshaker(req);//建立一個握手協議
        if(handshaker == null){
            /**
             * Return that we need cannot not support the web socket version
             * 返回不支援websocket 版本
             */
            WebSocketServerHandshakerFactory.sendUnsupportedVersionResponse(ctx.channel());
        }else {
            handshaker.handshake(ctx.channel(), req);//開始握手
        }
    }
    /**
     * 我們判斷資料型別，只支援文字型別
     * @param ctx
     * @param frame
     */
    private void handleWebSocketFrame(ChannelHandlerContext ctx,WebSocketFrame frame) {
        if(frame instanceof CloseWebSocketFrame){//如是接收到的是關閉websocket，就關閉連線
            handshaker.close(ctx.channel(), (CloseWebSocketFrame) frame.retain());
            return;
        }
        if(frame instanceof PingWebSocketFrame){//如果資訊是2進位制資料，就反給它，
            ctx.channel().write(new PongWebSocketFrame(frame.content().retain()));
            return;
        }

        if(!(frame instanceof TextWebSocketFrame)){//哪果不是文字的資料，就報錯。
            throw new UnsupportedOperationException(String.format("%s frame types not supported",frame.getClass().getName()));
        }

        String request = ((TextWebSocketFrame)frame).text();
        if(logger.isLoggable(Level.FINE)){
            logger.fine(String.format("%s receive %s",ctx.channel(),request));
        }
        ctx.channel().write(new TextWebSocketFrame(request+",歡迎使用netty websocket 服務，現在時刻"+new Date().toString()));
    }
    private static void sendHttpResponse(ChannelHandlerContext ctx,FullHttpRequest req,FullHttpResponse res){
        if(res.getStatus().code() != 200){
            ByteBuf buf = Unpooled.copiedBuffer(res.getStatus().toString(),CharsetUtil.UTF_8);
            res.content().writeBytes(buf);
            buf.release();
            setContentLength(res,res.content().readableBytes());

        }
        ChannelFuture f = ctx.channel().writeAndFlush(res);//傳送訊息
        if(!isKeepAlive(req)||res.getStatus().code()!= 200){//如果斷開連線，或者傳送不成功，斷開連線。
            f.addListener(ChannelFutureListener.CLOSE);//關閉連線
        }
    }
    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause)
            throws Exception {
            cause.printStackTrace();
            ctx.close();
    }
}

上面的程式碼，我都做的詳細的註釋，大家可以對照著看看。
在handleHttpRequest方法中我們判斷訊息頭中是否包含“Upgrade”欄位，如果不包含就返回Http 400 響應。握手請求經過簡單校驗後，我們通過構造握手工廠，建立握手出理類webSocketServerHandshaker，通過它構造握手響應訊息返回給客戶端，同時將webSocket訊息的編碼和解碼類動態新增到ChannelPipeline中，用於websocket訊息的編解碼。

下面來看看客戶端瀏覽器程式碼

<html>
<head>
<meta charset="UTF-8">
netty websocket 時間伺服器
</head>
<br>
<body>
<br>
<script type="text/javascript">
var socket;
if(!window.WebSocket){
     window.WebSocket = window.MozWebSocket;
}
if(window.WebSocket){
    var  socket = new WebSocket("ws://localhost:9090/websocket");
    socket.onmessage = function(event){
        var ta = document.getElementById('responseText');
        ta.value="";
        ta.value = event.data
    };
    socket.onopen = function(event){
        var ta = document.getElementById('responseText');
        ta.value = '';
        ta.value = "開啟websocket服務正常，瀏覽器支援websocket!";   
    };
    socket.onclose = function(event){
        var ta = document.getElementById('responseText');
        ta.value = '';
        ta.value = "websocket關閉!";
    };
}else{
    alert("抱歉，您的瀏覽器不支援WebSocket 協議！");
}
function send(message){
    if(!window.WebSocket){
        return;
    }
    if(socket.readyState == window.WebSocket.OPEN){
        socket.send(message);
    }else{
        alert("WebSocket 還沒有建立連線！")
    }
}
</script>
<form onsubmit="return false;">
<input type="text" name="message" vaule="netty最佳實踐"/>
<br><br>
<input type="button" value="傳送 WebSocket 請求訊息" onclick="send(this.form.message.value)">
<hr color="blue"/>
<h3>服務端返回的應答訊息</h3>
<textarea id="responseText" style"width:500px;height:300px;"></textarea>
</form>
</body>
</html> 

我們這裡不加講解了，大家看看就明白了。

看看客戶端的執行效果

初始狀態效果圖

傳送訊息效果圖

結尾

在本章的結尾把程式碼奉上，大家下載下來對照的學習,這些程式碼都是執行通過的。
好了就講到這裡吧，由於HttP協議本身存在的弊端，產生了websocket協議。希望對大家有所幫助。有不懂的可以聯絡我[email protected]

同時鼓勵自己，堅持就會有奇蹟，加油！