如何给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 constructor的实际作用分析
Nov 15 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP数据过滤的方法
2013/10/30 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python进行两个表格对比的方法
2018/06/27 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
如何理解python面向对象编程
2020/06/01 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
函数指针的定义是什么
2016/08/14 面试题
八一建军节活动方案
2014/02/10 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
观看信仰心得体会
2014/09/04 职场文书
个人委托书如何写
2014/09/25 职场文书
个人政治思想总结
2015/03/05 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Nginx速查手册及常见问题
2022/04/07 Servers