改进&升级了一下配置中心中的统计页和客户端管理列表页.

.gitignore

@@ -11,3 +11,4 @@
 .*
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
 hs_err_pid*
+/test.sh

README.md

@@ -4,7 +4,6 @@
 
 https://nat.nioee.com
 
-
 ## Lanproxy个人升级版
 
 核心功能：
@@ -19,7 +18,7 @@ https://nat.nioee.com
 
 体验地址 https://lanp.nioee.com (测试用户名密码 test/123456)
 
-![panel](panel.png)
+![panel](assets/panel.png)
 
 ## Lanproxy开源免费版
 
@@ -37,8 +36,8 @@ lanproxy是一个将局域网个人电脑、服务器代理到公网的内网穿
 
 #### 获取发布包
 
--	拉取源码，运行 mvn package，打包后的资源放在distribution目录中，包括client和server
--	或直接下载发布包  https://github.com/ffay/lanproxy/releases
+- 拉取源码，运行 mvn package，打包后的资源放在distribution目录中，包括client和server
+- 或直接下载发布包  https://github.com/ffay/lanproxy/releases
 
 #### 配置
 
@@ -48,21 +47,17 @@ server的配置文件放置在conf目录中，配置 config.properties
 
 ```properties
 server.bind=0.0.0.0
-
 #与代理客户端通信端口
 server.port=4900
-
 #ssl相关配置
 server.ssl.enable=true
 server.ssl.bind=0.0.0.0
 server.ssl.port=4993
 server.ssl.jksPath=test.jks
 server.ssl.keyStorePassword=123456
 server.ssl.keyManagerPassword=123456
-
 #这个配置可以忽略
 server.ssl.needsClientAuth=false
-
 #WEB在线配置管理相关信息
 config.server.bind=0.0.0.0
 config.server.port=8090
@@ -72,11 +67,11 @@ config.admin.password=admin
 
 代理配置，打开地址 http://ip:8090 ，使用上面配置中配置的用户名密码登录，进入如下代理配置界面
 
-![webconfig](readme_zh_client_list.png)
+![webconfig](assets/readme_zh_client_list.png)
 
-![webconfig](readme_zh_proxy_list.png)
+![webconfig](assets/readme_zh_proxy_list.png)
 
-![webconfig](readme_zh_stat_list.png)
+![webconfig](assets/readme_zh_stat_list.png)
 
 > 一个server可以支持多个客户端连接
 > 配置数据存放在 ~/.lanproxy/config.json 文件中
@@ -92,10 +87,8 @@ client.key=
 ssl.enable=true
 ssl.jksPath=test.jks
 ssl.keyStorePassword=123456
-
 #这里填写实际的proxy-server地址；没有服务器默认即可，自己有服务器的更换为自己的proxy-server（IP）地址
 server.host=lp.thingsglobal.org
-
 #proxy-server ssl默认端口4993，默认普通端口4900
 #ssl.enable=true时这里填写ssl端口，ssl.enable=false时这里填写普通端口
 server.port=4993
@@ -145,5 +138,51 @@ nohup ./client_linux_amd64 -s SERVER_IP -p SERVER_SSL_PORT -k CLIENT_KEY -ssl tr
 
 #### 其他
 
-- 在家里使用公司的网络，可以和 https://github.com/ffay/http-proxy-server 这个http代理项目配合使用（个人升级版已经内置代理上网功能，详细资料 https://file.nioee.com/f/76ebbce67c864e4dbe7e/ ）
+- 在家里使用公司的网络，可以和 https://github.com/ffay/http-proxy-server
+  这个http代理项目配合使用（个人升级版已经内置代理上网功能，详细资料 https://file.nioee.com/f/76ebbce67c864e4dbe7e/ ）
 - 对于正常网站，80和443端口只有一个，可以购买个人升级版本解决端口复用问题
+
+## 生成 JSK 文件
+
+```shell
+keytool -genkey -keyalg RSA -keysize 2048 -validity 365 -dname "CN=test, OU=test,O=test, L=shanghai, ST=shanghai, C=CN" -alias csii_key -keypass 888888 -keystore sdm-202212011626.jks -storepass 123456
+```
+
+### ⚠️注️：
+
+> 1. 当-keypass 和 -storepass 设为不同时，keytool会给出以下警告：
+> ```shell
+> 警告: PKCS12 密钥库不支持其他存储和密钥口令。正在忽略用户指定的-keypass值。
+> ```
+> 这时在configuration.properties文件中keyStore和keyManager密码必须为一直是kesStore的密码。
+> ```properties
+> server.ssl.keyStorePassword=123456(keystore密码）
+> server.ssl.keyManagerPassword=123456（keystore密码）
+> ```
+> 2.提高安全性： keysize必须为大于等于2048
+> ```shell
+> 生成的证书 使用的 1024 位 RSA 密钥 被视为存在安全风险。此密钥大小将在未来的更新中被禁用。
+>```
+> 详情请见 [“陷阱”素数（‘trapdoored’ primes）的出现，使用1024位密钥加密算法已不再安全](https://searchsecurity.techtarget.com.cn/11-24358/)
+
+### 进阶版
+
+#### 映射配置
+
+![webconfig](assets/进阶版配置表单截图.png)
+
+### 开发&调试
+
+如果想在IDEA中运行并调试，务必要配置Application Configuration
+![img.png](assets/application-configuration-shortcut.png)
+JVM Options:
+```shell
+-Dapp.home=<项目的绝对路径>/proxy-server
+-Djava.awt.headless=true
+-Djava.net.preferIPv4Stack=true
+-Djdk.tls.rejectClientInitiatedRenegotiation=true
+-Xdebug
+-Xnoagent
+-Djava.compiler=NONE
+-Xrunjdwp:transport=dt_socket,address=12000,server=y,suspend=n
+```

README_en.md

@@ -19,7 +19,7 @@ Lanproxy is a reverse proxy to help you expose a local server behind a NAT or fi
 - Run personal cloud services from your own private network
 
 ### Architecture
-![lanproxy](lanproxy.png)
+![lanproxy](assets/lanproxy.png)
 
 ### Configure
 
@@ -52,11 +52,11 @@ config.admin.password=admin
 
 > Visit your config web service using url http://ip:8090
 
-![webconfig](readme_en_client_list.png)
+![webconfig](assets/readme_en_client_list.png)
 
-![webconfig](readme_en_proxy_list.png)
+![webconfig](assets/readme_en_proxy_list.png)
 
-![webconfig](readme_en_stat_list.png)
+![webconfig](assets/readme_en_stat_list.png)
 
 #### client
 

proxy-server/pom.xml

@@ -9,6 +9,7 @@
     <artifactId>proxy-server</artifactId>
     <packaging>jar</packaging>
     <name>proxy-server</name>
+    <version>${parent.version}.1</version>
     <url>http://maven.apache.org</url>
     <dependencies>
         <dependency>

proxy-server/src/main/java/org/fengfei/lanproxy/server/ProxyServerContainer.java

@@ -128,6 +128,8 @@ private void startUserPort() {
 
             @Override
             public void initChannel(SocketChannel ch) throws Exception {
+//              // TODO: 这里实现一个流量和访问日志的记录
+                logger.info("{}===>{}", ch.remoteAddress(), ch.localAddress());
                 ch.pipeline().addFirst(new BytesMetricsHandler());
                 ch.pipeline().addLast(new UserChannelHandler());
             }
@@ -171,7 +173,7 @@ private ChannelHandler createSslHandler(SSLContext sslContext, boolean needsClie
     }
 
     public static void main(String[] args) {
-        ContainerHelper.start(Arrays.asList(new Container[] { new ProxyServerContainer(), new WebConfigContainer() }));
+        ContainerHelper.start(Arrays.asList(new Container[]{new ProxyServerContainer(), new WebConfigContainer()}));
     }
 
 }

proxy-server/src/main/java/org/fengfei/lanproxy/server/metrics/MetricsCollector.java

@@ -24,6 +24,10 @@ public class MetricsCollector {
     private AtomicLong wroteMsgs = new AtomicLong();
 
     private AtomicInteger channels = new AtomicInteger();
+    /*
+    开始记录时间(每次重启时会重置)
+     */
+    private AtomicLong collectAt = new AtomicLong(System.currentTimeMillis());
 
     private MetricsCollector() {
     }
@@ -70,10 +74,10 @@ public Metrics getAndResetMetrics() {
         metrics.setPort(port);
         metrics.setReadBytes(readBytes.getAndSet(0));
         metrics.setWroteBytes(wroteBytes.getAndSet(0));
-        metrics.setTimestamp(System.currentTimeMillis());
         metrics.setReadMsgs(readMsgs.getAndSet(0));
         metrics.setWroteMsgs(wroteMsgs.getAndSet(0));
-
+        metrics.setTimestamp(collectAt.getAndSet(System.currentTimeMillis()));
+        System.out.println("collectAt:" + metrics.getTimestamp() + " | " + collectAt.get());
         return metrics;
     }
 
@@ -83,9 +87,9 @@ public Metrics getMetrics() {
         metrics.setPort(port);
         metrics.setReadBytes(readBytes.get());
         metrics.setWroteBytes(wroteBytes.get());
-        metrics.setTimestamp(System.currentTimeMillis());
         metrics.setReadMsgs(readMsgs.get());
         metrics.setWroteMsgs(wroteMsgs.get());
+        metrics.setTimestamp(collectAt.get());
 
         return metrics;
     }

proxy-server/webpages/lanproxy-config/html/client/list.html

@@ -49,6 +49,7 @@
             <th class="th-client-name"><%:=$.i18n.prop('client.name')%></th>
             <th class="th-client-key"><%:=$.i18n.prop('client.key')%></th>
             <th class="th-status"><%:=$.i18n.prop('client.status')%></th>
+            <th class="th-status">映射数量</th>
             <th class="th-options"><%:=$.i18n.prop('public.options')%></th>
         </tr>
     </thead>
@@ -64,6 +65,7 @@
                 <span class="layui-badge layui-bg-gray"><%:=$.i18n.prop('client.status.offline')%></span>
                 <% }%>
             </td>
+            <td><%:=data[i].proxyMappings.length%></td>
             <td>
               <a data-index="<%:=i%>" class="layui-btn layui-btn-mini client-edit"><%:=$.i18n.prop('public.edit')%></a>
               <a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini client-delete"><%:=$.i18n.prop('public.delete')%></a>

proxy-server/webpages/lanproxy-config/html/statistics/list.html

@@ -2,29 +2,11 @@
 	<ul class="layui-tab-title site-demo-title">
 		<li class="layui-this tab-title"></li>
 	</ul>
-	<div class="main-content"></div>
+	<div class="main-content">
+        <table id="exampleTable" lay-filter="exampleTable"></table>
+    </div>
 </div>
 <script id="stat-tpl" type="text/html">
-<table class="layui-table" lay-skin="line">
-    <thead>
-        <tr>
-            <th class="i18n-inetport"></th>
-            <th class="i18n-inflow"></th>
-            <th class="i18n-outflow"></th>
-            <th class="i18n-channels"></th>
-        </tr>
-    </thead>
-    <tbody>
-    <%for(var i = 0; i < data.length; i++) {%>
-        <tr>
-            <td><%:=data[i].port%></td>
-            <td><%:=bytesToSize(data[i].readBytes)%></td>
-            <td><%:=bytesToSize(data[i].wroteBytes)%></td>
-            <td><%:=data[i].channels%></td>
-        </tr>
-    <%}%>
-    </tbody>
-</table>
 </script>
 <script>
     $(".tab-title").html($.i18n.prop('menu.client.statistics'));
@@ -38,14 +20,69 @@
 		return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
 	}
 
-	api_invoke("/metrics/get", {}, function(data) {
-		var html = template($("#stat-tpl").html(), {
-			data : data.data
-		});
-		$(".main-content").html(html);
-		$(".i18n-inetport").html($.i18n.prop('statistics.inetport'));
-		$(".i18n-inflow").html($.i18n.prop('statistics.inflow'));
-		$(".i18n-outflow").html($.i18n.prop('statistics.outflow'));
-		$(".i18n-channels").html($.i18n.prop('statistics.channels'));
-	});
+	function readableTimestamp(timestamp){
+
+        // 将时间戳转换为Date对象
+        const date = new Date(timestamp);
+
+        // 格式化日期
+        const formattedDate = date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+        return formattedDate;
+
+	}
+
+    // 初始化表格
+    layui.use('table', function(){
+      const table = layui.table;
+
+      // 渲染表格
+      table.render({
+        elem: '#exampleTable' // 指定原始表格元素选择器
+        ,url: '/metrics/get' // 数据接口
+        ,method: 'POST'
+        ,params: {}
+        ,cols: [[ // 表头
+          {field: 'port', title: '端口', width:120, sort: true, fixed: 'left'}
+          ,{field: 'readBytes', title: '读取字节数', width:140, sort:true, align:'right'}
+          ,{field: 'readBytesH', title: '读取字节数', width:120, sort:true , align:'right'}
+          ,{field: 'wroteBytes', title: '写入字节数', width:140, sort:true, align:'right'}
+          ,{field: 'wroteBytesH', title: '写入字节数', width:120, sort:true, align:'right'}
+          ,{field: 'readMsgs', title: '流入消息数量', width:140, sort:true, align:'right'}
+          ,{field: 'wroteMsgs', title: '流出消息数量', width:140, sort:true, align:'right'}
+          ,{field: 'channels', title: '通道数', width:120, sort:true, align:'right'}
+          ,{field: 'timestamp', title: '开始收集于', width:180}
+        ]],
+        response: {
+          statusCode: 20000 // 重新规定成功的状态码为 200，table 组件默认为 0
+        }
+        ,parseData: function(res){
+
+            console.log("parseData:",res);
+            let data = [];
+            for(let i=0;i<res.data.length;i++){
+                data[i] = res.data[i]
+                data[i]["timestamp"] = readableTimestamp(data[i]["timestamp"])
+                data[i]["readBytesH"] = bytesToSize(data[i]["readBytes"])
+                data[i]["wroteBytesH"] = bytesToSize(data[i]["wroteBytes"])
+            }
+            return {
+                "code": res.code, //解析接口状态
+                "msg": res.message, //解析提示文本
+                "count": res.total, //解析数据长度
+                "data": data //解析数据列表
+            };
+        }
+      });
+      // 每隔一段时间重新加载数据
+      setInterval(function(){
+          console.log("数据更新...");
+          table.reloadData('exampleTable', {
+              where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
+              scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
+              // …
+              height: 2000 // 高度  --- 属性设置无效，因不属于数据相关属性
+          });
+      },1000);
+    });
+
 </script>

proxy-server/webpages/lanproxy-config/index.html

@@ -5,7 +5,9 @@
 <meta name="viewport"
 	content="width=device-width, initial-scale=1, maximum-scale=1">
 <title></title>
-<link rel="stylesheet" href="/lanproxy-config/layui/css/layui.css">
+    <!-- 引入 layui.css -->
+    <link rel="stylesheet" href="/lanproxy-config/layui/css/layui.css">
+    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
 <style type="text/css">
 .main-content {
 	padding: 15px;
@@ -34,6 +36,8 @@
 	<script src="/jquery/jquery-3.1.1.min.js"></script>
 	<script src="/jquery/jquery.i18n.properties.min.js" type="text/javascript"></script>
 	<script src="/template/template.js"></script>
+    <!-- 引入 layui.js -->
+    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
 	<script>
         window.clientList = [];