vue 浏览器地址是ip_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 //在组件中获取,可以选择在首页载入前获取该参数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 浏览器地址是ip_Vue实战041:获取当前客户端IP地址详解(内网和外网)相关推荐
- Nginx在多层代理下获取真实客户端IP地址
最近在研究nginx中如何获取真实客户端IP的方法.众所周知,在编译Nginx时,可通过添加http_realip_module模块来获取真实客户端IP地址.何为真实IP地址呢?请看下图,既获取到的真 ...
- 学习笔记 - Nginx在多层代理下获取真实客户端IP地址
最近在研究nginx中如何获取真实客户端IP的方法.众所周知,在编译Nginx时,可通过添加http_realip_module模块来获取真实客户端IP地址.何为真实IP地址呢?请看下图,既获取到的真 ...
- 【转】C#获取电脑客户端IP地址及当前用户名
在C#中获取一台电脑名,IP地址及当前用户名是非常简单,以下是我常用的几种方法: 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息: ...
- java获取f5服务器真实ip,F5服务器做负载均衡时WebService获取真实客户端IP地址
首先,我先来介绍一下什么是F5服务器,内容来自百度: 负载均衡,英文名称为Load Balance,其意思就是将负载(工作任务)进行平衡.分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器. ...
- vue中使用接口(搜狐接口)获取访客IP地址
花了1天时间踩坑,终于探索出来了最方便的解决方式.. 网上大部分大厂的获取ip的方式都已不可用,只有搜狐接口还有一些小网站搞出来的接口能用.这里我使用的是搜狐获取IP的接口. 搜狐接口返回的是一个js ...
- wxWidgets:获取主机的IP地址
wxWidgets:获取主机的IP地址 wxWidgets:获取主机的IP地址 获取主机的IP地址 gethostbyname() 更好的方法 公共 IP 地址 枚举接口 wxWidgets:获取主机 ...
- qt获取本机全部ipv4_QT5下获取本机IP地址、计算机名、网络连接名、MAC地址、子网掩码、广播地址...
获取主机名称 /* * 名称:get_localmachine_name * 功能:获取本机机器名称 * 参数:no * 返回:QString */ QString CafesClient::get_ ...
- linux编程获取本机IP地址的三种方法
这是一项不太清晰而且没有多大意义的工作.一个原因是网络地址的设置非常灵活而且都是允许用户进行个性化设置的,比如一台计算机上可以有多块物理网卡或者虚拟网卡,一个网卡上可以绑定多个IP地址,用户可以为网卡 ...
- 获取本机IP地址的方法
文章目录 获取本机IP地址的方法总结 一.Windows电脑 获取本机 IP 地址 1.命令行获取 2.使用网络状态查看IP地址 二.Mac 电脑获取本机 IP 地址 1. mac电脑要输入**ifc ...
- 前端Vue中获取本机ip地址
前端Vue中获取本机ip地址 1.打开谷歌浏览器,地址栏输入chrome://flags,进入. 2.搜索Anonymize local IPs exposed by WebRTC,将其设置为Disa ...
最新文章
- 训练Rainbow算法需要1425个GPU Day?谷歌说强化学习可以降低计算成本
- AI口语翻译,遇到的可不止口齿不清…….
- python3 多线程简介
- 冒泡排序和其两种优化
- 【STM32】窗口看门狗相关类型和函数
- Windows下的Qt Creator的安装
- php中将SimpleXMLElement Object数组转化为普通数组
- spark stage 划分 源码
- input js 离开事件_JS购物车的实现
- Harmony OS — PageSlider滑动页面
- 2017 年最受欢迎的 10个编程挑战网站
- 级联删除相关记录在哪_kube-apiserver审计日志记录和采集
- Windows10电脑重置后右键没有nvidia控制面板的问题
- 虚拟地址与物理地址的转换
- 一对同居男女同一天的日记
- STL剖析(二):容器底层数据结构及常见用法
- 顾客满意度意义与作用
- Centos7安装mysql 数据库
- Final Cut Pro 在视频的多个地方同时打马赛克
- input框中的背景文字