[Java] Netty Websocket Server Javascript Client

阿新 • • 發佈：2019-02-19

WebSocket協議的出現無疑是 HTML5 中最令人興奮的功能特性之一，它能夠很好地替代Comet技術以及Flash的XmlSocket來實現基於HTTP協議的雙向通訊。目前主流的瀏覽器，如Chrome、Firefox、IE10、Opera10、Safari等都已經支援WebSocket。另外，在服務端也出現了一些不錯的WebSocket專案，如Resin、Jetty7、pywebsocket等。不過，本文將介紹的是如何使用強大的Netty框架（Netty-3.5.7.Final）來實現WebSocket服務端。

Netty3框架的效能優勢已無需多說，但更讓開發者舒心的是，Netty3還為大家提供了非常豐富的協議實現，包括HTTP、Protobuf、WebSocket等，開發者們可以很輕鬆的實現自己的Socket Server。按照Netty3的常規思路，我們需要準備以下3個檔案：

1、WebSocketServer.java
2、WebSocketServerHandler.java
3、WebSocketServerPipelineFactory.java

以上3個檔案分別包含了主程式的邏輯、服務的處理邏輯以及Socket Pipeline的設定邏輯。Java程式碼實現如下：

WebSocketServer.java

import java.net.InetSocketAddress;
import java.util.concurrent.Executors;

import org.jboss.netty.bootstrap.ServerBootstrap;
import org.jboss.netty.channel.socket.nio.NioServerSocketChannelFactory;

public class WebSocketServer
{
    private final int port;

    public WebSocketServer(int port) {
        this.port = port;
    }

    public void run() {
        // 設定 Socket channel factory
        ServerBootstrap bootstrap = new ServerBootstrap(
                new NioServerSocketChannelFactory(
                        Executors.newCachedThreadPool(),
                        Executors.newCachedThreadPool()));

        // 設定 Socket pipeline factory
        bootstrap.setPipelineFactory(new WebSocketServerPipelineFactory());

        // 啟動服務，開始監聽
        bootstrap.bind(new InetSocketAddress(port));

        // 列印提示資訊
        System.out.println("Web socket server started at port " + port + '.');
        System.out.println("Open your browser and navigate to http://localhost:" + port + '/');
    }

    public static void main(String[] args) {
        int port;
        if (args.length > 0) {
            port = Integer.parseInt(args[0]);
        } else {
            port = 8080;
        }
        new WebSocketServer(port).run();
    }
}

WebSocketServerPipelineFactory.java

import static org.jboss.netty.channel.Channels.*;

import org.jboss.netty.channel.ChannelPipeline;
import org.jboss.netty.channel.ChannelPipelineFactory;
import org.jboss.netty.handler.codec.http.HttpChunkAggregator;
import org.jboss.netty.handler.codec.http.HttpRequestDecoder;
import org.jboss.netty.handler.codec.http.HttpResponseEncoder;

public class WebSocketServerPipelineFactory implements ChannelPipelineFactory {
    public ChannelPipeline getPipeline() throws Exception {
        // pipeline 的配置與 邏輯
        ChannelPipeline pipeline = pipeline();
        pipeline.addLast("decoder", new HttpRequestDecoder());
        pipeline.addLast("aggregator", new HttpChunkAggregator(65536));
        pipeline.addLast("encoder", new HttpResponseEncoder());
        pipeline.addLast("handler", new WebSocketServerHandler());
        return pipeline;
    }
}

WebSocketServerHandler.java

import static org.jboss.netty.handler.codec.http.HttpHeaders.*;
import static org.jboss.netty.handler.codec.http.HttpHeaders.Names.*;
import static org.jboss.netty.handler.codec.http.HttpMethod.*;
import static org.jboss.netty.handler.codec.http.HttpResponseStatus.*;
import static org.jboss.netty.handler.codec.http.HttpVersion.*;

import org.jboss.netty.buffer.ChannelBuffer;
import org.jboss.netty.buffer.ChannelBuffers;
import org.jboss.netty.channel.ChannelFuture;
import org.jboss.netty.channel.ChannelFutureListener;
import org.jboss.netty.channel.ChannelHandlerContext;
import org.jboss.netty.channel.ExceptionEvent;
import org.jboss.netty.channel.MessageEvent;
import org.jboss.netty.channel.SimpleChannelUpstreamHandler;
import org.jboss.netty.handler.codec.http.DefaultHttpResponse;
import org.jboss.netty.handler.codec.http.HttpHeaders;
import org.jboss.netty.handler.codec.http.HttpRequest;
import org.jboss.netty.handler.codec.http.HttpResponse;
import org.jboss.netty.handler.codec.http.websocketx.CloseWebSocketFrame;
import org.jboss.netty.handler.codec.http.websocketx.PingWebSocketFrame;
import org.jboss.netty.handler.codec.http.websocketx.PongWebSocketFrame;
import org.jboss.netty.handler.codec.http.websocketx.TextWebSocketFrame;
import org.jboss.netty.handler.codec.http.websocketx.WebSocketFrame;
import org.jboss.netty.handler.codec.http.websocketx.WebSocketServerHandshaker;
import org.jboss.netty.handler.codec.http.websocketx.WebSocketServerHandshakerFactory;
import org.jboss.netty.logging.InternalLogger;
import org.jboss.netty.logging.InternalLoggerFactory;
import org.jboss.netty.util.CharsetUtil;

public class WebSocketServerHandler extends SimpleChannelUpstreamHandler
{
    private static final InternalLogger logger = InternalLoggerFactory
            .getInstance(WebSocketServerHandler.class);

    private static final String WEBSOCKET_PATH = "/websocket";

    private WebSocketServerHandshaker handshaker;

    @Override
    public void messageReceived(ChannelHandlerContext ctx, MessageEvent e)
            throws Exception {
        // 處理接受訊息
        Object msg = e.getMessage();
        if (msg instanceof HttpRequest) {
            handleHttpRequest(ctx, (HttpRequest) msg);
        } else if (msg instanceof WebSocketFrame) {
            handleWebSocketFrame(ctx, (WebSocketFrame) msg);
        }
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, ExceptionEvent e)
            throws Exception {
        // 處理異常情況
        e.getCause().printStackTrace();
        e.getChannel().close();
    }

    private void handleHttpRequest(ChannelHandlerContext ctx, HttpRequest req)
            throws Exception {
        // 只接受 HTTP GET 請求
        if (req.getMethod() != GET) {
            sendHttpResponse(ctx, req, new DefaultHttpResponse(HTTP_1_1,
                    FORBIDDEN));
            return;
        }

        // Websocket 握手開始
        WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory(
                getWebSocketLocation(req), null, false);
        handshaker = wsFactory.newHandshaker(req);
        if (handshaker == null) {
            wsFactory.sendUnsupportedWebSocketVersionResponse(ctx.getChannel());
        } else {
            handshaker.handshake(ctx.getChannel(), req).addListener(
                    WebSocketServerHandshaker.HANDSHAKE_LISTENER);
        }
    }

    private void handleWebSocketFrame(ChannelHandlerContext ctx,
            WebSocketFrame frame) {
        // Websocket 握手結束
        if (frame instanceof CloseWebSocketFrame) {
            handshaker.close(ctx.getChannel(), (CloseWebSocketFrame) frame);
            return;
        } else if (frame instanceof PingWebSocketFrame) {
            ctx.getChannel().write(new PongWebSocketFrame(frame.getBinaryData()));
            return;
        } else if (!(frame instanceof TextWebSocketFrame)) {
            throw new UnsupportedOperationException(String.format("%s frame types not supported",
                    frame.getClass().getName()));
        }

        // 處理接受到的資料（轉成大寫）並返回
        String request = ((TextWebSocketFrame) frame).getText();
        if (logger.isDebugEnabled()) {
            logger.debug(String.format("Channel %s received %s", ctx.getChannel().getId(), request));
        }
        ctx.getChannel().write(new TextWebSocketFrame(request.toUpperCase()));
    }

    private static void sendHttpResponse(ChannelHandlerContext ctx,
            HttpRequest req, HttpResponse res) {
        // 返回 HTTP 錯誤頁面
        if (res.getStatus().getCode() != 200) {
            res.setContent(ChannelBuffers.copiedBuffer(res.getStatus().toString(), CharsetUtil.UTF_8));
            setContentLength(res, res.getContent().readableBytes());
        }

        // 傳送返回資訊並關閉連線
        ChannelFuture f = ctx.getChannel().write(res);
        if (!isKeepAlive(req) || res.getStatus().getCode() != 200) {
            f.addListener(ChannelFutureListener.CLOSE);
        }
    }

    private static String getWebSocketLocation(HttpRequest req) {
        return "ws://" + req.getHeader(HttpHeaders.Names.HOST) + WEBSOCKET_PATH;
    }
}

以上程式碼的邏輯還是比較清晰的：首先，在WebSocketServer中設定WebSocketServerPipelineFactory；然後，在WebSocketServerPipelineFactory中設定WebSocketServerHandler；接著，在WebSocketServerHandler處理請求並返回結果；其中，最重要的處理邏輯位於handleWebSocketFrame方法中，也就是把獲取到的請求資訊全部轉化成大寫並返回。最後，執行WebSocketServer.java就可以啟動WebSocket服務，監聽本地的8080埠。至此，WebSocket服務端已經全部準備就緒。這裡，其實我們已經同時開發了一個簡單的HTTP伺服器，介面截圖如下：

接下來，我們需要準備使用Javascript實現的WebSocket客戶端，實現非常簡單，Javascript程式碼實現如下：

websocket.html

<html><head><title>Web Socket Client</title></head>
<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
    window.WebSocket = window.MozWebSocket;
}
// Javascript Websocket Client
if (window.WebSocket) {
    socket = new WebSocket("ws://localhost:8080/websocket");
    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 = "Web Socket opened!";
    };
    socket.onclose = function(event) {
        var ta = document.getElementById('responseText');
        ta.value = ta.value + "Web Socket closed";
    };
} else {
    alert("Your browser does not support Web Socket.");
}
// Send Websocket data
function send(message) {
    if (!window.WebSocket) { return; }
    if (socket.readyState == WebSocket.OPEN) {
        socket.send(message);
    } else {
        alert("The socket is not open.");
    }
}
</script>
<h3>Send :</h3>
<form onsubmit="return false;">
<input type="text" name="message" value="Hello World!"/><input type="button" value="Send Web Socket Data" onclick="send(this.form.message.value)" />
<h3>Receive :</h3>
<textarea id="responseText" style="width:500px;height:300px;"></textarea>
</form>
</body>
</html>

以上Javascript程式碼的邏輯很好理解：即建立一個指向對應WebSocket地址（ws://localhost:8080/websocket）的Socket連線，進而進行傳送和獲取操作。其實，我們只需要把websocket.html檔案放置到任意的HTTP伺服器上，並開啟對應URL地址，就可以看到以下的Demo介面：

輸入文字“Hello World”並點選“Send Web Socket Data”按鈕就可以向WebSocket的服務端傳送訊息了。從上圖中我們還可以看到，在“Receive”下方的輸出框中看到返回的訊息（大寫過的HELLO WORLD文字），這樣一次基本的資訊互動就完成了。當然，此時如果把服務端關閉，輸出框中則會看到“Web Socket closed”資訊。

[Java] Netty Websocket Server Javascript Client

[Java] Netty Websocket Server Javascript Client

Python3 websocket server與client及javascript client通訊實現原理

swoole webSocket server or client example

python client 與 java netty server ，用protobuf通訊的問題

protocol buffer 3.5.0生成java server和client程式碼

【Netty入門】基於Netty的Server / Client

AAA基於netty TCP server server主動給client 發訊息解決方案

Netty webSocket client 怎麼連線wss地址

Java NIO（6）：Server和Client案例

Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

netty websocket編程（七）

Java - 在WebService中使用Client調用三方的RestAPI

WebSocket 解決javascript跨域問題一劑良藥

Java程序猿的JavaScript學習筆記（9—— jQuery工具方法）

解決Linux 下server和client 通過TCP通訊：accept成功接收卻報錯的問題

python-websocket-server hacking

nodejs websocket server

關於java.io.IOException: Server returned HTTP response code: 400 for URL報錯和string.getBytes()字符集

Spring+Netty+WebSocket實例

【小結】java使用Websocket獲取HttpSession出現的問題

[Java] Netty Websocket Server Javascript Client

相關推薦