devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Netty+Vue实现一个简单的web服务器_vue netty

作者：不正经 | 2024-04-11 10:01:11

赞

踩

vue netty

    最近一直在用Netty做一个数据服务，此服务的主要功能是接收客户端的Http请求并解析，经过业务逻辑处理后访问HBase获取数据流，然后返回给客户端。在服务的初始开发阶段，重心全部在如何设计Netty服务端的线程模型和缓存方案从而能更快的响应客户端请求，提高服务端的吞吐量，经过两个月的开发调试，性能基本达到要求。在核心功能基本可用后，一直在思考如何提供一个服务端的状态展现和管理动态页面。虽然说之前用过jsp和php开发过很简单的网站，当时仅限自己玩玩，没有工程应用，因此没有深入理解，后续的学习重心一直在服务端，并没有对服务端容器和网站这整个技术流程梳理清楚，所以一直不知道如何才能实现在基于Netty开发的服务器提供展现和管理动态页面。

    经过两个星期的上班时完善并压测核心功能，下班有空后了解Netty如何整合页面显示，慢慢感觉有了眉目。当使用浏览器访问一个URL时，服务端接收到请求，将此请求映射的html文件发送给浏览器，浏览器解析html文件，发现里面引用了一些静态文件，例如图片、javascript和css文件等，会继续向服务端请求这些静态文件，然后在浏览器端就显示出来了这个页面。之前一直纠结于tomcat下网站开发使用的jsp技术，始终没想明白当在浏览器中输入URL后，到底是如何显示出页面的。大体来说，浏览器发送Url后，tomcat会负责将jsp转换为html，然后将这个html发送给浏览器，我关心的重点应该是怎么渲染出html文件。经过了解，针对HTML生成前后端的不同，主要分为这么两种：

后端渲染（SSR、服务端渲染）

后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

前端渲染（SPA、单页面应用）

前端渲染就是指浏览器会从后端得到一些信息，这些信息或许是适用于题主所说的angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。

    所以，如果我想让Netty能提供展现和管理动态页面，只需要选择是前端渲染还是后端渲染，然后响应浏览器的静态文件请求，将html、javascript、css、图片等静态文件发送给浏览器即可，浏览器会负责显示出页面。通过咨询同事，发现vue这种支持前端渲染，随即进行了尝试。相关代码如下：

VUE前端页面代码，index.html：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Vue.js 导航菜单</title>
  8.     <script src="js/vue.min.js"></script>
  9.     <style>
  10.  
  11. 	*{
  12. 		margin:0;
  13. 		padding:0;
  14. 	}
  15.  
  16. 	body{
  17. 		font:15px/1.3 'Open Sans', sans-serif;
  18. 		color: #5e5b64;
  19. 		text-align:center;
  20. 	}
  21.  
  22. 	a, a:visited {
  23. 		outline:none;
  24. 		color:#389dc1;
  25. 	}
  26.  
  27. 	a:hover{
  28. 		text-decoration:none;
  29. 	}
  30.  
  31. 	section, footer, header, aside, nav{
  32. 		display: block;
  33. 	}
  34.  
  35. 	/*-------------------------
  36. 		菜鸟
  37. 	--------------------------*/
  38.  
  39. 	nav{
  40. 		display:inline-block;
  41. 		margin:60px auto 45px;
  42. 		background-color:#5597b4;
  43. 		box-shadow:0 1px 1px #ccc;
  44. 		border-radius:2px;
  45. 	}
  46.  
  47. 	nav a{
  48. 		display:inline-block;
  49. 		padding: 18px 30px;
  50. 		color:#fff !important;
  51. 		font-weight:bold;
  52. 		font-size:16px;
  53. 		text-decoration:none !important;
  54. 		line-height:1;
  55. 		text-transform: uppercase;
  56. 		background-color:transparent;
  57.  
  58. 		-webkit-transition:background-color 0.25s;
  59. 		-moz-transition:background-color 0.25s;
  60. 		transition:background-color 0.25s;
  61. 	}
  62.  
  63. 	nav a:first-child{
  64. 		border-radius:2px 0 0 2px;
  65. 	}
  66.  
  67. 	nav a:last-child{
  68. 		border-radius:0 2px 2px 0;
  69. 	}
  70.  
  71. 	nav.home .home,
  72. 	nav.projects .projects,
  73. 	nav.services .services,
  74. 	nav.contact .contact{
  75. 		background-color:#e35885;
  76. 	}
  77.  
  78. 	p{
  79. 		font-size:22px;
  80. 		font-weight:bold;
  81. 		color:#7d9098;
  82. 	}
  83.  
  84. 	p b{
  85. 		color:#ffffff;
  86. 		display:inline-block;
  87. 		padding:5px 10px;
  88. 		background-color:#c4d7e0;
  89. 		border-radius:2px;
  90. 		text-transform:uppercase;
  91. 		font-size:18px;
  92. 	}
  93.  
  94.     </style>
  95.  
  96. </head>
  97. <body>
  98.  
  99. <div id="main">
  100.  
  101. 	<!-- 激活的菜单样式为  active 类 -->
  102. 	<!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->
  103.  
  104. 	<nav v-bind:class="active" v-on:click.prevent>
  105.  
  106. 		<!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->
  107.  
  108. 		<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
  109. 		<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
  110. 		<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
  111. 		<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
  112. 	</nav>
  113.  
  114.  	<!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
  115.  
  116. 	<p>您选择了 <b>{{active}} 菜单</b></p>
  117. </div>
  118.  
  119. <script>
  120. // 创建一个新的 Vue 实例
  121. var demo = new Vue({
  122. 	// DOM 元素，挂载视图模型
  123. 	el: '#main',
  124.  
  125. 	// 定义属性，并设置初始值
  126. 	data: {
  127. 		active: 'home'
  128. 	},
  129.  
  130. 	// 点击菜单使用的函数
  131. 	methods: {
  132. 		makeActive: function(item){
  133. 			// 模型改变，视图会自动更新
  134. 			this.active = item;
  135. 		}
  136. 	}
  137. });
  138. </script>
  139. </body>
  140. </html>

Netty后台静态服务器代码：

1、NettyStaticFileServerMain.java

  1. package com.me.io;
  2.  
  3. import io.netty.bootstrap.ServerBootstrap;
  4. import io.netty.channel.ChannelFuture;
  5. import io.netty.channel.ChannelOption;
  6. import io.netty.channel.nio.NioEventLoopGroup;
  7. import io.netty.channel.socket.nio.NioServerSocketChannel;
  8.  
  9. /**
  10.  * 
  11.  * @author linjx
  12.  *
  13.  */
  14. public class NettyStaticFileServerMain {
  15. 	private static int httpListenPort = 6070;
  16. 	
  17. 	public static void main(String[] args) throws InterruptedException{
  18. 		 NioEventLoopGroup boss = new NioEventLoopGroup();
  19. 	     NioEventLoopGroup work = new NioEventLoopGroup();
  20.  
  21. 	        try {
  22. 	            ServerBootstrap serverBootstrap = new ServerBootstrap();
  23. 	            serverBootstrap.group(boss, work)
  24. 	                    .channel(NioServerSocketChannel.class)
  25. 	                    .childHandler(new NettyHttpInitializer())
  26. 	                    .option(ChannelOption.SO_BACKLOG, 128)
  27. 	                    .childOption(ChannelOption.SO_KEEPALIVE, true);
  28. 	            ChannelFuture future = serverBootstrap.bind(httpListenPort).sync();
  29. 	           
  30. 	            future.channel().closeFuture().sync();
  31. 	        } 
  32. 	        finally {
  33. 	            work.shutdownGracefully();
  34. 	            boss.shutdownGracefully();
  35. 	        }
  36. 	}
  37.  
  38. }

2、Netty的管道初始化器 NettyHttpInitializer.java：

  1. package com.me.io;
  2.  
  3. import io.netty.channel.ChannelInitializer;
  4. import io.netty.channel.ChannelPipeline;
  5. import io.netty.channel.socket.SocketChannel;
  6. import io.netty.handler.codec.http.HttpObjectAggregator;
  7. import io.netty.handler.codec.http.HttpServerCodec;
  8. import io.netty.handler.stream.ChunkedWriteHandler;
  9.  
  10.  
  11.  
  12.  
  13. public class NettyHttpInitializer extends ChannelInitializer<SocketChannel> {
  14.  
  15.     @Override
  16.     public void initChannel(SocketChannel ch) throws Exception {
  17.         ChannelPipeline pipeline = ch.pipeline();
  18.         //将请求和应答消息编码或解码为HTTP消息
  19.         pipeline.addLast(new HttpServerCodec());
  20.         //将HTTP消息的多个部分组合成一条完整的HTTP消息
  21.         pipeline.addLast(new HttpObjectAggregator(64 * 1024));
  22.         pipeline.addLast(new ChunkedWriteHandler());
  23.         pipeline.addLast(new NettyHttpStaticFileHandler());
  24.     }
  25. }

3、静态文件请求处理器，NettyHttpStaticFileHandler.java

  1. package com.me.io;
  2.  
  3. import io.netty.channel.ChannelFuture;
  4. import io.netty.channel.ChannelHandlerContext;
  5. import io.netty.channel.ChannelProgressiveFuture;
  6. import io.netty.channel.ChannelProgressiveFutureListener;
  7. import io.netty.channel.DefaultFileRegion;
  8. import io.netty.channel.SimpleChannelInboundHandler;
  9. import io.netty.handler.codec.http.DefaultFullHttpResponse;
  10. import io.netty.handler.codec.http.DefaultHttpResponse;
  11. import io.netty.handler.codec.http.FullHttpRequest;
  12. import io.netty.handler.codec.http.FullHttpResponse;
  13. import io.netty.handler.codec.http.HttpChunkedInput;
  14. import io.netty.handler.codec.http.HttpHeaderNames;
  15. import io.netty.handler.codec.http.HttpHeaderValues;
  16. import io.netty.handler.codec.http.HttpResponse;
  17. import io.netty.handler.codec.http.HttpResponseStatus;
  18. import io.netty.handler.codec.http.HttpUtil;
  19. import io.netty.handler.codec.http.HttpVersion;
  20. import io.netty.handler.codec.http.LastHttpContent;
  21. import io.netty.handler.ssl.SslHandler;
  22. import io.netty.handler.stream.ChunkedFile;
  23.  
  24. import java.io.File;
  25. import java.io.RandomAccessFile;
  26.  
  27. import javax.activation.MimetypesFileTypeMap;
  28.  
  29. /**
  30.  * 
  31.  * @author linjx
  32.  *
  33.  */
  34. public class NettyHttpStaticFileHandler extends SimpleChannelInboundHandler<FullHttpRequest> {
  35.  
  36.     // 资源所在路径
  37.     private static final String STATIC_LOCATION = "C:/Users/linjx/Desktop/code";
  38.  
  39.     @Override
  40.     protected void channelRead0(ChannelHandlerContext ctx, FullHttpRequest request) throws Exception {
  41.         // 获取URI
  42.         String uri = request.uri();
  43.         // 设置不支持favicon.ico文件
  44.         if ("/favicon.ico".equals(uri)) {
  45.             return;
  46.         }
  47.         // 根据路径地址构建文件
  48.         String path = STATIC_LOCATION + uri;
  49.         File html = new File(path);
  50.  
  51.         // 状态为1xx的话，继续请求
  52.         
  53.         if (HttpUtil.is100ContinueExpected(request)) {
  54.             send100Continue(ctx);
  55.         }
  56.  
  57.         // 当文件不存在的时候，将资源指向NOT_FOUND
  58.         if (!html.exists()) {
  59.             sendNotFound(ctx);
  60.             return;
  61.         }
  62.  
  63.         final RandomAccessFile randomAccessFile = new RandomAccessFile(html, "r");
  64.         HttpResponse response = new DefaultHttpResponse(request.protocolVersion(), HttpResponseStatus.OK);
  65.  
  66.         // 设置文件格式内容
  67.         if (path.endsWith(".html")){
  68.             response.headers().set(HttpHeaderNames.CONTENT_TYPE, "text/html; charset=UTF-8");
  69.         }else if(path.endsWith(".js")){
  70.             response.headers().set(HttpHeaderNames.CONTENT_TYPE, "application/x-javascript");
  71.         }else if(path.endsWith(".css")){
  72.             response.headers().set(HttpHeaderNames.CONTENT_TYPE, "text/css; charset=UTF-8");
  73.         }else{
  74.         	MimetypesFileTypeMap mimetypesFileTypeMap = new MimetypesFileTypeMap();
  75.         	response.headers().set(HttpHeaderNames.CONTENT_TYPE, mimetypesFileTypeMap.getContentType(path));
  76.         }
  77.  
  78.  
  79.         boolean keepAlive =  HttpUtil.isKeepAlive(request);
  80.  
  81.         if (keepAlive) {
  82.             response.headers().set(HttpHeaderNames.CONTENT_LENGTH, randomAccessFile.length());
  83.             response.headers().set(HttpHeaderNames.CONNECTION, HttpHeaderValues.KEEP_ALIVE);
  84.         }
  85.         ctx.write(response);
  86.  
  87.         ChannelFuture sendFileFuture;
  88.         ChannelFuture lastContentFuture;
  89.         if (ctx.pipeline().get(SslHandler.class) == null) {
  90.             sendFileFuture =
  91.                     ctx.write(new DefaultFileRegion(randomAccessFile.getChannel(), 0, randomAccessFile.length()), ctx.newProgressivePromise());
  92.             // Write the end marker.
  93.             lastContentFuture = ctx.writeAndFlush(LastHttpContent.EMPTY_LAST_CONTENT);
  94.         } else {
  95.             sendFileFuture =
  96.                     ctx.writeAndFlush(new HttpChunkedInput(new ChunkedFile(randomAccessFile, 0, randomAccessFile.length(), 10 * 1024 * 1024)),
  97.                             ctx.newProgressivePromise());
  98.             // HttpChunkedInput will write the end marker (LastHttpContent) for us.
  99.             lastContentFuture = sendFileFuture;
  100.         }
  101.  
  102.         sendFileFuture.addListener(new ChannelProgressiveFutureListener() {
  103.             @Override
  104.             public void operationProgressed(ChannelProgressiveFuture future, long progress, long total) {
  105.                 if (total < 0) { // total unknown
  106.                     System.err.println(future.channel() + " Transfer progress: " + progress);
  107.                 } else {
  108.                     System.out.println(future.channel() + " Transfer progress: " + progress + " / " + total);
  109.                 }
  110.             }
  111.  
  112.             @Override
  113.             public void operationComplete(ChannelProgressiveFuture future) {
  114.                 System.out.println(future.channel() + " Transfer complete.");
  115.             }
  116.         });
  117.   
  118.     }
  119.  
  120.     private static void send100Continue(ChannelHandlerContext ctx) {
  121.         FullHttpResponse response = new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.CONTINUE);
  122.         ctx.writeAndFlush(response);
  123.     }
  124.     
  125.     private static void sendNotFound(ChannelHandlerContext ctx){
  126.     	FullHttpResponse response = new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.NOT_FOUND);
  127.     	response.headers().set(HttpHeaderNames.CONTENT_LENGTH, 0);
  128.     	ctx.writeAndFlush(response);
  129.     }
  130. }

   运行结果如下：

    启动Netty服务器后，在浏览器中输入url后，便可以显示出经过vue前端渲染出比较好看的页面了。页面与netty服务端的数据交互可以使用ajax。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/404315
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号