这次呢,说一下使用js获取用户电脑的ip信息,刚开始只是想获取用户ip,后来就顺带着获取了操作系统和浏览器信息。
先说下获取用户ip地址,包括像ipv4,ipv6,掩码等内容,但是大部分都要根据浏览器的支持情况来决定,目前主流浏览器对于ipv4的支持是统一的。第一种:用于仅支持IE的且允许Activex运行,利用ActiveObject来获取。这种的话可以选择性使用。第二种:利用其它平台的接口,在自己程序中使用如:新浪,太平洋等的接口,来给用户返回ip地址,这种是不太安全的方式,万一人家改变接口了呢?第三种(也是我采用的方式):使用WebRTC(Web Real-Time Communications),他的定义是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。当然这些信息和基本api在MDN上面是可以查看的。我们可以使用WebRTC获取ip地址,经测试,在chrome,opera,firefox,safari均可正常获取,对于IE和Edge,可以采用第一种方式进行兼容。下面是获取代码(我这里没有支持IE/Edge):
function getYourIP(){ var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (RTCPeerConnection) (function () { var rtc = new RTCPeerConnection({iceServers:[]}); if (1 || window.mozRTCPeerConnection) { rtc.createDataChannel(\'\', {reliable:false}); }; rtc.onicecandidate = function (evt) { if (evt.candidate) grepSDP("a="+evt.candidate.candidate); }; rtc.createOffer(function (offerDesc) { grepSDP(offerDesc.sdp); rtc.setLocalDescription(offerDesc); }, function (e) { console.warn("offer failed", e); }); var addrs = Object.create(null); addrs["0.0.0.0"] = false; function updateDisplay(newAddr) { if (newAddr in addrs) return; else addrs[newAddr] = true; var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; }); for(var i = 0; i < displayAddrs.length; i++){ if(displayAddrs[i].length > 16){ displayAddrs.splice(i, 1); i--; } } document.getElementById(\'list\').textContent = displayAddrs[0]; } function grepSDP(sdp) { var hosts = []; sdp.split(\'\r\n\').forEach(function (line, index, arr) { if (~line.indexOf("a=candidate")) { var parts = line.split(\' \'), addr = parts[4], type = parts[7]; if (type === \'host\') updateDisplay(addr); } else if (~line.indexOf("c=")) { var parts = line.split(\' \'), addr = parts[2]; updateDisplay(addr); } }); } })(); else{ document.getElementById(\'list\').textContent = "请使用主流浏览器:chrome,firefox,opera,safari"; } }
其次是获取操作系统,浏览器信息:这里到没有那么麻烦,我使用了包含浏览器信息的Navigator对象,这个对象虽然没有公开标准,但是所有的浏览器都支持他,这就好办了。我们主要用到的是useragent属性,他包含了这些信息,我们要做的只是使用正则表达式分离和提取,针对不同的浏览器,兼容chrome,firefox,opera,ie,edge,safari等,对于其他浏览器,例如360极速等,会返回相应内核对应的浏览器名称。也可以再进行其他判断。下面是代码:
function getBrowserInfo(){ var agent = navigator.userAgent.toLowerCase() ; console.log(agent); var arr = []; var system = agent.split(\' \')[1].split(\' \')[0].split(\'(\')[1]; arr.push(system); var regStr_edge = /edge\/[\d.]+/gi; var regStr_ie = /trident\/[\d.]+/gi ; var regStr_ff = /firefox\/[\d.]+/gi; var regStr_chrome = /chrome\/[\d.]+/gi ; var regStr_saf = /safari\/[\d.]+/gi ; var regStr_opera = /opr\/[\d.]+/gi; //IE if(agent.indexOf("trident") > 0){ arr.push(agent.match(regStr_ie)[0].split(\'/\')[0]); arr.push(agent.match(regStr_ie)[0].split(\'/\')[1]); return arr; } //Edge if(agent.indexOf(\'edge\') > 0){ arr.push(agent.match(regStr_edge)[0].split(\'/\')[0]); arr.push(agent.match(regStr_edge)[0].split(\'/\')[1]); return arr; } //firefox if(agent.indexOf("firefox") > 0){ arr.push(agent.match(regStr_ff)[0].split(\'/\')[0]); arr.push(agent.match(regStr_ff)[0].split(\'/\')[1]); return arr; } //Opera if(agent.indexOf("opr")>0){ arr.push(agent.match(regStr_opera)[0].split(\'/\')[0]); arr.push(agent.match(regStr_opera)[0].split(\'/\')[1]); return arr; } //Safari if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0){ arr.push(agent.match(regStr_saf)[0].split(\'/\')[0]); arr.push(agent.match(regStr_saf)[0].split(\'/\')[1]); return arr; } //Chrome if(agent.indexOf("chrome") > 0){ arr.push(agent.match(regStr_chrome)[0].split(\'/\')[0]); arr.push(agent.match(regStr_chrome)[0].split(\'/\')[1]); return arr; }else{ arr.push(\'请更换主流浏览器,例如chrome,firefox,opera,safari,IE,Edge!\') return arr; } }
用node内置系统模块os同步获取:
let getIP = function() { let interfaces = require("os").networkInterfaces(); for (var devName in interfaces) { var iface = interfaces[devName]; for (var i = 0; i < iface.length; i++) { let alias = iface[i]; if ( alias.family === "IPv4" && alias.address !== "127.0.0.1" && !alias.internal ) { if (alias.address) { return alias.address; } } } } };