【Netty】(7)---搭建websocket服务器

2年前 (2022) 程序员胖胖胖虎阿
235 0 0

【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>

三、测试

【Netty】(7)---搭建websocket服务器

通过测试可以总结

1、页面初始化的时候就已经成功和服务端websocket建立连接成功。
2、服务端收到客户端数据,并向客户端发送数据。
3、当关闭页面的时候,既相当于关闭了该websocket连接,服务端会自动移除。

【Netty】(7)---搭建websocket服务器

版权声明:程序员胖胖胖虎阿 发表于 2022年11月24日 下午10:00。
转载请注明:【Netty】(7)---搭建websocket服务器 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...