netty實現websocket發送文本和二進制數據

時間 2019-11-30

標籤 netty 實現 websocket 發送文本二進制數據欄目 Netty 简体版

原文原文鏈接

原文：https://huan1993.iteye.com/blog/2433552javascript

最近在學習netty相關的知識，看到netty能夠實現 websoket，所以記錄一下在netty中實現websocket的步驟，主要實現傳遞文本消息和傳遞二進制消息，傳遞二進制消息因爲須要傳遞額外信息，所以使用自定義消息協議。html

需求：

一、使用 netty 實現 websocket 服務器前端

二、實現文本信息的傳遞java

三、實現二進制信息的傳遞，若是是圖片則傳遞到後臺後在前臺直接顯示，非圖片提示。（此處的圖片和非圖片是前端傳遞到後臺的二進制數據而後後端在原封不動的直接返回到前臺）git

四、只須要考慮 websocket 協議，不用處理http請求web

實現細節：

一、netty中對websocket加強的處理器

WebSocketServerProtocolHandler bootstrap

>> 此處理器能夠處理了 webSocket 協議的握手請求處理，以及 Close、Ping、Pong控制幀的處理。對於文本和二進制的數據幀須要咱們本身處理。後端

>> 若是咱們須要攔截 webSocket 協議握手完成後的處理，能夠實現ChannelInboundHandler#userEventTriggered方法，並判斷是不是 HandshakeComplete 事件。數組

>> 參數：websocketPath 表示 webSocket 的路徑服務器

>> 參數：maxFrameSize 表示最大的幀，若是上傳大文件時須要將此值調大

二、文本消息的處理

客戶端：直接發送一個字符串便可

服務端：服務端給客戶端響應文本數據，須要返回 TextWebSocketFrame 對象，不然客戶端接收不到。

三、二進制消息的處理

客戶端：向後臺傳遞一個 blob 對象便可，若是咱們須要傳遞額外的信息，那麼能夠在 blob 對象中進行添加，此例中自定義前4個字節表示數據的類型。

服務端：處理 BinaryWebSocketFrame 幀，並獲取前4個字節，判斷是不是圖片，而後返回 BinaryWebSocketFrame對象給前臺。

四、針對二進制消息的自定義協議以下：（此處實現比較簡單）

前四個字節表示文件類型，後面的字節表示具體的數據。

在java中一個int是4個字節，在js中使用Int32表示

此協議主要是判斷前端是否傳遞的是圖片，若是是圖片就直接傳遞到後臺，而後後臺在返回二進制數據到前臺直接顯示這個圖片。非圖片不用處理。

五、js中處理二進制數據

見 webSocket.html 文件中的處理。

實現步驟：

一、主要的依賴

Java代碼

<dependency>
<groupId>io.netty</groupId>
<artifactId>netty-all</artifactId>
<version>4.1.31.Final</version>
</dependency>

二、webSocket服務端編寫

Java代碼

@Slf4j
public class WebSocketServer {
public static void main(String[] args) throws InterruptedException {
EventLoopGroup bossGroup = new NioEventLoopGroup();
EventLoopGroup workGroup = new NioEventLoopGroup();
try {
ServerBootstrap bootstrap = new ServerBootstrap();
bootstrap.group(bossGroup, workGroup)
.option(ChannelOption.SO_BACKLOG, 128)
.childOption(ChannelOption.TCP_NODELAY, true)
.childOption(ChannelOption.SO_KEEPALIVE, true)
.handler(new LoggingHandler(LogLevel.TRACE))
.channel(NioServerSocketChannel.class)
.childHandler(new ChannelInitializer<SocketChannel>() {
@Override
protected void initChannel(SocketChannel ch) throws Exception {
ch.pipeline()
.addLast(new LoggingHandler(LogLevel.TRACE))
// HttpRequestDecoder和HttpResponseEncoder的一個組合，針對http協議進行編解碼
.addLast(new HttpServerCodec())
// 分塊向客戶端寫數據，防止發送大文件時致使內存溢出， channel.write(new ChunkedFile(new File("bigFile.mkv")))
.addLast(new ChunkedWriteHandler())
// 將HttpMessage和HttpContents聚合到一個完成的 FullHttpRequest或FullHttpResponse中,具體是FullHttpRequest對象仍是FullHttpResponse對象取決因而請求仍是響應
// 須要放到HttpServerCodec這個處理器後面
.addLast(new HttpObjectAggregator(10240))
// webSocket 數據壓縮擴展，當添加這個的時候WebSocketServerProtocolHandler的第三個參數須要設置成true
.addLast(new WebSocketServerCompressionHandler())
// 服務器端向外暴露的 web socket 端點，當客戶端傳遞比較大的對象時，maxFrameSize參數的值須要調大
.addLast(new WebSocketServerProtocolHandler("/chat", null, true, 10485760))
// 自定義處理器 - 處理 web socket 文本消息
.addLast(new TextWebSocketHandler())
// 自定義處理器 - 處理 web socket 二進制消息
.addLast(new BinaryWebSocketFrameHandler());
}
});
ChannelFuture channelFuture = bootstrap.bind(9898).sync();
log.info("webSocket server listen on port : [{}]", 9898);
channelFuture.channel().closeFuture().sync();
} finally {
bossGroup.shutdownGracefully();
workGroup.shutdownGracefully();
}
}
}

注意：

一、看一下上方依次引入了哪些處理器

二、對於 webSocket 的握手、Close、Ping、Pong等的處理，由 WebSocketServerProtocolHandler 已經處理了，咱們本身只須要處理 Text和Binary等數據幀的處理。

三、對於傳遞比較大的文件，須要修改 maxFrameSize 參數。

三、自定義處理器握手後和文本消息

Java代碼

@Slf4j
public class TextWebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
@Override
protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) {
log.info("接收到客戶端的消息:[{}]", msg.text());
// 若是是向客戶端發送文本消息，則須要發送 TextWebSocketFrame 消息
InetSocketAddress inetSocketAddress = (InetSocketAddress) ctx.channel().remoteAddress();
String ip = inetSocketAddress.getHostName();
String txtMsg = "[" + ip + "][" + LocalTime.now().format(DateTimeFormatter.ofPattern("HH:mm:ss")) + "] ==> " + msg.text();
ctx.channel().writeAndFlush(new TextWebSocketFrame(txtMsg));
}
@Override
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
ctx.close();
log.error("服務器發生了異常:", cause);
}
@Override
public void userEventTriggered(ChannelHandlerContext ctx, Object evt) throws Exception {
if (evt instanceof WebSocketServerProtocolHandler.HandshakeComplete) {
log.info("web socket 握手成功。");
WebSocketServerProtocolHandler.HandshakeComplete handshakeComplete = (WebSocketServerProtocolHandler.HandshakeComplete) evt;
String requestUri = handshakeComplete.requestUri();
log.info("requestUri:[{}]", requestUri);
String subproTocol = handshakeComplete.selectedSubprotocol();
log.info("subproTocol:[{}]", subproTocol);
handshakeComplete.requestHeaders().forEach(entry -> log.info("header key:[{}] value:[{}]", entry.getKey(), entry.getValue()));
} else {
super.userEventTriggered(ctx, evt);
}
}
}

注意：

一、此處只處理文本消息，所以 SimpleChannelInboundHandler 中的範型寫 TextWebSocketFrame

二、發送文本消息給客戶端，須要發送 TextWebSocketFrame 對象，不然客戶端接收不到。

三、處理 握手後 的處理，判斷是不是 HandshakeComplete 事件。

四、處理二進制消息

Java代碼

@Slf4j
public class BinaryWebSocketFrameHandler extends SimpleChannelInboundHandler<BinaryWebSocketFrame> {
@Override
protected void channelRead0(ChannelHandlerContext ctx, BinaryWebSocketFrame msg) throws Exception {
log.info("服務器接收到二進制消息.");
ByteBuf content = msg.content();
content.markReaderIndex();
int flag = content.readInt();
log.info("標誌位:[{}]", flag);
content.resetReaderIndex();
ByteBuf byteBuf = Unpooled.directBuffer(msg.content().capacity());
byteBuf.writeBytes(msg.content());
ctx.writeAndFlush(new BinaryWebSocketFrame(byteBuf));
}
}

注意：

一、此處只處理二進制消息，所以泛型中寫 BinaryWebSocketFrame

五、客戶端的寫法

Java代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web socket 測試</title>
</head>
<body>
<div style="width: 600px;height: 400px;">
<p>服務器輸出:</p>
<div style="border: 1px solid #CCC;height: 300px;overflow: scroll" id="server-msg-container">
</div>
<p>
<textarea id="inp-msg" style="height: 50px;width: 500px"></textarea><input type="button" value="發送" id="send"><br/>
選擇圖片： <input type="file" id="send-pic">
</p>
</div>
<script type="application/javascript">
var ws = new WebSocket("ws://192.168.100.215:9898/chat");
ws.onopen = function (ev) {
};
ws.onmessage = function (ev) {
console.info("onmessage", ev);
var inpMsg = document.getElementById("server-msg-container");
if (typeof ev.data === "string") {
inpMsg.innerHTML += ev.data + "<br/>";
} else {
var result = ev.data;
var flagReader = new FileReader();
flagReader.readAsArrayBuffer(result.slice(0, 4));
flagReader.onload = function (flag) {
if (new DataView(flag.target.result).getInt32(0) === 10) {
var imageReader = new FileReader();
imageReader.readAsDataURL(result.slice(4));
imageReader.onload = function (img) {
var imgHtml = "<img src='" + img.target.result + "' style='width: 100px;height: 100px;'>";
inpMsg.innerHTML += imgHtml.replace("data:application/octet-stream;", "data:image/png;") + "<br />";
}
} else {
alert("後端返回的是非圖片類型數據，沒法顯示。");
}
}
}
};
ws.onerror = function () {
var inpMsg = document.getElementById("server-msg-container");
inpMsg.innerHTML += "發生異常" + "<br/>";
};
ws.onclose = function () {
var inpMsg = document.getElementById("server-msg-container");
inpMsg.innerHTML += "webSocket 關閉" + "<br/>";
};
// 發送文字消息
document.getElementById("send").addEventListener("click", function () {
ws.send(document.getElementById("inp-msg").value);
}, false);
// 發送圖片
document.querySelector('#send-pic').addEventListener('change', function (ev) {
var files = this.files;
if (files && files.length) {
var file = files[0];
var fileType = file.type;
// 表示傳遞的是非圖片
var dataType = 20;
if (!/^image/.test(fileType)) {
// 表示傳遞的是圖片
dataType = 10;
return;
}
var fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = function (e) {
// 獲取到文件對象
var result = e.target.result;
// 建立一個 4個字節的數組緩衝區
var arrayBuffer = new ArrayBuffer(4);
var dataView = new DataView(arrayBuffer);
// 從第0個字節開始，寫一個 int 類型的數據(dataType)，佔4個字節
dataView.setInt32(0, dataType);
// 組裝成 blob 對象
var blob = new Blob([arrayBuffer, result]);
// 發送到 webSocket 服務器端
ws.send(blob);
}
}
}, false);
</script>
</body>
</html>