mirror of
https://github.com/ehang-io/nps.git
synced 2025-09-02 03:16:53 +00:00
dashboard 备注 客户端管理优化 多客户端支持 流量显示支持 热更新支持 404错误页支持
This commit is contained in:
刘河
@@ -19,9 +19,12 @@
|
||||
<option {{if eq "udpServer" .type}}selected{{end}} value="udpServer">udp隧道</option>
|
||||
<option {{if eq "socks5Server" .type}}selected{{end}} value="socks5Server">socks5代理</option>
|
||||
<option {{if eq "httpProxyServer" .type}}selected{{end}} value="httpProxyServer">http代理
|
||||
<option {{if eq "hostServer" .type}}selected{{end}} value="hostServer">host客户端</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="remark" placeholder="备注">
|
||||
</div>
|
||||
<div class="form-group" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" type="text" name="port" placeholder="公网服务器对外访问端口，例如8024">
|
||||
@@ -30,6 +33,18 @@
|
||||
<label class="control-label">内网目标(ip:端口)</label>
|
||||
<input class="form-control" type="text" name="target" placeholder="内网代理地址，例如10.1.50.203:22">
|
||||
</div>
|
||||
<div class="form-group" id="client_id">
|
||||
<label class="control-label">客户端ID</label>
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
</div>
|
||||
<div class="form-group" id="use_client">
|
||||
<label class="control-label">是否使用客户端配置</label>
|
||||
<select class="form-control" name="use_client">
|
||||
<option value="1">是</option>
|
||||
<option value="0">否</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式</label>
|
||||
<select class="form-control" name="compress">
|
||||
@@ -37,16 +52,16 @@
|
||||
<option value="snappy">snappy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<div class="form-group" id="crypt">
|
||||
<label class="control-label">是否加密传输</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">不加密</option>
|
||||
<option value="1">加密</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<div class="form-group" id="mux">
|
||||
<label class="control-label">是否TCP复用</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<select class="form-control" name="mux">
|
||||
<option value="0">不启用</option>
|
||||
<option value="1">启用</option>
|
||||
</select>
|
||||
@@ -77,7 +92,7 @@
|
||||
arr["udpServer"] = ["type", "port", "target", "compress", "udp隧道模式，提供一条udp隧道，适用于dns、内网dns访问等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的udp目标端口"]
|
||||
arr["socks5Server"] = ["type", "port", "compress", "u", "p", "socks5代理模式，内网socks5代理，配合proxifer，可如同使用vpn一样访问内网设备或资源，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置socks5代理，即访问内网设备或者资源 "]
|
||||
arr["httpProxyServer"] = ["type", "port", "compress", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arr["hostServer"] = ["type", "compress", "u", "p", "域名分发模式，使用域名代理内网服务，适用于小程序开发、公众号开发、站点演示等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，使用nginx将请求反向代理到本程序，再进行域名配置，即可解析"]
|
||||
arrClientHide = ["compress", "u", "p", "crypt", "mux"]
|
||||
|
||||
function resetForm() {
|
||||
for (var i = 0; i < arr["all"].length; i++) {
|
||||
@@ -90,10 +105,28 @@
|
||||
$("#info").html(arr[o][arr[o].length - 1])
|
||||
}
|
||||
|
||||
function resetClientCnf() {
|
||||
for (var i = 0; i < arrClientHide.length; i++) {
|
||||
$("#" + arrClientHide[i]).css("display", "block")
|
||||
}
|
||||
op = $("#use_client option:selected").val()
|
||||
if (op == 1) {
|
||||
for (var i = 0; i < arrClientHide.length; i++) {
|
||||
$("#" + arrClientHide[i]).css("display", "none")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
$("#type").on("change", function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
})
|
||||
$("#use_client").on("change", function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
})
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
|
||||
@@ -4,17 +4,21 @@
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<input type="hidden" name="vKey" value="{{.t.VerifyKey}}">
|
||||
<input type="hidden" name="id" value="{{.t.Id}}">
|
||||
<div class="form-group">
|
||||
<label class="control-label">模式</label>
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tunnelServer" .t.Mode}}selected{{end}} value="tunnelServer">tcp隧道</option>
|
||||
<option {{if eq "udpServer" .t.Mode}}selected{{end}} value="udpServer">udp隧道</option>
|
||||
<option {{if eq "socks5Server" .t.Mode}}selected{{end}} value="socks5Server">socks5代理</option>
|
||||
<option {{if eq "socks5Server" .t.Mode}}selected{{end}} value="socks5Server">socks5代理
|
||||
</option>
|
||||
<option {{if eq "httpProxyServer" .t.Mode}}selected{{end}} value="httpProxyServer">http代理
|
||||
<option {{if eq "hostServer" .t.Mode}}selected{{end}} value="hostServer">host客户端</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.t.Remark}}" type="text" name="remark" placeholder="备注">
|
||||
</div>
|
||||
<div class="form-group" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" value="{{.t.TcpPort}}" type="text" name="port"
|
||||
@@ -25,6 +29,18 @@
|
||||
<input class="form-control" value="{{.t.Target}}" type="text" name="target"
|
||||
placeholder="内网隧道目标，例如10.1.50.203:22">
|
||||
</div>
|
||||
<div class="form-group" id="client_id">
|
||||
<label class="control-label">客户端ID</label>
|
||||
<input class="form-control" value="{{.t.ClientId}}" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
</div>
|
||||
<div class="form-group" id="use_client">
|
||||
<label class="control-label">是否使用客户端配置</label>
|
||||
<select class="form-control" name="use_client">
|
||||
<option {{if eq false .t.UseClientCnf}}selected{{end}} value="0">否</option>
|
||||
<option {{if eq true .t.UseClientCnf}}selected{{end}} value="1">是</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式(所有模式均支持)</label>
|
||||
<select class="form-control" name="compress">
|
||||
@@ -32,14 +48,14 @@
|
||||
<option {{if eq "snappy" .t.Compress}}selected{{end}} value="snappy">snappy压缩</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<div class="form-group" id="crypt">
|
||||
<label class="control-label">是否加密传输(所有模式均支持)</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option {{if eq false .t.Crypt}}selected{{end}} value="0">不加密</option>
|
||||
<option {{if eq true .t.Crypt}}selected{{end}} value="1">加密</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<div class="form-group" id="mux">
|
||||
<label class="control-label">是否启用TCP复用(所有模式均支持)</label>
|
||||
<select class="form-control" name="mux">
|
||||
<option {{if eq false .t.Mux}}selected{{end}} value="0">不启用</option>
|
||||
@@ -74,7 +90,7 @@
|
||||
arr["udpServer"] = ["type", "port", "target", "compress"]
|
||||
arr["socks5Server"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["httpProxyServer"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["hostServer"] = ["type", "compress", "u", "p"]
|
||||
arrClientHide = ["compress", "u", "p", "crypt", "mux"]
|
||||
|
||||
function resetForm() {
|
||||
for (var i = 0; i < arr["all"].length; i++) {
|
||||
@@ -86,10 +102,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
function resetClientCnf() {
|
||||
for (var i = 0; i < arrClientHide.length; i++) {
|
||||
$("#" + arrClientHide[i]).css("display", "block")
|
||||
}
|
||||
op = $("#use_client option:selected").val()
|
||||
if (op == 1) {
|
||||
for (var i = 0; i < arrClientHide.length; i++) {
|
||||
$("#" + arrClientHide[i]).css("display", "none")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
$("#type").on("change", function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
})
|
||||
$("#use_client").on("change", function () {
|
||||
resetForm()
|
||||
resetClientCnf()
|
||||
})
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
|
||||
@@ -4,18 +4,26 @@
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<input type="hidden" name="vkey" value="{{.vkey}}">
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="remark" placeholder="备注">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">域名</label>
|
||||
<input class="form-control" type="text" name="host" placeholder="域名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">客户端id</label>
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id" placeholder="客户端id">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">内网目标</label>
|
||||
<input class="form-control" type="text" name="target" placeholder="内网隧道目标，例如10.1.50.203:22">
|
||||
</div>
|
||||
<div class="form-group" id="header">
|
||||
<label class="control-label">header头修改(冒号分隔，多个请换行填写)</label>
|
||||
<textarea class="form-control" rows="4" type="text" name="header" placeholder="Cache-Control: no-cache"></textarea>
|
||||
<textarea class="form-control" rows="4" type="text" name="header"
|
||||
placeholder="Cache-Control: no-cache"></textarea>
|
||||
</div>
|
||||
<div class="form-group" id="hostchange">
|
||||
<label class="control-label">host修改</label>
|
||||
|
||||
@@ -4,12 +4,20 @@
|
||||
<h3 class="tile-title">修改</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<input type="hidden" name="vkey" value="{{.t.VerifyKey}}">
|
||||
<div class="form-group">
|
||||
<label class="control-label">域名</label>
|
||||
<input class="form-control" value="{{.h.Host}}" type="hidden" name="host" placeholder="域名">
|
||||
<input class="form-control" value="{{.h.Host}}" type="text" name="nhost" placeholder="域名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.h.Remark}}" type="text" name="remark" placeholder="备注">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">客户端id</label>
|
||||
<input class="form-control" value="{{.h.ClientId}}" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">内网目标</label>
|
||||
<input class="form-control" value="{{.h.Target}}" type="text" name="target"
|
||||
|
||||
146
web/views/index/help.html
Normal file
146
web/views/index/help.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=star&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=watch&count=true&size=large&v=2"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=fork&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">域名代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 小程序开发、微信公众号开发、产品演示
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b>
|
||||
<li>有一个域名proxy.com，有一台公网机器ip为{{.ip}}</li>
|
||||
<li>两个内网开发站点127.0.0.1:81，127.0.0.1:82</li>
|
||||
<li>想通过a.proxy.com访问127.0.0.1:81，通过b.proxy.com访问127.0.0.1:82</li>
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>将a.proxy.com，b.proxy.com解析到公网服务器{{.ip}}</li>
|
||||
<li>使用nginx监听这两个个域名，并配置ssl等……</li>
|
||||
<li>在nginx配置中添加反向代理（或直接将http监听端口改为80）<br>
|
||||
<pre><code>
|
||||
server {
|
||||
listen 80;
|
||||
server_name a.proxy.com b.proxy.com;#也可以是泛解析*.proxy.com
|
||||
#ssl等配置
|
||||
<b>location / {
|
||||
proxy_pass http://127.0.0.1:{{.proxyPort}};
|
||||
}</b>
|
||||
}
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>在域名代理管理中添加一个客户端，选择压缩方式，保存。 <a href="/index/add?type=hostServer">立即添加</a></li>
|
||||
{{/*<li>在域名代理管理中找到新加的客户端(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>点击该客户端的域名管理，添加两条规则规则：1、域名：a.proxy.com，内网目标：127.0.0.1:81，2、域名：b.proxy.com，内网目标：127.0.0.1:82</li>
|
||||
<li>现在访问a.proxy.com，b.proxy.com即可成功</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">tcp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> ssh、远程桌面等tcp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想通过访问公网服务器{{.ip}}的8001端口，连接内网机器10.1.50.101的22端口，实现ssh连接
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在tcp隧道管理中添加一条隧道，填写监听的端口（8001）、内网目标ip和目标端口（10.1.50.101:22），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=tunnelServer">立即添加</a></li>
|
||||
{{/*<li>在tcp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>访问公网服务器ip（{{.ip}}）:填写的监听端口(8001)，相当于访问内网ip(10.1.50.101):目标端口(22)，例如：ssh -p 8001 root@{{.ip}}</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">udp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 内网dns解析等udp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 内网有一台dns（10.1.50.102:53），在非内网环境下想使用该dns，公网服务器为{{.ip}}
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在udp隧道管理中添加一条隧道，填写监听的端口（8002）、内网目标ip和目标端口（10.1.50.102:53），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=udpServer">立即添加</a></li>
|
||||
{{/*<li>在udp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>修改本机dns为{{.ip}}，则相当于使用10.1.50.202作为dns服务器</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">socks5代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下如同使用vpn一样访问内网设备或者资源
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8003端口作为socks5代理，达到访问内网任意设备或者资源的效果
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在socks5隧道管理中添加一条隧道，填写监听的端口（8003），验证用户名和密码自行选择（建议先不填，部分客户端不支持，proxifer支持），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=sock5Server">立即添加</a></li>
|
||||
{{/*<li>在socks5代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>在外网环境的本机配置socks5代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8003)，即可畅享内网了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">http代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下访问内网站点
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8004端口作为http代理，访问内网网站
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在http隧道管理中添加一条隧道，填写监听的端口（8004），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=httpProxyServer">立即添加</a></li>
|
||||
<li>在http代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>
|
||||
<li>在外网环境的本机配置http代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8004)，即可访问了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<p>
|
||||
<b>多客户端模式：</b>
|
||||
<li>服务端启动：./proxy_server</li>
|
||||
<li>客户端启动：./proxy_client -server={{.ip}}:{{.p}} -vkey=xxx（见管理列表的客户端启动模式）</li>
|
||||
</p>
|
||||
<p><b>支持客户端同时建立多条隧道，例如单个通道时命令为./proxy_client -server={{.ip}}:{{.p}}
|
||||
-vkey=ccc，如果要支持另外一个隧道，则对应的执行命令为./proxy_client
|
||||
-server={{.ip}}:{{.p}} -vkey=ccc,ddd，即用逗号分隔开多个vkey，适用于所有模式！</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -5,9 +5,13 @@
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>客户端key</th>
|
||||
<th>客户端id</th>
|
||||
<th>备注</th>
|
||||
<th>host</th>
|
||||
<th>内网目标</th>
|
||||
<th>host改写</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -39,7 +43,7 @@
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/addhost?vkey={{.vkey}}"
|
||||
window.location.href = "/index/addhost?vkey={{.task_id}}&client_id={{.client_id}}"
|
||||
}
|
||||
|
||||
function edit(host) {
|
||||
@@ -48,6 +52,11 @@
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
@@ -59,9 +68,13 @@
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Vkey'},
|
||||
{data: 'ClientId'},
|
||||
{data: 'Remark'},
|
||||
{data: 'Host'},
|
||||
{data: 'Target'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'Target'},
|
||||
],
|
||||
bFilter: false,
|
||||
@@ -74,7 +87,19 @@
|
||||
'<button onclick="edit(\'' + row.Host + '\')" type="button" class="btn btn-primary btn-sm">编辑查看</button> '
|
||||
+ ' </div>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
});
|
||||
|
||||
@@ -1,147 +1,104 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=star&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=watch&count=true&size=large&v=2"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=fork&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>HTTP端口</h4>
|
||||
<p><b>{{.p}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">域名代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 小程序开发、微信公众号开发、产品演示
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b>
|
||||
<li>有一个域名proxy.com，有一台公网机器ip为{{.ip}}</li>
|
||||
<li>两个内网开发站点127.0.0.1:81，127.0.0.1:82</li>
|
||||
<li>想通过a.proxy.com访问127.0.0.1:81，通过b.proxy.com访问127.0.0.1:82</li>
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>将a.proxy.com，b.proxy.com解析到公网服务器{{.ip}}</li>
|
||||
<li>使用nginx监听这两个个域名，并配置ssl等……</li>
|
||||
<li>在nginx配置中添加反向代理（或直接将http监听端口改为80）<br>
|
||||
<pre><code>
|
||||
server {
|
||||
listen 80;
|
||||
server_name a.proxy.com b.proxy.com;#也可以是泛解析*.proxy.com
|
||||
#ssl等配置
|
||||
<b>location / {
|
||||
proxy_pass http://127.0.0.1:{{.proxyPort}};
|
||||
}</b>
|
||||
}
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>在域名代理管理中添加一个客户端，选择压缩方式，保存。 <a href="/index/add?type=hostServer">立即添加</a></li>
|
||||
{{/*<li>在域名代理管理中找到新加的客户端(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>点击该客户端的域名管理，添加两条规则规则：1、域名：a.proxy.com，内网目标：127.0.0.1:81，2、域名：b.proxy.com，内网目标：127.0.0.1:82</li>
|
||||
<li>现在访问a.proxy.com，b.proxy.com即可成功</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>域名解析数</h4>
|
||||
<p><b>{{.data.hostCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>总客户端数</h4>
|
||||
<p><b>{{.data.clientCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>在线客户端数</h4>
|
||||
<p><b>{{.data.clientOnlineCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">tcp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> ssh、远程桌面等tcp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想通过访问公网服务器{{.ip}}的8001端口，连接内网机器10.1.50.101的22端口，实现ssh连接
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在tcp隧道管理中添加一条隧道，填写监听的端口（8001）、内网目标ip和目标端口（10.1.50.101:22），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=tunnelServer">立即添加</a></li>
|
||||
{{/*<li>在tcp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>访问公网服务器ip（{{.ip}}）:填写的监听端口(8001)，相当于访问内网ip(10.1.50.101):目标端口(22)，例如：ssh -p 8001 root@{{.ip}}</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<h3 class="tile-title">流量</h3>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<canvas class="embed-responsive-item" id="flow"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">udp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 内网dns解析等udp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 内网有一台dns（10.1.50.102:53），在非内网环境下想使用该dns，公网服务器为{{.ip}}
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在udp隧道管理中添加一条隧道，填写监听的端口（8002）、内网目标ip和目标端口（10.1.50.102:53），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=udpServer">立即添加</a></li>
|
||||
{{/*<li>在udp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>修改本机dns为{{.ip}}，则相当于使用10.1.50.202作为dns服务器</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<h3 class="tile-title">代理类型</h3>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<canvas class="embed-responsive-item" id="types"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">socks5代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下如同使用vpn一样访问内网设备或者资源
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8003端口作为socks5代理，达到访问内网任意设备或者资源的效果
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在socks5隧道管理中添加一条隧道，填写监听的端口（8003），验证用户名和密码自行选择（建议先不填，部分客户端不支持，proxifer支持），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=sock5Server">立即添加</a></li>
|
||||
{{/*<li>在socks5代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>在外网环境的本机配置socks5代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8003)，即可畅享内网了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">http代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下访问内网站点
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8004端口作为http代理，访问内网网站
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在http隧道管理中添加一条隧道，填写监听的端口（8004），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=httpProxyServer">立即添加</a></li>
|
||||
<li>在http代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>
|
||||
<li>在外网环境的本机配置http代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8004)，即可访问了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<p>
|
||||
<b>多客户端模式：</b>
|
||||
<li>服务端启动：./proxy_server</li>
|
||||
<li>客户端启动：./proxy_client -server={{.ip}}:{{.p}} -vkey=xxx（见管理列表的客户端启动模式）</li>
|
||||
</p>
|
||||
<p><b>支持客户端同时建立多条隧道，例如单个通道时命令为./proxy_client -server={{.ip}}:{{.p}} -vkey=ccc，如果要支持另外一个隧道，则对应的执行命令为./proxy_client
|
||||
-server={{.ip}}:{{.p}} -vkey=ccc,ddd，即用逗号分隔开多个vkey，适用于所有模式！</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
var pdataFlow = [
|
||||
{
|
||||
value: {{.data.inletFlowCount}},
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "入口流量"
|
||||
},
|
||||
{
|
||||
value: {{.data.exportFlowCount}},
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "出口流量"
|
||||
}
|
||||
]
|
||||
var pdataTypes = [
|
||||
{
|
||||
value: {{.data.tunnelServerCount}},
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "tcp隧道"
|
||||
},
|
||||
{
|
||||
value: {{.data.socks5ServerCount}},
|
||||
color: "#85FEAA",
|
||||
highlight: "#85FEAA",
|
||||
label: "socks5隧道"
|
||||
},
|
||||
{
|
||||
value: {{.data.httpProxyServerCount}},
|
||||
color: "#4B653C",
|
||||
highlight: "#4B653C",
|
||||
label: "http代理"
|
||||
},
|
||||
{
|
||||
value: {{.data.udpServerCount}},
|
||||
color: "#90653C",
|
||||
highlight: "#90653C",
|
||||
label: "udp代理"
|
||||
},
|
||||
{
|
||||
value: {{.data.hostCount}},
|
||||
color: "#FDB45C",
|
||||
highlight: "#FDB45C",
|
||||
label: "域名解析"
|
||||
}
|
||||
]
|
||||
var ctxp = $("#flow").get(0).getContext("2d");
|
||||
var pieChart = new Chart(ctxp).Pie(pdataFlow);
|
||||
var ctxd = $("#types").get(0).getContext("2d");
|
||||
var doughnutChart = new Chart(ctxd).Doughnut(pdataTypes);
|
||||
</script>
|
||||
|
||||
@@ -5,10 +5,11 @@
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
{{/*<th>模式</th>*/}}
|
||||
<th>Id</th>
|
||||
<th>备注</th>
|
||||
<th>客户端Id</th>
|
||||
<th>监听端口</th>
|
||||
<th>内网目标</th>
|
||||
<th>多客户端模式客户端执行命令</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密传输</th>
|
||||
<th>TCP多路复用</th>
|
||||
@@ -16,11 +17,12 @@
|
||||
<th>密码</th>
|
||||
<th>客户端状态</th>
|
||||
<th>状态</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -30,12 +32,12 @@
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(vKey) {
|
||||
function del(id) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/del",
|
||||
data: {"vKey": vKey},
|
||||
data: {"id": id},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
@@ -46,12 +48,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function start(vKey) {
|
||||
function start(id) {
|
||||
if (confirm("确定要开始任务吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/start",
|
||||
data: {"vKey": vKey},
|
||||
data: {"id": id},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
@@ -62,12 +64,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function stop(vKey) {
|
||||
function stop(id) {
|
||||
if (confirm("确定要暂停吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/stop",
|
||||
data: {"vKey": vKey},
|
||||
data: {"id": id},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
@@ -78,35 +80,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
function edit(vKey) {
|
||||
window.location.href = "/index/edit?vKey=" + vKey
|
||||
function edit(id) {
|
||||
window.location.href = "/index/edit?id=" + id
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/add?type=" +{{.type}}
|
||||
window.location.href = "/index/add?type={{.type}}" + "&client_id={{.client_id}}"
|
||||
}
|
||||
|
||||
function hostList(vkey) {
|
||||
window.location.href = "/index/hostlist?vkey=" + vkey
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: '/index/getserverconfig?type={{.type}}',
|
||||
url: '/index/getserverconfig?type={{.type}}' + "&client_id=" +{{.client_id}},
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
// {data: 'Mode'},
|
||||
{data: 'Id'},
|
||||
{data: 'Remark'},
|
||||
{data: 'ClientId'},
|
||||
{data: 'TcpPort'},
|
||||
{data: 'Target'},
|
||||
{data: 'VerifyKey'},
|
||||
{data: 'Compress'},
|
||||
{data: 'Crypt'},
|
||||
{data: 'Mux'},
|
||||
@@ -114,6 +119,8 @@
|
||||
{data: 'P'},
|
||||
{data: 'ClientStatus'},
|
||||
{data: 'IsRun'},
|
||||
{data: 'ExportFlow'},
|
||||
{data: 'InletFlow'},
|
||||
{data: "Id"}
|
||||
],
|
||||
bFilter: false,
|
||||
@@ -121,27 +128,18 @@
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.IsRun == 1) {
|
||||
btn = "<button onclick=\"stop('" + row.VerifyKey + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
|
||||
btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
|
||||
} else {
|
||||
btn = "<button onclick=\"start('" + row.VerifyKey + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
|
||||
}
|
||||
btn_edit = '<button onclick="edit(\'' + row.VerifyKey + '\')" type="button" class="btn btn-primary btn-sm">查看编辑</button> '
|
||||
if ({{.type}} == "hostServer"
|
||||
)
|
||||
{
|
||||
btn_host = '<button onclick="hostList(\'' + row.VerifyKey + '\')" type="button" class="btn btn-info btn-sm">域名管理</button> '
|
||||
}
|
||||
else
|
||||
{
|
||||
btn_host = ""
|
||||
btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
|
||||
}
|
||||
btn_edit = '<button onclick="edit(\'' + row.Id + '\')" type="button" class="btn btn-primary btn-sm">查看编辑</button> '
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' +
|
||||
'<button onclick="del(\'' + row.VerifyKey + '\')" type="button" class="btn btn-danger btn-sm">删除</button>' +
|
||||
btn_edit + btn + btn_host + ' </div>'
|
||||
'<button onclick="del(\'' + row.Id + '\')" type="button" class="btn btn-danger btn-sm">删除</button>' +
|
||||
btn_edit + btn + ' </div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
targets: -4,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == 0) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
@@ -151,7 +149,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -7,
|
||||
targets: -9,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == "0") {
|
||||
return "不加密"
|
||||
@@ -161,7 +159,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -6,
|
||||
targets: -8,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == "0") {
|
||||
return "不启用"
|
||||
@@ -169,17 +167,9 @@
|
||||
return "启用"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, row, meta) {
|
||||
return "./proxy_client -server={{.ip}}:{{.p}} -vkey=" + data
|
||||
// return data
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
targets: -5,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == 0) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">离线</span>"
|
||||
@@ -187,6 +177,18 @@
|
||||
return "<span class=\"badge badge-pill badge-success\">在线</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
|
||||
Reference in New Issue
Block a user