# qn-proxy

> 将客户端能力以proxy服务进行透出，无论pc/移动端开发都可依赖于此服务从而脱离真机环境，尽情享受在纯web浏览器开发的乐趣吧！

## 解决的问题
1. 内置webview无法支持主流技术栈调试插件，且关于性能、资源等监控功能严重缺失，直接影响到插件体验瓶颈的发现及排查优化。
2. 开发依赖虚拟机/真实端环境，经过与大量开发者的沟通，其中90%的场景可以脱离端环境依赖。设备开支大，资源占用高，开发调试环境支持能力弱已经严重影响到成本和生产效率。
3. 移动端开发强依赖于手机真机调试，而QAP体系兼容h5,native，却无法在纯web开发。

## 如何使用

### step1 资源引入
目前支持两种形式，可以按照项目类型进行选择

``` javascript
// cdn资源，适合传统项目直接引入
<script src="//g.alicdn.com/qn/qn-proxy-server/{请使用当前npm包版本}/proxy.js"></script>

// npm包支持，适合工程化项目
tnpm install -S qn-proxy
```

### step2 使用proxy
``` javascript

// cdn资源使用方式
// 直接暴露全局QN对象

QN.ajax({
    ...
})

QN.top.invoke({
    ...
})

// npm包使用方式

import QN from 'QAP-SDK'; // 常规调用方式
import QN from 'qn-proxy'; // 现在只需要变更掉sdk基础对象引用，其余结构完全不需要改变
import {qap as QN} from 'qn-proxy'; // QAP应用的使用方式

QN.ajax({
    ...
})

QN.top.invoke({
    ...
})

```

### step3 链接远程服务

[远程服务器使用手册](https://www.npmjs.com/package/fie-plugin-qnproxy)

启动本地开发环境，假设你的开发地址为 `http://127.0.0.1:8899/demo/index.html`，则你需要手动添加serv信息，最终url为`http://127.0.0.1:8899/demo/index.html?servurl=30.10.1.182`

#### 参数解释

servurl: 远程代理服务地址，不填写为默认值，指向127.0.0.1（一般需要填写）
servport: 远程代理服务端口，不填写为默认值3001（非必填）

### step4 验证配置

到这里，你应该已经接入到proxy代理服务中，请务必确定“远程service开启”，“本地无任何手动控制环境的逻辑”，代理成功后，你可以在浏览器直接进行开发，如果console中出现`workbench is not defined`等提示，那说明没有替换完整

## 实现
本项目实现用户代理端，proxy对象可以根据用户入参，逐一枚举出调用层级信息，自动适配所有api调用方式。

底层库依赖 [u-proxy](https://www.npmjs.com/package/u-proxy)

### 通信设计
![QQ20170721-232716.png](https://img.alicdn.com/tfs/TB17SuBao4WMKJjSspmXXcznpXa-1109-314.png) 
![454171b5a239fbb7.png](https://img.alicdn.com/tfs/TB1Q00NaDZRMeJjSspnXXcJdFXa-1177-579.png) 

### 拓扑图
![2e421519bbae4f6a.png](https://img.alicdn.com/tfs/TB1I7BLaEgQMeJjy0FeXXXOEVXa-1672-656.png)