此次呢,說一下使用js獲取用戶電腦的ip信息,剛開始只是想獲取用戶ip,後來就順帶着獲取了操做系統和瀏覽器信息。node
先說下獲取用戶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):web
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同步獲取:chrome
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; } } } } };