Vue实战041:获取当前客户端IP地址详解(内网和外网)
前言
我们经常会有需求,希望能获取的到当前用户的IP地址,而IP又分为公网ip(也称外网)和私网IP(也称内网IP),IP地址是IP协议提供的一种统一的地址格式,每台设备都设定了一个唯一的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(''); //创建一个可以发送任意数据的数据通道
})()
什么是SDP
SDP 是一种会话描述格式 ,由许多文本行组成,文本行的格式为<类型>=<值>,<类型>是一个字母,<值>是结构化的文本串。SDP中包含了很多媒体信息,包括了媒体类型(video)、传输协议(RTP/UDP/IP)、媒体格式(H.264 video)、多播或单播地址和端口、本端的带宽信息、本端的加密信息等。
建立sdp数据
我们从要做的就是从SDP中拿到传输协议中的信息,创建一条sdp数据并将数据存入LocalDescription对象中。这样我们在LocalDescription中就得到了所有的SDP数据,从下图中我们可以看到有IP地址在里面,接下来就可以从sdq中提取ip地址了。
rtc.createOffer( offerDesc => { //创建并存储一条sdp数据
rtc.setLocalDescription(offerDesc)
}, e => { console.warn(e)})
监听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)
}}
代码封装
最后整理下代码,封装成一个方法需要的时候直接调用即可,通过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")}
}
Vue实战041:获取当前客户端IP地址详解(内网和外网)的更多相关文章
- 计算机网络基础之IP地址详解
计算机网络基础之IP地址详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.IP地址概述 1>.什么是IP地址 我们为什么要使用逻辑地址(IP地址)来标识网络设备,而不采 ...
- IP地址和子网划分学习笔记之《IP地址详解》
2018-05-03 18:47:37 在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...
- 【整理】PHP获取客户端真实IP地址详解
php获取客户端IP地址有四种方法,这五种方法分别为REMOTE_ADDR.HTTP_CLIENT_IP.HTTP_X_FORWARDED_FOR.HTTP_VIA. REMOTE_ADDR 是你的客 ...
- 【转】C#获取电脑客户端IP地址及当前用户名
在C#中获取一台电脑名,IP地址及当前用户名是非常简单,以下是我常用的几种方法: 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息: ...
- 如何设置CentOS 7开机自动获取IP地址详解
本例中以CentOS 7举例说明如何设置Linux开机自动获取IP地址和设置固定IP地址. 自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有i ...
- Windows Azure IP地址详解
Windows Azure上的IP地址有以下几种: 公网IP地址 VIP ILPIP Reserved IP 内网IP地址 DIP Static IP VIP是动态分配的公网IP,VIP可以被分配到云 ...
- shell脚本,提取ip地址和子网掩码,和查外网ip地址信息。
#提取IP地址和子网掩码 [root@localhost ~]# ifconfig eth0|grep 'inet addr'|awk -F'[ :]+' '{print $4"/& ...
- IP地址详解
讲之前了解一些网络设备的作用: 交换机:组建局域网 路由器:连接内外网 网关:一个网络的出口(Gate Way = GW)一般网关在路由器上 局域网(也称内网) 一个简单的局域网的基本组成设备:交换机 ...
- php函数获取真实客户端IP地址
function getIPaddress(){ $IPaddress=''; if (isset($_SERVER)){ if (isset($_SERVER["HTTP_X_FORWAR ...
随机推荐
- MySQL的安装及简单配置
一 .数据库概念 Mysql能干嘛呢? 它就是一款软件,安装在任何一台计算机或者服务器上的时候,只要我告诉它创建一个文件,新增一个数据,删除一个数据它就能帮我去做想要的操作 那我们暂且能不能理解为my ...
- galera集群
一.环境准备 1.各主机配置静态域名解析: cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhos ...
- English-培训4-How do you spend your day
- flask之蓝图BulePrint使用
之前flask启用程序代码和逻辑代码都是在一个页面,这样代码多了很自然不利于关于,如果要将逻辑代码和进行分离,这里需要用到Falsk的蓝图(Blueprint) 项目结构 app文件夹为项目最外层文件 ...
- java网络编程--httpurlconnection
HttpURLConnection是基于HTTP协议的,其底层通过socket通信实现.如果不设置超时(timeout),在网络异常的情况下,可能会导致程序僵死而不继续往下执行.可以通过以下两个语句来 ...
- lumen中安装及使用redis作为cache
1.安装redis模块在compose.json的require中添加 "predis/predis": "*","illuminate/redi ...
- VMware14虚拟机与宿主机建立通讯
当我们在VMware14中运行虚拟机搭建实验环境就需要与我们的宿主机或另一台虚拟机连接通讯,下面我们就来看看如何建立通讯,实现虚拟机与宿主机.虚拟机与虚拟机互联互通. 准备环境:一台安装好VMware ...
- 运维开发笔记整理-template的使用
运维开发笔记整理-Django的template的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在上一篇博客中我们学习了HttpResponse 和JsonResponse方 ...
- Java线程(1)
多线程快速入门 线程与进程区别 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以 ...
- 安装Windows8/Windows10时,在安装界面提示无法在此驱动器上安装Windows
该方法会清除整个硬盘上的数据,这是对整个硬盘的操作,如果你有多个硬盘,请一定要选好哪块硬盘,其他的硬盘数据不会被清除. 1.在当前的安装界面按Shift + F10,打开cmd窗口 2.输入diskp ...