今天YY给了我一大串dns server的ip,然后提出将这些ip物理位置显示在世界地图上(仅仅显示每个地区有几个dns server就好),苦逼了一下午,总算告一段落。把里面关键的点贴上来以后看。。。
1、地图插件用的Echarts(http://echarts.baidu.com/)
2、解析ip的物理地址用的nodejs
先上张效果图:
dns ip文件长这个样子:
180.222.176.221
122.231.179.214
69.140.168.9
124.217.245.110
162.144.74.160
23.94.187.47
72.231.182.234
76.99.144.59
5.133.217.42
217.15.116.80
175.244.198.109
179.158.154.41
42.80.173.8
220.120.58.209
46.28.68.152
199.204.250.165
198.84.75.91
69.249.37.227
187.177.77.195
122.133.187.164
84.108.142.88
217.129.35.190
68.54.40.245
93.69.100.139
184.53.155.254
//此处省略好多好多行
ip物理地址库和示例代码请戳:http://tool.17mon.cn/ipdb.html#userconsent#
这里我选用的nodejs版本(其实Python实现起来真心简单啊。。。可作为前端狗,先把nodejs玩顺溜再说)
ip解析:ip.js(这个主要是看里面的接口。。。会用就OK,以后有空儿了可以琢磨下实现原理)
var fs = require('fs');
var dns = require('dns'); var _17monIpDbPath = './17monipdb.dat'; var loadBinaryData = function(filepath){
var fd = fs.openSync(filepath, 'r');
var indexLengthBuffer = new Buffer(4);
var chunkSize = 102400,
chunkBuffer,
chunks = []; var readLength = 0,
bufferLength = 0; while (true) {
chunkBuffer = new Buffer(chunkSize);
readLength = fs.readSync(fd, chunkBuffer, 0, chunkSize, bufferLength);
bufferLength += readLength;
chunks.push(chunkBuffer);
if (readLength < chunkSize) break;
}
fs.closeSync(fd); return Buffer.concat(chunks);
}; var IpFind = function(ip){
var ipArray = ip.trim().split('.'),
ip2long = function(ip){return new Buffer(ip.trim().split('.')).readInt32BE(0)},
ipInt = ip2long(ip); var offset = dataBuffer.readInt32BE(0);
var indexBuffer = dataBuffer.slice(4, offset - 4 + 4);
var tmp_offset = ipArray[0] * 4, max_comp_len = offset - 1028, index_offset = -1, index_length = -1, start = indexBuffer.slice(tmp_offset, tmp_offset + 4).readInt32LE(0);
for (start = start * 8 + 1024; start < max_comp_len; start += 8) {
if (indexBuffer.slice(start, start + 4).readInt32BE(0) >= ipInt) {
index_offset = ((indexBuffer[start + 6] << 16) + (indexBuffer[start + 5] << 8) + indexBuffer[start + 4]);
index_length = indexBuffer[start + 7];
break;
}
}
if (index_offset == -1 || index_length == -1) {
return [];
} else {
return dataBuffer.slice(offset + index_offset - 1024, offset + index_offset - 1024 + index_length).toString('utf-8').split("\t");
}
}; var dataBuffer = loadBinaryData(_17monIpDbPath); exports.find = function(name, callback){
dns.resolve4(name, function (err, addresses) {
if (err) {
callback(IpFind(name));
} else {
callback(IpFind(addresses.shift()));
}
});
};
exports.findSync = IpFind;
这是网上的示例代码
逐行读取txt,使用ip.js里的函数,生成Echarts所要的数据格式:run.js
var fs = require('fs');
var IP = require('./ip'); var _dnsserver = './dnsserver.txt'; fs.readFile(_dnsserver,'utf-8',function(err,data){
var dataIp = [];
var dataArr = data.split(/\n+/);
for(var i=0 ; i < dataArr.length-1 ; i++){
dataIp.push(IP.findSync(dataArr[i])[0]);
}
var oData = countArr(dataIp);
var jsonData = [];
for(var attr in oData){
var tempObj = {};
tempObj.name = attr;
tempObj.value = oData[attr];
jsonData.push(tempObj);
}
console.log(jsonData);
//jsonData是我们要的数据格式,大体长这个样子
// [ { name: '日本', value: 55 },
// { name: '中国', value: 240 },
// { name: '美国', value: 489 }]
}); function countArr(arr){
var o = {};
for(var i = 0, l = arr.length; i < l; i++){
var key = arr[i];
if(!o[key]){
o[key] = 1;
} else {
o[key]++;
}
}
return o;
}
/* 异步方法 支持域名 */
//IP.find('116.226.54.188', function(data){
// console.log(data);
//}); /* 同步方法,不支持域名,仅支持IPv4 */
//console.log(IP.findSync('180.73.134.23'));
运行run.js,结果如下:
然后生成txt,把结果存起来,用jQuery Ajax读取,这时,坑爹的bug来了。。。
先看代码:
$(document).ready(function(){
$.ajax({
type: "get",
url: 'data.txt',//本地存的文件
dataType: 'text',
success: function(data) {
alert(data);//这个data就是文件内容了
}
});
});
感觉没任何错误吧。。。IE低下也能粗结果,可是chrome里data就是没值啊没值。。。后来各种查资料才知道,chrome Ajax不能访问本地文件 (http://blog.csdn.net/spring21st/article/details/6109669),之前都是访问的server上的数据,没访问过本地的文件,没遇到过,这回真心长姿势了。。。
最后Echarts使用真心没啥好贴,不过注意下那个版本问题,有时候会粗错