如何给ss bash 写一个 WEB 端查看流量的页面


Posted in Javascript onMarch 23, 2017

由于刚毕业的穷大学生,和朋友合租了一台服务器开了多个端口提供 ss 服务,懒得配置 ss-panel,就使用了 ss-bash 来监控不同端口的流量,但每次都要等上服务器才能看到流量使用情况,很麻烦,于是就写了个简单的页面来提供 WEB 访问。

JavaScript 版本

用 crontab 定时把流量记录文件复制到 WEB 目录下,写个 JS 脚本作数据处理。

function successFunction(data) {
 var allRows = data.split(/\r?\n|\r/);
 var table = '<table class="table table-hover" style="width: 50%; margin: auto;">';
 for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
  if (singleRow === 0) {
   table += '<thead>';
   table += '<tr>';
  } else {
   table += '<tr>';
  }
  var rowCells = allRows[singleRow].split(',');
  for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
   if (singleRow === 0) {
    table += '<th class="text-right">';
    table += rowCells[rowCell];
    table += '</th>';
   } else {
    table += '<td class="text-right">';
    table += rowCells[rowCell];
    table += '</td>';
   }
  }
  if (singleRow === 0) {
   table += '</tr>';
   table += '</thead>';
   table += '<tbody>';
  } else {
   table += '</tr>';
  }
 } 
 table += '</tbody>';
 table += '</table>';
 $('body').append(table);
}

首页

<!DOCTYPE html>
<html>
<head>
  <title>Traffic</title>
  <script src=//cdn.bootcss.com/jquery/3.2.0/jquery.min.js></script>
  <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="test.js"></script>
</head>
<body>
<script type="text/javascript">
var text="";
$.ajax({
  url: "traffic.txt",
  method: "GET",
  success: function(data){
    text = data.replace(' ', '').replace(/\t| /g, ',');
    successFunction(text);
  }
})
</script>
</body>
</html>

PHP 版本

服务器本来就安装了 PHP,所以用 PHP 也是很理所当然的事情了。

<!DOCTYPE html>
<html>
<head>
  <title>Traffic</title>
  <script src=//cdn.bootcss.com/jquery/3.2.0/jquery.min.js></script>
  <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
$traffic = file_get_contents("d:\\traffic.txt");
$traffic = explode("\n", $traffic);
echo "<table class='table table-hover' style='width: 50%; margin: auto;''>\n";
echo "<thead>\n";
echo "<tr>\n";
for ($i=0; $i < sizeof($traffic); $i++) {
  if ($i === 0) {
    $str = preg_replace('/ /','',$traffic[0],1);
    $str = preg_replace('/ /', ',', $str);
    $str = explode(',', $str);
    for ($j=0; $j < sizeof($str); $j++) { 
      echo "<th class='text-right'>" . $str[$j] . "</th>\n";
    }
    echo "</tr>\n";
    echo "</thead>\n";
    echo "<tbody>\n";
  }
  else {
    $str = preg_replace('/\t/', ',', $traffic[$i]);
    $str = explode(',', $str);
    echo "<tr>\n";
    for ($j=0; $j < sizeof($str); $j++) { 
      echo "<td class='text-right'>" . $str[$j] . "</td>\n";
    }
    echo "</tr>\n";
  }
}
echo "</tbody>\n";
echo "</table>\n";
?>
</body>
</html>

以上所述是小编给大家介绍的给ss bash 写一个 WEB 端查看流量的页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
vue中轮训器的使用
Jan 27 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
angularJS深拷贝详解
Mar 23 #Javascript
canvas实现环形进度条效果
Mar 23 #Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 #Javascript
jquery实现图片平滑滚动详解
Mar 22 #jQuery
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 #Javascript
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
JavaScript登录记住密码操作(超简单代码)
Mar 22 #Javascript
You might like
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python地图绘制实操详解
2019/03/04 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python接口开发实现步骤详解
2020/04/26 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
学生会主席竞聘书
2014/03/31 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
银行授权委托书格式
2014/10/10 职场文书
2016高考寄语集锦
2015/12/04 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android