【原创】最新的"答题热"中，前端的一点小工作

一、前言

　　据王思聪引爆全民HQ也3个星期了，总结下最新做的一个有关"答题热"的工具。并借由这个工具的开发，分析当下HybridApp中H5的一些技术。

　　在百万英雄等节目刚出来的时候，就有很多大咖预测会有人工智能AI介入。但是AI需要大量的运算分析，更贴近服务端，前端主要还是做客户端的工作。

　　所以我的思路是借助一些互联网公司开发的免费AI答题助手，做一个整合到PC端AI参考答案的界面，并支持批量答题操作。助手包括：

　　丶百度：简单搜索　　Hybrid-App

　　丶搜狗：汪仔助手　　Hybrid-App

　　丶UC：UC答题助手　　Hybrid-App 或者 Web

 二、开发

目前全部代码已放在github：https://github.com/SmileSmith/autoAnswer（欢迎star和issue）

　　效果图：

1、各个助手代码分析（借用Charles抓取手机的请求和返回包）

简单搜索：Hybrid-App，简单的静态页面做webscoket请求，特点如下：

　　　　　　丶主要JS逻辑和代码放在index.html中，引入zepto和自己开发的scoket.io.js

　　　　　　丶API用WebSocket实现实时响应，不需要轮询

　　　　　　丶API请求简单的请求头即可，支持跨域，没有做安全策略，也不检验referrer

　　　　点评：官方命名是DAN哥直播间，除了显示AI搜索的结果外，还有比较答案等功能，互动性较强。技术上用了Webscoket等，减少通讯数量，降低服务器的压力。但是业务层的代码没有做模块化工程化，且有一些低级错误，比如函数名为：stepTow。总结是设计和架构不错，业务逻辑代码有点像赶工的。。。

　　　　模拟：直接抓取相关代码，静态托管即可。

汪仔助手：Hybrid-App，与简单搜索差不多，简单的静态页面，差别在于用Ajax轮询，特点如下：

　　　　　　丶主要JS逻辑和代码放在index.html中，引入zepto

　　　　　　丶API需要轮询

　　　　　　丶API使用jsonp支持跨域，并且做了CSP以及校验域名和校验User-Agent

　　　　点评：与上面的简单搜索对比，无时无刻的轮询肯定是耗费大量资源的。前几天API接口从wd.sogou.com换到一个ip地址，不知道是不是服务器压力还是技术升级的原因。

　　　　模拟：抓取相关代码，静态托管，对API请求做反向代理，修改Refer和User-Agent

UC答题助手：Web访问或Hybrid-App，一个Vue的SPA应用，在特定时间段Ajax轮询，特点如下：

　　　　　　丶Vue构建的SPA应用，webpack打包并做了版本控制，看上去是最工程化

　　　　　　丶使用了服务端渲染SSR，（当前期数，奖金，开始轮询的时间）是动态渲染到首页的一个变量中的

　　　　　　丶API在答题开始时开始轮询，12题结束后结束轮询，由前端控制，API不支持跨域

　　　　　　丶API做了校验域名

　　　　模拟：抓取相关代码，静态托管，对API请求做反向代理，修改Refer和User-Agent。首页动态渲染的参数，需要先请求真实地址（这里也需要反向代理），拿到相关参数eval，并修改请求数据的API地址。

2、本地服务器静态文件托管和反向代理、以及收集数据和点击手机

　　　　用Python3写了简单的sever，方便后续分析处理数据。

静态托管：

动态代理（感觉这里用urllib模拟的反向代理，和我以前常用的Koa和Nginx中的反向代理有些不同：Charles抓的包能看到代理访问的地址）：

收集答题数据：

3、收据收集和分析

后续工作：

　　　　1、根据各个助手的情况，分配权重值。再出题5秒后，用户还未点击的情况下，自动点击平均各个助手的答案权重值后的最终结果。

　　　　2、收集各个助手的答题情况：每个答案的确信百分比，最终答案，准确率，做数据分析

写在最后：

关于Hybrid-App，客户端代码的安全，除了像搜狗的CSP和UC那样动态渲染外，像JSBridge的技术可以使用，检验是否有App数据返回。但都是防君子不防小人，真要拿，都是有办法的。

关于答题，适度就好，娱乐娱乐~