114 lines
4.7 KiB
HTML
114 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OpenVPN Manager</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function getBytesSize(size) {//把字节转换成正常文件大小
|
|
if (!size) return "";
|
|
var num = 1024.00; //byte
|
|
if (size < num)
|
|
return size + "B";
|
|
if (size < Math.pow(num, 2))
|
|
return (size / num).toFixed(2) + "KB"; //kb
|
|
if (size < Math.pow(num, 3))
|
|
return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
|
|
if (size < Math.pow(num, 4))
|
|
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
|
|
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
|
|
}
|
|
function formatDuring(mss){
|
|
var days = parseInt(mss / ( 60 * 60 * 24));
|
|
var hours = parseInt((mss % ( 60 * 60 * 24)) / ( 60 * 60));
|
|
var minutes = parseInt((mss % ( 60 * 60)) / 60);
|
|
var seconds = (mss % 60) ;
|
|
return days + " 天 " + hours + " 小时 " + minutes + " 分钟 ";
|
|
}
|
|
function getOnlineClients() {
|
|
var ajaxObj = new XMLHttpRequest();
|
|
ajaxObj.open('get', '/getOnlineClients');
|
|
ajaxObj.send();
|
|
ajaxObj.responseType = 'json';
|
|
ajaxObj.onreadystatechange = function () {
|
|
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
|
|
var res = this.response;
|
|
var myObj = JSON.parse(res);
|
|
var txt = "";
|
|
for (let x=0;x < myObj.onlineclient.length;x++){
|
|
var nowTs=parseInt(new Date().getTime()/1000)
|
|
txt += "<tr>"
|
|
+ "<td>" + x + "</td>"
|
|
+ "<td>" + myObj.onlineclient[x].username + "</td>"
|
|
+ "<td>" + myObj.onlineclient[x].ip + "</td>"
|
|
+ "<td>" + myObj.onlineclient[x].port + "</td>"
|
|
+ "<td>" + myObj.onlineclient[x].v_ip + "</td>"
|
|
+ "<td>" + getBytesSize(myObj.onlineclient[x].received_bytes) + "</td>"
|
|
+ "<td>" + getBytesSize(myObj.onlineclient[x].sent_bytes) + "</td>"
|
|
+ "<td>" + formatDuring(nowTs - myObj.onlineclient[x].connected_since_timestamp) + "</td>"
|
|
+ "<td >" + "<button class='kickOutBtn' client_username='"+myObj.onlineclient[x].username+"' style='cursor: pointer' type='button'>下线该用户</button>" + "</td>"
|
|
+ "</tr>";
|
|
}
|
|
document.querySelector("#onlineClientsTable").insertAdjacentHTML('afterBegin',txt)
|
|
}
|
|
}
|
|
}
|
|
function kickOutClientByCN(userName) {
|
|
|
|
var ajaxObj = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
// console.log(formData);
|
|
formData.append("username", userName);
|
|
ajaxObj.open('post', "/kickOutClientByCN",false,);
|
|
ajaxObj.send(formData);
|
|
};
|
|
function getAllUsers(){
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('get', "/getAllUsers");
|
|
xhr.send();
|
|
xhr.responseType = 'json';
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var res = this.response;
|
|
var myObj = JSON.parse(res);
|
|
var usertxt = "";
|
|
for (let x=0;x < myObj.users.length;x++){
|
|
usertxt += "<tr>"
|
|
+ "<td>" + (x+1) + "</td>"
|
|
+ "<td>" + myObj.users[x].username + "</td>"
|
|
+ "</tr>";
|
|
console.log(myObj.users[x].username)
|
|
}
|
|
document.querySelector("#allusers").insertAdjacentHTML('afterBegin',usertxt)
|
|
}
|
|
}
|
|
}
|
|
window.onload=function() {
|
|
getOnlineClients();
|
|
getAllUsers();
|
|
document.getElementById("onlineClientsTable").addEventListener('click', function (e) {
|
|
if(e.target.className === 'kickOutBtn') {
|
|
kickOutClientByCN(e.target.getAttribute('client_username'));
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<h1 align="center">OpenVPN在线用户列表</h1>
|
|
<table width="1300" height="100" border="2" cellpadding="15" cellspacing="0" align="center" >
|
|
<tr> <th>ID</th> <th>用户名</th> <th>客户端路由公网IP地址</th> <th>端口</th> <th>虚拟IP地址</th> <th>接收数据大小</th> <th>发送数据大小</th> <th>连接时间</th> <th>是否下线用户</th> </tr>
|
|
<tbody id="onlineClientsTable"> </tbody>
|
|
</table>
|
|
|
|
<h1 align="center">所有用户列表</h1>
|
|
<table width="100" height="100" border="2" cellpadding="15" cellspacing="0" align="center" >
|
|
<tr> <th></th> <th>用户名</th> </tr>
|
|
<tbody id="allusers"> </tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|