言

我們經(jīng)常會(huì)有需求，希望能獲取的到當(dāng)前用戶的IP地址，而IP又分為公網(wǎng)ip（也稱外網(wǎng)）和私網(wǎng)IP（也稱內(nèi)網(wǎng)IP），IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式，每臺(tái)設(shè)備都設(shè)定了一個(gè)唯一的IP地址”，從而確保了用戶在連網(wǎng)的計(jì)算機(jī)上操作時(shí)，能夠快速地從互聯(lián)網(wǎng)中找到自己所需的對(duì)象。

外網(wǎng)IP和內(nèi)網(wǎng)IP的區(qū)別

1，外網(wǎng)IP是全球唯一的IP地址，僅分配給某一臺(tái)網(wǎng)絡(luò)設(shè)備。內(nèi)網(wǎng)IP是由路由器分配給每一臺(tái)設(shè)備內(nèi)部使用的IP地址；

2，外網(wǎng)IP任何一臺(tái)設(shè)備都可以ping通。內(nèi)網(wǎng)IP只有在同一環(huán)境的內(nèi)部設(shè)備才能ping通；

3，外網(wǎng)用戶無法直接訪問到內(nèi)網(wǎng)用戶，內(nèi)網(wǎng)用戶可以訪問外網(wǎng)用戶，因?yàn)閮?nèi)網(wǎng)的所有用戶都是通過同一個(gè)外網(wǎng)IP進(jìn)行上網(wǎng)的；

如何獲取外網(wǎng)IP

這里我們可以借助現(xiàn)成的接口，搜狐提供的一個(gè)JS接口獲取IP地址，我們只需在入口index.html中直接引入該接口即可輕松獲取到當(dāng)前用戶的外網(wǎng)ip，Vue中在public中的index.html中引入接口，然后再需要獲取的地方通過returnCitySN['cip']即可拿到IP地址，然后將IP存到localstorage或者Vuex中，這樣隨時(shí)可以調(diào)用了。

//引入JS
 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
//在組件中獲取，可以選擇在首頁載入前獲取該參數(shù)
var Ip=returnCitySN['cip']
localStorage.setItem('Ip', Ip)

如何獲取內(nèi)網(wǎng)IP

獲取內(nèi)網(wǎng)IP相對(duì)來說會(huì)復(fù)雜些，畢竟沒有現(xiàn)成的接口可以調(diào)用，這里我們用到了WebRTC（網(wǎng)頁即時(shí)通信），在WebRTC規(guī)范中,RTCPeerConnection可以用于視頻流/音頻流、以及數(shù)據(jù)的傳輸。這里們通過RTCPeerConnection 對(duì)象建立一個(gè)連接通道，下面3個(gè)或?qū)ο笫轻槍?duì)不同瀏覽器來創(chuàng)建的。

var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;

當(dāng)RTCPeerConnection對(duì)象存在時(shí)，我們就可以實(shí)例化該對(duì)象并創(chuàng)建一個(gè)可以發(fā)送任意數(shù)據(jù)的數(shù)據(jù)通道，此時(shí)我們的RTCPeerConnection對(duì)象中數(shù)據(jù)基本都是null。

var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 if (RTCPeerConnection) (()=>{
 var rtc=new RTCPeerConnection()
 rtc.createDataChannel(''); //創(chuàng)建一個(gè)可以發(fā)送任意數(shù)據(jù)的數(shù)據(jù)通道
 })()

什么是SDP

SDP 是一種會(huì)話描述格式 ，由許多文本行組成，文本行的格式為<類型>=<值>，<類型>是一個(gè)字母，<值>是結(jié)構(gòu)化的文本串。SDP中包含了很多媒體信息，包括了媒體類型（video）、傳輸協(xié)議（RTP/UDP/IP）、媒體格式（H.264 video）、多播或單播地址和端口、本端的帶寬信息、本端的加密信息等。

建立sdp數(shù)據(jù)

我們從要做的就是從SDP中拿到傳輸協(xié)議中的信息，創(chuàng)建一條sdp數(shù)據(jù)并將數(shù)據(jù)存入LocalDescription對(duì)象中。這樣我們?cè)贚ocalDescription中就得到了所有的SDP數(shù)據(jù)，從下圖中我們可以看到有IP地址在里面，接下來就可以從sdq中提取ip地址了。

rtc.createOffer( offerDesc=> { //創(chuàng)建并存儲(chǔ)一條sdp數(shù)據(jù)
 rtc.setLocalDescription(offerDesc)
}, e=> { console.warn(e)})

監(jiān)聽candidate事件

onicecandidate屬性在RTCPeerConnection實(shí)例上發(fā)生icecandidate事件時(shí)要調(diào)用的函數(shù)，當(dāng)我們向服務(wù)器發(fā)送消息時(shí)觸發(fā)并獲取到SDP中的candidate屬性，而candidate中正好有我們想要的IP地址，你可以直接獲取var ip_addr=evt.candidate.address。當(dāng)然你也可以從candidate屬性中獲取，不過這里就會(huì)復(fù)雜點(diǎn)，用個(gè)正則來提取吧（顯然方法一簡(jiǎn)單）。

 rtc.onicecandidate=(evt)=> { //監(jiān)聽candidate事件
 if (evt.candidate) {
 //方法一：
 var ip_addr=evt.candidate.address
 //方法二：
 let ip_rule=/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.
 var ip_addr=ip_rule.exec(evt.candidate.candidate)[1]
 console.log("ip_addr==",ip_addr)
 }}

代碼封裝

最后整理下代碼，封裝成一個(gè)方法需要的時(shí)候直接調(diào)用即可，通過localStorage來存儲(chǔ)獲取到的ip_addr（或者Vuex存儲(chǔ)），然后我們只需要通過localStorage.getItem('ip_addr'))就可以獲取到我們的內(nèi)網(wǎng)IP地址了。

getUserIP(){
 var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 if (RTCPeerConnection) (()=>{
 var rtc=new RTCPeerConnection()
 rtc.createDataChannel(''); //創(chuàng)建一個(gè)可以發(fā)送任意數(shù)據(jù)的數(shù)據(jù)通道
 rtc.createOffer( offerDesc=> { //創(chuàng)建并存儲(chǔ)一個(gè)sdp數(shù)據(jù)
 rtc.setLocalDescription(offerDesc)
 }, e=> { console.log(e)})
 rtc.onicecandidate=(evt)=> { //監(jiān)聽candidate事件
 if (evt.candidate) {
 var ip_addr=evt.candidate.address
 localStorage.setItem('ip_addr',ip_addr)
 }}
 })()
 else{console.log("目前僅測(cè)試了chrome瀏覽器OK")}
}

歡迎關(guān)注本人的公眾號(hào)：編程手札，文章也會(huì)在公眾號(hào)更新