前言

我们经常会有需求,希望能获取的到当前用户的IP地址,而IP又分为公网ip(也称外网)和私网IP(也称内网IP),IP地址是IP协议提供的一种统一的地址格式,每台设备都设定了一个唯一的IP地址”,从而确保了用户在连网的计算机上操作时,能够快速地从互联网中找到自己所需的对象。

Vue实战041:获取当前客户端IP地址详解(内网和外网)

 

外网IP和内网IP的区别

1,外网IP是全球唯一的IP地址,仅分配给某一台网络设备。内网IP是由路由器分配给每一台设备内部使用的IP地址;

2,外网IP任何一台设备都可以ping通。内网IP只有在同一环境的内部设备才能ping通;

3,外网用户无法直接访问到内网用户,内网用户可以访问外网用户,因为内网的所有用户都是通过同一个外网IP进行上网的;

如何获取外网IP

这里我们可以借助现成的接口,搜狐提供的一个JS接口获取IP地址,我们只需在入口index.html中直接引入该接口即可轻松获取到当前用户的外网ip,Vue中在public中的index.html中引入接口,然后再需要获取的地方通过returnCitySN['cip']即可拿到IP地址,然后将IP存到localstorage或者Vuex中,这样随时可以调用了。

//引入JS
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
//在组件中获取,可以选择在首页载入前获取该参数
var Ip=returnCitySN['cip']
localStorage.setItem('Ip', Ip)

如何获取内网IP

获取内网IP相对来说会复杂些,毕竟没有现成的接口可以调用,这里我们用到了WebRTC(网页即时通信),在WebRTC规范中,RTCPeerConnection可以用于视频流/音频流、以及数据的传输。这里们通过RTCPeerConnection 对象建立一个连接通道,下面3个或对象是针对不同浏览器来创建的。

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

当RTCPeerConnection对象存在时,我们就可以实例化该对象并创建一个可以发送任意数据的数据通道,此时我们的RTCPeerConnection对象中数据基本都是null。

var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
if (RTCPeerConnection) (()=>{
var rtc = new RTCPeerConnection()
rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
})()
Vue实战041:获取当前客户端IP地址详解(内网和外网)

 

什么是SDP

SDP 是一种会话描述格式 ,由许多文本行组成,文本行的格式为<类型>=<值>,<类型>是一个字母,<值>是结构化的文本串。SDP中包含了很多媒体信息,包括了媒体类型(video)、传输协议(RTP/UDP/IP)、媒体格式(H.264 video)、多播或单播地址和端口、本端的带宽信息、本端的加密信息等。

Vue实战041:获取当前客户端IP地址详解(内网和外网)

 

建立sdp数据

我们从要做的就是从SDP中拿到传输协议中的信息,创建一条sdp数据并将数据存入LocalDescription对象中。这样我们在LocalDescription中就得到了所有的SDP数据,从下图中我们可以看到有IP地址在里面,接下来就可以从sdq中提取ip地址了。

rtc.createOffer( offerDesc => { //创建并存储一条sdp数据
rtc.setLocalDescription(offerDesc)
}, e => { console.warn(e)})
Vue实战041:获取当前客户端IP地址详解(内网和外网)

 

监听candidate事件

onicecandidate属性在RTCPeerConnection实例上发生icecandidate事件时要调用的函数,当我们向服务器发送消息时触发并获取到SDP中的candidate属性,而candidate中正好有我们想要的IP地址,你可以直接获取var ip_addr = evt.candidate.address。当然你也可以从candidate属性中获取,不过这里就会复杂点,用个正则来提取吧(显然方法一简单)。

 rtc.onicecandidate =(evt) => { //监听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)
}}
Vue实战041:获取当前客户端IP地址详解(内网和外网)

 

代码封装

最后整理下代码,封装成一个方法需要的时候直接调用即可,通过localStorage来存储获取到的ip_addr(或者Vuex存储),然后我们只需要通过localStorage.getItem('ip_addr'))就可以获取到我们的内网IP地址了。

getUserIP(){
var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
if (RTCPeerConnection) (()=>{
var rtc = new RTCPeerConnection()
rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
rtc.createOffer( offerDesc => { //创建并存储一个sdp数据
rtc.setLocalDescription(offerDesc)
}, e => { console.log(e)})
rtc.onicecandidate =(evt) => { //监听candidate事件
if (evt.candidate) {
var ip_addr = evt.candidate.address
localStorage.setItem('ip_addr',ip_addr)
}}
})()
else{console.log("目前仅测试了chrome浏览器OK")}
}


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

详解基于vue,vue-router, vuex以及addRoutes进行权限控制知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。