mirror of
https://github.com/ehang-io/nps.git
synced 2025-09-02 03:16:53 +00:00
客户端服务端分离
This commit is contained in:
刘河
112
web/views/index/add.html
Executable file
112
web/views/index/add.html
Executable file
@@ -0,0 +1,112 @@
|
||||
<div class="row tile">
|
||||
<div class="col-lg-12">
|
||||
<div class="bs-component">
|
||||
<div class="alert alert-dismissible alert-success">
|
||||
<button class="close" type="button" data-dismiss="alert">×</button>
|
||||
<span id="info"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="control-label">模式</label>
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tunnelServer" .type}}selected{{end}} value="tunnelServer">tcp隧道</option>
|
||||
<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" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" type="text" name="port" placeholder="公网服务器对外访问端口，例如8024">
|
||||
</div>
|
||||
<div class="form-group" id="target">
|
||||
<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="compress">
|
||||
<label class="control-label">数据压缩方式</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option value="">不压缩</option>
|
||||
<option value="snappy">snappy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<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">
|
||||
<label class="control-label">是否TCP复用</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">不启用</option>
|
||||
<option value="1">启用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="u" placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="p" placeholder="不填则无需验证">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
var arr = []
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target"]
|
||||
arr["tunnelServer"] = ["type", "port", "target", "compress", "u", "p", "tcp隧道模式，提供一条tcp隧道，适用于ssh、远程桌面等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的目标端口"]
|
||||
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将请求反向代理到本程序，再进行域名配置，即可解析"]
|
||||
|
||||
function resetForm() {
|
||||
for (var i = 0; i < arr["all"].length; i++) {
|
||||
$("#" + arr["all"][i]).css("display", "none")
|
||||
}
|
||||
o = $("#type option:selected").val()
|
||||
for (var i = 0; i < arr[o].length - 1; i++) {
|
||||
$("#" + arr[o][i]).css("display", "block")
|
||||
}
|
||||
$("#info").html(arr[o][arr[o].length - 1])
|
||||
}
|
||||
|
||||
$(function () {
|
||||
resetForm()
|
||||
$("#type").on("change", function () {
|
||||
resetForm()
|
||||
})
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/add",
|
||||
data: $("form").serializeArray(),
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
history.back(-1)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
108
web/views/index/edit.html
Executable file
108
web/views/index/edit.html
Executable file
@@ -0,0 +1,108 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<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>
|
||||
<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 "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" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" value="{{.t.TcpPort}}" type="text" name="port"
|
||||
placeholder="公网服务器对外访问端口，例如8024">
|
||||
</div>
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">内网目标(仅tcp、udp隧道模式需填写)</label>
|
||||
<input class="form-control" value="{{.t.Target}}" type="text" name="target"
|
||||
placeholder="内网隧道目标，例如10.1.50.203:22">
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式(所有模式均支持)</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option {{if eq "" .t.Compress}}selected{{end}} value="">不压缩</option>
|
||||
<option {{if eq "snappy" .t.Compress}}selected{{end}} value="snappy">snappy压缩</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<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">
|
||||
<label class="control-label">是否启用TCP复用(所有模式均支持)</label>
|
||||
<select class="form-control" name="mux">
|
||||
<option {{if eq false .t.Mux}}selected{{end}} value="0">不启用</option>
|
||||
<option {{if eq true .t.Mux}}selected{{end}} value="1">启用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.t.U}}" type="text" name="u"
|
||||
placeholder="不填则无需验证">
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.t.P}}" type="text" name="p"
|
||||
placeholder="不填则无需验证">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
var arr = []
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target"]
|
||||
arr["tunnelServer"] = ["type", "port", "target", "u", "p", "compress"]
|
||||
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"]
|
||||
|
||||
function resetForm() {
|
||||
for (var i = 0; i < arr["all"].length; i++) {
|
||||
$("#" + arr["all"][i]).css("display", "none")
|
||||
}
|
||||
o = $("#type option:selected").val()
|
||||
for (var i = 0; i < arr[o].length; i++) {
|
||||
$("#" + arr[o][i]).css("display", "block")
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
resetForm()
|
||||
$("#type").on("change", function () {
|
||||
resetForm()
|
||||
})
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/edit",
|
||||
data: $("form").serializeArray(),
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
history.back(-1)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
43
web/views/index/hadd.html
Executable file
43
web/views/index/hadd.html
Executable file
@@ -0,0 +1,43 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<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="host" placeholder="域名">
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/addhost",
|
||||
data: $("form").serializeArray(),
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
history.back(-1)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
81
web/views/index/hlist.html
Executable file
81
web/views/index/hlist.html
Executable file
@@ -0,0 +1,81 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>客户端key</th>
|
||||
<th>host</th>
|
||||
<th>内网目标</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(host) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/delhost",
|
||||
data: {"host": host},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/addhost?vkey={{.vkey}}"
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: window.location,
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Vkey'},
|
||||
{data: 'Host'},
|
||||
{data: 'Target'},
|
||||
{data: 'Target'},
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' +
|
||||
'<button onclick="del(\'' + row.Host + '\')" type="button" class="btn btn-danger btn-sm">删除</button>' +
|
||||
' </div>'
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
</script>
|
||||
152
web/views/index/index.html
Executable file
152
web/views/index/index.html
Executable file
@@ -0,0 +1,152 @@
|
||||
<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_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Nginx-Proxy true;
|
||||
proxy_set_header Connection "";
|
||||
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>服务端启动：./easyProxy -mode=webServer -tcpport=8284</li>
|
||||
<li>客户端启动：./easyProxy -server={{.ip}}:{{.p}} -vkey=xxx（见管理列表的客户端启动模式）</li>
|
||||
</p>
|
||||
<p><b>支持客户端同时建立多条隧道，例如单个通道时命令为./easyProxy -server={{.ip}}:{{.p}} -vkey=ccc，如果要支持另外一个隧道，则对应的执行命令为./easyProxy
|
||||
-server={{.ip}}:{{.p}} -vkey=ccc,ddd，即用逗号分隔开多个vkey，适用于所有模式！</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
199
web/views/index/list.html
Executable file
199
web/views/index/list.html
Executable file
@@ -0,0 +1,199 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
{{/*<th>模式</th>*/}}
|
||||
<th>监听端口</th>
|
||||
<th>内网目标</th>
|
||||
<th>多客户端模式客户端执行命令</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密传输</th>
|
||||
<th>TCP多路复用</th>
|
||||
<th>用户名</th>
|
||||
<th>密码</th>
|
||||
<th>客户端状态</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(vKey) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/del",
|
||||
data: {"vKey": vKey},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function start(vKey) {
|
||||
if (confirm("确定要开始任务吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/start",
|
||||
data: {"vKey": vKey},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function stop(vKey) {
|
||||
if (confirm("确定要暂停吗？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/stop",
|
||||
data: {"vKey": vKey},
|
||||
success: function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
document.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function edit(vKey) {
|
||||
window.location.href = "/index/edit?vKey=" + vKey
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/add?type=" +{{.type}}
|
||||
}
|
||||
|
||||
function hostList(vkey) {
|
||||
window.location.href = "/index/hostlist?vkey=" + vkey
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: '/index/getserverconfig?type={{.type}}',
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
// {data: 'Mode'},
|
||||
{data: 'TcpPort'},
|
||||
{data: 'Target'},
|
||||
{data: 'VerifyKey'},
|
||||
{data: 'Compress'},
|
||||
{data: 'Crypt'},
|
||||
{data: 'Mux'},
|
||||
{data: 'U'},
|
||||
{data: 'P'},
|
||||
{data: 'ClientStatus'},
|
||||
{data: 'IsRun'},
|
||||
{data: "Id"}
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
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>"
|
||||
} 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 = ""
|
||||
}
|
||||
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>'
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == 0) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">正常</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -7,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == "0") {
|
||||
return "不加密"
|
||||
} else {
|
||||
return "加密"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -6,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == "0") {
|
||||
return "不启用"
|
||||
} else {
|
||||
return "启用"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, row, meta) {
|
||||
return "./easyProxy -server={{.ip}}:{{.p}} -vkey=" + data
|
||||
// return data
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == 0) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">离线</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">在线</span>"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user