github/nps
1
0
Fork 0
mirror of https://github.com/ehang-io/nps.git synced 2025-09-02 03:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard 备注 客户端管理优化 多客户端支持 流量显示支持 热更新支持 404错误页支持

Browse Source
This commit is contained in:
刘河
2019-01-25 12:10:12 +08:00
parent c533436c78
commit c34e5e1a7d
37 changed files with 5415 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
web/views/client/add.html Executable file
View File

@@ -0,0 +1,67 @@
<div class="row tile">
<div class="col-md-6 col-md-auto">
<div>
<h3 class="tile-title">添加</h3>
<div class="tile-body">
<form>
<div class="form-group" id="target">
<label class="control-label">备注</label>
<input class="form-control" type="text" name="Remark" placeholder="客户端备注">
</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>
<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>
</form>
</div>
<div class="tile-footer">
&nbsp;&nbsp;<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: "/client/add",
data: $("form").serializeArray(),
success: function (res) {
alert(res.msg)
if (res.status) {
history.back(-1)
}
}
})
})
})
</script>

71
web/views/client/edit.html Executable file
View File

@@ -0,0 +1,71 @@
<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="Id" value="{{.c.Id}}">
<div class="form-group" id="target">
<label class="control-label">备注</label>
<input class="form-control" value="{{.c.Remark}}" type="text" name="Remark" placeholder="客户端备注">
</div>
<div class="form-group" id="u">
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
<input class="form-control" value="{{.c.Cnf.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="{{.c.Cnf.P}}" type="text" name="p"
placeholder="不填则无需验证">
</div>
<div class="form-group" id="compress">
<label class="control-label">数据压缩方式(所有模式均支持)</label>
<select class="form-control" name="compress">
<option {{if eq "" .c.Cnf.Compress}}selected{{end}} value="">不压缩</option>
<option {{if eq "snappy" .c.Cnf.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 .c.Cnf.Crypt}}selected{{end}} value="0">不加密</option>
<option {{if eq true .c.Cnf.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 .c.Cnf.Mux}}selected{{end}} value="0">不启用</option>
<option {{if eq true .c.Cnf.Mux}}selected{{end}} value="1">启用</option>
</select>
</div>
</form>
</div>
<div class="tile-footer">
&nbsp;&nbsp;<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: "/client/edit",
data: $("form").serializeArray(),
success: function (res) {
alert(res.msg)
if (res.status) {
history.back(-1)
}
}
})
})
})
</script>

234
web/views/client/list.html Executable file
View File

@@ -0,0 +1,234 @@
<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>Id</th>
<th>验证密钥</th>
<th>客户端地址</th>
<th>备注</th>
<th>压缩方式</th>
<th>加密</th>
<th>多路复用</th>
<th>用户名</th>
<th>密码</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(id) {
if (confirm("确定要删除数据吗？")) {
$.ajax({
type: "POST",
url: "/client/del",
data: {"id": id},
success: function (res) {
alert(res.msg)
if (res.status) {
document.location.reload();
}
}
})
}
}
function start(id) {
if (confirm("确定要开始任务吗？")) {
$.ajax({
type: "POST",
url: "/client/changestatus",
data: {"id": id, "status": 1},
success: function (res) {
alert(res.msg)
if (res.status) {
document.location.reload();
}
}
})
}
}
function stop(id) {
if (confirm("确定要暂停吗？")) {
$.ajax({
type: "POST",
url: "/client/changestatus",
data: {
"id": id, "status": 0
},
success:
function (res) {
alert(res.msg)
if (res.status) {
document.location.reload();
}
}
})
}
}
function edit(id) {
window.location.href = "/client/edit?id=" + id
}
function add() {
window.location.href = "/client/add"
}
function show_tunnel_list(id) {
window.location.href = "/index/all?client_id=" + id
}
function show_host_list(id) {
window.location.href = "/index/hostlist?client_id=" + id
}
$(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: '/client/client',
type: 'POST'
},
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
columns: [　//这个是显示到界面上的个数据　格式为 {data:'显示的字段名'}
{data: 'Id'},
{data: 'VerifyKey'},
{data: "Addr"},
{data: "Remark"},
{data: "Addr"},
{data: "Addr"},
{data: "Addr"},
{data: "Addr"},
{data: "Remark"},
{data: "Status"},
{data: "IsConnect"},
{data: "Addr"},
{data: "Addr"},
{data: ""},
],
bFilter: false,
columnDefs: [{
targets: -1,
render: function (data, type, row, meta) {
if (row.Status == true) {
btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
} else {
btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
}
btn_del = '<button onclick="del(\'' + row.Id + '\')" class="btn btn-danger btn-sm">删除</button> '
btn_edit = '<button onclick="edit(\'' + row.Id + '\')" class="btn btn-primary btn-sm">查看编辑</button> '
btn_list = '<button onclick="show_tunnel_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">隧道</button> '
btn_host = '<button onclick="show_host_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">域名</button> '
return '<div class="btn-group" role="group" aria-label="..."> ' + btn + btn_del + btn_edit + btn_host + btn_list + '</div>'
}
},
{
targets: -5,
render: function (data, type, row, meta) {
if (data == false) {
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
} else {
return "<span class=\"badge badge-pill badge-success\">正常</span>"
}
}
},
{
targets: -4,
render: function (data, type, row, meta) {
if (data == false) {
return "<span class=\"badge badge-pill badge-secondary\">未连接</span>"
} else {
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)
}
},
{
targets: -6,
render: function (data, type, row, meta) {
return row.Cnf.P
}
},
{
targets: -7,
render: function (data, type, row, meta) {
return row.Cnf.U
}
},
{
targets: -8,
render: function (data, type, row, meta) {
if (row.Cnf.Mux == "0") {
return "不启用"
} else {
return "启用"
}
}
}
,
{
targets: -9,
render: function (data, type, row, meta) {
if (row.Cnf.Crypt == "0") {
return "不加密"
} else {
return "加密"
}
}
}
,
{
targets: -10,
render: function (data, type, row, meta) {
return row.Cnf.Compress
}
}
],
buttons: []
});
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
})
;
</script>

43
web/views/index/add.html
View File

@@ -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({

46
web/views/index/edit.html
View File

@@ -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({

12
web/views/index/hadd.html
View File

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

10
web/views/index/hedit.html
View File

@@ -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
View 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>

33
web/views/index/hlist.html
View File

@@ -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: []
});

219
web/views/index/index.html
View File

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

90
web/views/index/list.html
View File

@@ -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: []

10
web/views/public/layout.html
View File

@@ -41,8 +41,10 @@
</div>
<ul class="app-menu">
<li><a class="app-menu__item {{if eq "index" .menu}}active{{end}}" href="/"><i
class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">使用说明</span></a></li>
<li><a class="app-menu__item {{if eq "host" .menu}}active{{end}}" href="/index/host"><i
class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">dashboard</span></a></li>
<li><a class="app-menu__item {{if eq "client" .menu}}active{{end}}" href="/client/client"><i
class="app-menu__icon fa fa-dot-circle-o"></i><span class="app-menu__label">客户端管理</span></a></li>
<li><a class="app-menu__item {{if eq "host" .menu}}active{{end}}" href="/index/hostlist"><i
class="app-menu__icon fa fa-lemon-o"></i><span class="app-menu__label">域名代理</span></a></li>
<li><a class="app-menu__item {{if eq "tcp" .menu}}active{{end}}" href="/index/tcp"><i
class="app-menu__icon fa fa-life-buoy"></i><span class="app-menu__label">tcp隧道管理</span></a></li>
@@ -52,12 +54,14 @@
class="app-menu__icon fa fa-lightbulb-o"></i><span class="app-menu__label">socks5代理</span></a></li>
<li><a class="app-menu__item {{if eq "http" .menu}}active{{end}}" href="/index/http"><i
class="app-menu__icon fa fa-magic"></i><span class="app-menu__label">http代理</span></a></li>
<li><a class="app-menu__item {{if eq "help" .menu}}active{{end}}" href="/index/help"><i
class="app-menu__icon fa fa-question-circle"></i><span class="app-menu__label">使用说明</span></a></li>
</ul>
</aside>
<script type="text/javascript" src="/static/js/datatables.min.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/chart.js"></script>
<main class="app-content">
<div class="app-title">
<div>