如何给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 07 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
JavaScript实现切换多张图片
Jan 27 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php防止sql注入简单分析
2015/03/18 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
旅游安全协议书
2014/04/21 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
导游欢送词
2015/01/31 职场文书
通知书大全
2015/04/27 职场文书
2015年环保局工作总结
2015/05/22 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript