【Netty】(7）---搭建websocket服務器
說明:本篇博客是基於學習某網有關視頻教學。
目的:創建一個websocket服務器,獲取客戶端傳來的數據,同時向客戶端發送數據
一、服務端
1、Main主類
public class WSServer {
public static void main(String[] args) throws Exception {
// 定義一對線程組
// 主線程組, 用於接受客戶端的連接，
EventLoopGroup mainGroup = new NioEventLoopGroup();
// 從線程組, 負責IO交互工作
EventLoopGroup subGroup = new NioEventLoopGroup();
try {
//netty服務器的創建, 輔助工具類，用於服務器通道的一系列配置
ServerBootstrap server = new ServerBootstrap();
//綁定兩個線程組
server.group(mainGroup, subGroup)
//指定NIO的模式
.channel(NioServerSocketChannel.class)
//子處理器，用於處理workerGroup
.childHandler(new WSServerInitialzer());
// 啟動server，並且設置8088為啟動的端口號，同時啟動方式為同步
ChannelFuture future = server.bind(8088).sync();
// 監聽關閉的channel，設置位同步方式
future.channel().closeFuture().sync();
} finally {
//退出線程組
mainGroup.shutdownGracefully();
subGroup.shutdownGracefully();
}
}
}
2、WSServerInitialzer類(子處理器)
public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {
@Override
protected void initChannel(SocketChannel ch) throws Exception {
ChannelPipeline pipeline = ch.pipeline();
// websocket 基於http協議，所以要有http編解碼器 服務端用HttpServerCodec
pipeline.addLast(new HttpServerCodec());
// 對寫大數據流的支持
pipeline.addLast(new ChunkedWriteHandler());
/**
* 我們通常接收到的是一個http片段，如果要想完整接受一次請求的所有數據，我們需要綁定HttpObjectAggregator，然后我們
* 就可以收到一個FullHttpRequest-是一個完整的請求信息。
*對httpMessage進行聚合，聚合成FullHttpRequest或FullHttpResponse
* 幾乎在netty中的編程，都會使用到此hanler
*/
pipeline.addLast(new HttpObjectAggregator(1024*64));
// ====================== 以上是用於支持http協議 , 以下是支持httpWebsocket ======================
/**
* websocket 服務器處理的協議，用於指定給客戶端連接訪問的路由 : /ws
* 本handler會幫你處理一些繁重的復雜的事
* 會幫你處理握手動作： handshaking（close, ping, pong） ping + pong = 心跳
* 對於websocket來講，都是以frames進行傳輸的，不同的數據類型對應的frames也不同
*/
pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
// 自定義的handler
pipeline.addLast(new ChatHandler());
}
}
3、ChatHandler(助手類)
/**
* @Description: 處理消息的handler
* TextWebSocketFrame： 在netty中，是用於為websocket專門處理文本的對象，frame是消息的載體
* 這里已經指定了類型 如果這里是Object 那么下面還需判斷是不是TextWebSocketFrame類型
*/
public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
// 用於記錄和管理所有客戶端的channle
private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
@Override
protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg)
throws Exception {
// 獲取客戶端傳輸過來的消息
String content = msg.text();
System.out.println("接受到的數據：" + content);
// for (Channel channel: clients) {
// channel.writeAndFlush(
// new TextWebSocketFrame(
// "[服務器在]" + LocalDateTime.now()
// + "接受到消息, 消息為：" + content));
// }
// 下面這個方法，和上面的for循環，一致 向客戶端發送數據
clients.writeAndFlush(new TextWebSocketFrame("我是服務器,我收到你的消息為:" + content));
}
/**
* 當客戶端連接服務端之后（打開連接）
* 獲取客戶端的channle，並且放到ChannelGroup中去進行管理
*/
@Override
public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
clients.add(ctx.channel());
}
@Override
public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
// 當觸發handlerRemoved，ChannelGroup會自動移除對應客戶端的channel,所以下面的remove不用我們再手寫
// clients.remove(ctx.channel());
System.out.println("客戶端斷開，channle對應的長id為：" + ctx.channel().id().asLongText());
System.out.println("客戶端斷開，channle對應的短id為：" + ctx.channel().id().asShortText());
}
}
到這里服務端已經寫好了,和之前搭建的服務器大致沒什么區別，主要區別在於ChannelPipeline添加了不同的Handel,助手類對websocket做了些處理工作。
二、客戶端
客戶端這邊是采用Hbuilderx工具創建的前端項目，代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>發送消息:</div>
<input type="text" id="msgContent"/>
<input type="button" value="點我發送" onclick="CHAT.chat()"/>
<div>接受消息：</div>
<div id="receiveMsg" style="background-color: gainsboro;"></div>
<script type="application/javascript">
window.CHAT = {
socket: null,
init: function() {
<!--判斷瀏覽器是否支持 websocket-->
if (window.WebSocket) {
<!--連接服務器websocket IP+端口號 ／ws是服務器WebSocketServerProtocolHandler添加的-->
CHAT.socket = new WebSocket("ws://127.0.0.1:8088/ws");
CHAT.socket.onopen = function() {
console.log("連接建立成功...");
},
CHAT.socket.onclose = function() {
console.log("連接關閉...");
},
CHAT.socket.onerror = 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;
}
} else {
alert("瀏覽器不支持websocket協議...");
}
},
<!--onclick事件觸發-->
chat: function() {
<!--獲取消息,發送消息-->
var msg = document.getElementById("msgContent");
CHAT.socket.send(msg.value);
}
};
<!--初始化方法-->
CHAT.init();
</script>
</body>
</html>
三、測試
通過測試可以總結
1、頁面初始化的時候就已經成功和服務端websocket建立連接成功。
2、服務端收到客戶端數據,並向客戶端發送數據。
3、當關閉頁面的時候,既相當於關閉了該websocket連接,服務端會自動移除。