如何给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 相关文章推荐
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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版(4)
2006/10/09 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
深入浅析python定时杀进程
2016/06/06 Python
Python反射的用法实例分析
2018/02/11 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python+flask实现API的方法
2018/11/21 Python
详解Python字典的操作
2019/03/04 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
销售顾问的岗位职责
2013/11/13 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
工作经验交流材料
2014/12/30 职场文书
百万英镑观后感
2015/06/09 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫