基于 OpenWhisk 实时监测静态网页是否有乱码实例-1
|
- UID
- 1066743
|
基于 OpenWhisk 实时监测静态网页是否有乱码实例-1
实例：基于OpenWhisk实时监测静态页面是否有乱码 接下来以网页内容是否包含乱码字符的实例讲解第三个应用场景的具体实现流程，不过有点不一样，这里将翻译Action改成了我们自定义的Garbage Char Detection Action。其流程图如图4：
图4：OpenWhisk Garbage Char Detection from GitHub to Slack 实现该解决方案需要以下几个步骤，参考：
- 在GitHub上创建一个Repository，并将静态页面的代码Push到该Repository，然后部署到一个Web服务器，本文选择部署到IBM Bluemix平台之上；
- 创建OpenWhisk GitHub触发器；
- 自定义的Filter Action从GitHub事件中过滤出感兴趣数据；
- 自定义Garbage Char Detection Action对有改动或新增的页面进行乱码检测；
- 自定义Slack Post Action将检测结果发送到Slack指定的Channel。
实现乱码检测API 在讲解该实例的具体步骤之前，首先来了解一下Garbage Char Detection API。乱码检测服务代码可以从 下载，其GarbageCodeDetect目录是乱码检测服务对应的代码，SampleApp是基于GarbageCodeDetect服务的演示应用程序。wsk目录包括本实例中会用到的一些Action演示代码。
将GarbageCodeDetect服务以java应用程序部署到Bluemix之后，就可以使用Garbage Code Detect（乱码检测）API。
应用程序Web UI的URL，乱码检测 REST API则是，其中测试目录下面也有一些包含乱码的静态页面，
不包含乱码的静态页面有：
乱码检测REST API的HTTP方法是POST，参数是一个JSON数组，其中每个数组元素都包括一个必须参数url，和一个可选参数encoding，例如：
若没有指定页面的编码，则服务会使用页面的默认编码。该API的作用是检测JSON数组中提供所有的页面中所有含有乱码的字串，如果用户传入API的JSON数据如上有乱码字串，API会返回
 为静态网页内容创建GitHub Repository首先，需要将测试网站内容上传到GitHub上，并且部署到Web服务器之上。
本实例网站内容托管的GitHub地址是；可以通过以下几个步骤，将该代码以静态网站的形式部署到Bluemix平台之上：
部署成功之后，在可以查看到静态文件列表，如图5所示，点击其中某个文件，可以看到具体内容。
图5：静态网页内容列表 创建OpenWhisk GitHub触发器可以通过以下步骤为garbage-test-app创建GitHub触发器：
- 首先为测试应用程序创建 package binding，创建 package binding 时需要指定 github repository，accessToken和管理用户；
1
| $ wsk package update myGit -p repository icnbrave/garbage-test-app -p accessToken <GITHUB_ACCESSTOKEN> -p username <GITHUB_USERNAME>
|
- 为 github push 事件创建触发器，即绑定的 github repo 有 push 时，该触发器被触发。
1
| $ wsk trigger create gitTrigger --feed myGit/webhook -p events push
|
当触发器创建成功之后，可以在GitHub Repository的Settings中会创建一个Webhook，GitHub就是通过该Webhook去触发OpenWhisk触发器，如图6所示：
图6：github webhooks设置 自定义的Filter Action从GitHub事件中过滤出感兴趣数据GitHub的每个事件都会附带对应的 payload 数据，可以通过 查看每GitHub Event对应的payload数据，我们可以从payload中提取我们想要的数据。比如，我们可以从push事件对应的payload数据中提取最近几次commit中更新、添加的文件，然后只对这部分文件进行garbage char检测。
GitHub Push Event Payload部分数据如下：
代码清单1. GitHub Push Event Payload部分返回数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| ...
"commits": [
{
"id": "0d1a26e67d8f5eaf1f6ba5c57fc3c7d91ac0fd1c",
"tree_id": "f9d2a07e9488b91af2641b26b9407fe22a451433",
"distinct": true,
"message": "Update README.md",
"timestamp": "2015-05-05T19:40:15-04:00",
"url":
"https://github.com/baxterthehacker/public-repo/commit/0d1a26e67d8f5eaf1f6ba5c57fc3c7d91ac0fd1c",
"author": {
"name": "baxterthehacker",
"email": "baxterthehacker@users.noreply.github.com",
"username": "baxterthehacker"
},
"committer": {
"name": "baxterthehacker",
"email": "baxterthehacker@users.noreply.github.com",
"username": "baxterthehacker"
},
"added": [
],
"removed": [
],
"modified": [
"README.md"
]
}
],
...
|
通过如下命令将以下创建getPushPayloadAction来接收并且过滤当前push事件中新增或更改的文件，然后得出他们在Bluemix上的URL并送到下一个action：
1
| $ wsk action create getPushPayloadAction getPushPayload.js
|
代码清单2. getPushPayload.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function main(params){
var testAppUrl = "https://garbagetestapp.mybluemix.net/";
var head_commit = params["head_commit"] || "";
var files = [];
if(head_commit != ""){
files=files.concat(head_commit["added"]);
files=files.concat(head_commit["modified"]);
}
console.log("files: ", files);
// files map to test app link
var urls=[];
for(var i=0,len=files.length; i<len; i++){
urls.push(testAppUrl + files);
}
return {payload: urls.join(",")};
}
|
然后通过如下命令创建一个Rule将GitHub Trigger与该Action进行关联：
1
| $ wsk rule create git2slackRule gitTrigger getPushPayloadAction
|
关联之后， garbage-test-app repo 任何 push event 都会触发这个Action。
自定义Garbage Char Detection Action对有改动或新增的页面进行乱码检测第四步主要介绍 Garbage Char Detection API，以及如何在Action中接收getPushPayloadAction传来数据，并调用Garbage Char Detection API。
用创建garbageDetectionAction：
1
| $ wsk action create garbageDetectionAction garbageDetectionAction.js
|
garbageDetectionAction.js内容如代码清单2：
代码清单3. garbageDetectionAction.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| var request = require('request');
var http = require("http");
var querystring = require('querystring');
var utils = {
map : function(arr, func){
var res = [];
for(var i=0,len=arr.length; i<len; i++){
res.push(func(arr));
}
return res;
},
encodeStrings : function(arr){
return utils.map(arr, querystring.escape);
},
decodeStrings : function(arr){
return utils.map(arr, decodeURI);
},
};
function main(params) {
// payload is urls with ',' split, such as "url1,url2"
var payload = params["payload"].split(',') || [];
var data=[];
for(var i=0,len=payload.length; i<len; i++){
data.push({'url': payload});
}
console.log(data);
var options = {
host: 'garbagecodedetection.mybluemix.net',
port: 80,
path: '/rest/garbagechar_scan',
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
};
var req = http.request(options, function (res) {
res.on('data', function (message) {
var ret= eval('(' + message + ')');
console.log('response : ' ,ret);
console.log('response type: ', typeof ret);
for(var i=0; i<ret.length; i++) {
ret['garbled_lines'] =
utils.encodeStrings(ret['garbled_lines']);
}
console.log('Encoded response: ', ret)
whisk.done({result: ret});
});
});
req.on('error', function(e) {
console.log('problem with request: ' + e.message);
whisk.done({text: 'Problem with request' + e.message});
});
// write data to request body
req.write(JSON.stringify(data));
req.end();
return whisk.async();
}
|
通过下面命令来测试garbageDetectionAction：
1
| $ wsk action invoke garbageDetectAction --blocking --result -p payload
|
在终端会输出如下结果如图7：
图7.检测结果 |
|
|
|
|
|
