教你开发whistle插件

whistle介绍

whistle是一款用Node实现的跨平台的Web调试代理工具,支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。github地址:https://github.com/avwo/whistle

whistle安装启动

1、安装whistle

    npm install -g whistle

2、 启动whistle

    w2 start  // 启动whistle
    w2 restart  // 重启whsitle
    w2 run  // 调试模式启动whistle

3、 在浏览器中访问

(1)域名访问 http://local.whistlejs.com/ (2)通过ip+端口来访问,例如: http://127.0.0.1:8899

whistle插件开发

现在想做一个基于whistle的查看请求参数的插件,并将参数以表格的形式展示在页面上

插件命名规范

whistle插件本身就是一个普通的Node模块,只是名字要按照whistle.xxx的形式命名,其中xxx指插件的名称且只能包含小写字母、数字、_、-四种字符,如:whistle.tdw,而xxx就是扩展的协议,可以直接在Rules里面配置使用

插件目录结构

whistle.tdw
    |__ package.json
    |__ rules.txt
    |__ index.js
    |__ lib
          |__ ui-server.js
          |__ plugin-server.js

index.js提供whistle暴露给开发者的接口

// index.js 
var initPluginServer = require('./lib/plugin-server');
var initUIServer = require('./lib/ui-server');

exports.statsServer = function(server, options) {
    initPluginServer(server, options);
};

exports.uiServer = function(server, options) {  
    initUIServer(server, options);  
};

statsServer : 处理请求的server,可以做请求合并等,返回的数据就是请求的响应数据, 如上: options 包含一些自定义的头部字段名称及配置信息

    {

          name: // 插件的名称,
          RULE_VALUE_HEADER: // 存储配置的规则值的请求头字段,
          SSL_FLAG_HEADER: // 判断是否为HTTPS请求的请求头字段,
          FULL_URL_HEADER: // 存储请求完整url的请求头字段,
          REAL_URL_HEADER: // 存储配置映射到url的请求头字段,
          NEXT_RULE_HEADER: // 存储配置的下个规则(第一规则为插件)的请求头字段,
          REQ_ID_HEADER: // 请求的id,可以用于区分响应和请求是否同一个,
          DATA_ID_HEADER: // 数据包对应的id,不一定存在,
          STATUS_CODE_HEADER: // 配置的响应状态码,
          LOCAL_HOST_HEADER: // 配置的hosts,
          HOST_PORT_HEADER: // 配置的端口,
          METHOD_HEADER: // 请求方法,
          debugMode: // 是否是通过w2 run启动的,
          config: // 包括whistle的端口号port等一系列whistle的配置,
          storage: //提供本地存储的接口,用法参  考:https://github.com/avwo/whistle/blob/master/lib/rules/util.js
      }

server是是whistle传给插件的http.Server对象,开发者通过监听server的相关事件处理whistle转发过来的请求

uiServer: local.whistlejs.com/whistle.xxx下的请求都会直接访问该server,可用于后台管理界面

插件调试

把本地node模块link到全局目录:

npm link 开启whistle的调试模式 $ w2 run 这样whistle会自动加载改插件,如果插件有代码更新,需要触发修改package.json这个文件,比如加个空格,或者直接加个字段,每次修改下这个字段,whistle会检查package.json是否有更改,如果更改的话会自动重启。

具体实现

//  lib/plugin-server.js

module.exports = function(server, options) {
    FULL_URL_HEADER = options.FULL_URL_HEADER;
    SSL_FLAG_HEADER = options.SSL_FLAG_HEADER;
    server.on('request', app);
    initHttpServer(app);
};

function initHttpServer(app) {
    app.use(function(req, res, next) {
        dataEvent.emit('data', {query: req.headers});
        res.end('');
    });
}

打开whistle,访问https://ke.qq.com , 在network界面上能看到很多的请求

通过statsServer接口,我们能获取这些请求。这里通过事件将获取到的请求传递到uiserver中

// ui-server.js

module.exports = function(server, options) {
    FULL_URL_HEADER = options.FULL_URL_HEADER;
    server.on('request', app);
    var io = require('socket.io')(server);
    initHttpServer(app);
    initWSServer(io);
};

function initHttpServer(app) {
    app.get('/', function(req, res) {
        res.sendFile(path.join(htdocs, 'index.html'));
    });

    app.get('/js/*', function(req, res) {
        res.sendFile(path.join(htdocs, 'js/index.js'));
    });
}

function initWSServer(io) {
    io.on('connection', function (socket) {
        dataEvent.on('data', function(data) {
            socket.emit('data', getUrl(data));
        });
    });
}

在浏览器中访问http://local.whistlejs.com/whistle.tdw ,请求会直接访问uiServer ,如上, uiServer处理请求,返回给浏览器相关的资源文件,展示界面。现在想实时的在页面上展示请求的链接参数,选择socket.io来实现 。 服务端与客户端建立链接,将statsServer传输过来的数据,推给浏览器展示。

客户端js:

// js/index.js
var io = require('socket.io-client');
var socket = io({
  path: '/whistle.tdw/socket.io'
});

socket.on('data', function(data) {
      var list = self.state.list;
      list.unshift(decodeReport(data));
      self.setState({
          list: list
      });
  });

结果

访问: http://local.whistlejs.com/whistle.tdw ,页面展示

插件发布

同发布正常的node模块,模块编写完毕, 通过 npm publish 发布

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

超级系统工具Sysdig,比 strace、tcpdump、lsof 加起来还强大

可以用sysdig命令做很多很酷的事情 网络 查看占用网络带宽最多的进程 sysdig -c topprocs_net 显示主机192.168.0.1的网络...

426110
来自专栏小勇DW3

线上测试环境搭建过程记录

3.安装完以后  会在 /usr/java/latest 下有对应的 jdk 版本

24110
来自专栏程序猿

在 VMware workstation 安装 CentOS 虚拟机

上一篇介绍了怎么安装 VMware workstation Pro,安装完肯定是要装虚拟机啊,下面就来介绍一下怎么安装 CentOS 7.

33560
来自专栏魏艾斯博客www.vpsss.net

BT-Panel Linux 自动磁盘挂载工具 自动将分区挂载到/www 目录

1.5K30
来自专栏Python爬虫与数据挖掘

手把手教你在VMware虚拟机中安装Ubuntu14.04系统

在VMware中创建完虚拟机之后,一般需要给虚拟机安装系统,比较受青睐的系统有Ubuntu和Centos,关于Centos系统的安装之前已经写过了,感兴...

8920
来自专栏IT笔记

记一次8小时惊心动魄的服务器+网站升级

写在前面,这篇文章服务器升级后然并没有找到论坛Discuz和博客Typecho异常所在,捯饬了半天最终选择升级和重装,成功解决。有些时候感觉真的没必要追究问题所...

47680
来自专栏菩提树下的杨过

spring cloud 学习(8) - sleuth & zipkin 调用链跟踪

业务复杂的微服务架构中,往往服务之间的调用关系比较难梳理,一次http请求中,可能涉及到多个服务的调用(eg: service A -> service B -...

64680
来自专栏云计算教程系列

如何将Ubuntu从16.04升级到18.04

Ubuntu 18.04是一个长期支持(LTS)版本,LTS 版本每两年发布一次,而 Ubuntu 18.04 是自 2016 年以来的第一个长期支持版本。Ub...

3.5K40
来自专栏Java后端技术

Python学习的路上,Anaconda送你一双遮天神翼

​  最近在学习python,发现在本地搭建python环境的时候,要是想要同时搭建不同python版本的环境,就比较麻烦,很容易就出现冲突了,很是头疼。然后光...

10620
来自专栏JadePeng的技术博客

Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目

前文使用Docker搭建Jenkins+Docker持续集成环境我们已经搭建了基于docker+jenkins的持续集成环境,并构建了基于maven的项目。这一...

68870

扫码关注云+社区

领取腾讯云代金券