如何给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 相关文章推荐
jquery实现居中弹出层代码
Aug 25 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
canvas的神奇用法
Feb 03 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Spy++的使用方法及下载教程
2021/01/29 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
求职信写作要突出重点
2014/01/01 职场文书
给领导的致歉信范文
2014/01/13 职场文书
安全生产先进个人总结
2015/02/15 职场文书
酒店员工管理制度
2015/08/05 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android