對(duì)地址
<img src=http://www.jungjaehyung.com/uploadfile/2024/1011/20241011084920296.jpg” />
相對(duì)地址: ./當(dāng)前目錄 ../向上退一級(jí)目錄
1、圖片和網(wǎng)頁(yè)在同一個(gè)文件夾中
index.html中調(diào)用a.jpg
index.html高用a.jpg
我們經(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ì)象。
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)用戶無(wú)法直接訪問(wèn)到內(nèi)網(wǎng)用戶,內(nèi)網(wǎng)用戶可以訪問(wèn)外網(wǎng)用戶,因?yàn)閮?nèi)網(wǎng)的所有用戶都是通過(guò)同一個(gè)外網(wǎng)IP進(jìn)行上網(wǎng)的;
這里我們可以借助現(xiàn)成的接口,搜狐提供的一個(gè)JS接口獲取IP地址,我們只需在入口index.html中直接引入該接口即可輕松獲取到當(dāng)前用戶的外網(wǎng)ip,Vue中在public中的index.html中引入接口,然后再需要獲取的地方通過(guò)returnCitySN['cip']即可拿到IP地址,然后將IP存到localstorage或者Vuex中,這樣隨時(shí)可以調(diào)用了。
//引入JS <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> //在組件中獲取,可以選擇在首頁(yè)載入前獲取該參數(shù) var Ip=returnCitySN['cip'] localStorage.setItem('Ip', Ip)
獲取內(nèi)網(wǎng)IP相對(duì)來(lái)說(shuō)會(huì)復(fù)雜些,畢竟沒(méi)有現(xiàn)成的接口可以調(diào)用,這里我們用到了WebRTC(網(wǎng)頁(yè)即時(shí)通信),在WebRTC規(guī)范中,RTCPeerConnection可以用于視頻流/音頻流、以及數(shù)據(jù)的傳輸。這里們通過(guò)RTCPeerConnection 對(duì)象建立一個(gè)連接通道,下面3個(gè)或?qū)ο笫轻槍?duì)不同瀏覽器來(lái)創(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 是一種會(huì)話描述格式 ,由許多文本行組成,文本行的格式為<類型>=<值>,<類型>是一個(gè)字母,<值>是結(jié)構(gòu)化的文本串。SDP中包含了很多媒體信息,包括了媒體類型(video)、傳輸協(xié)議(RTP/UDP/IP)、媒體格式(H.264 video)、多播或單播地址和端口、本端的帶寬信息、本端的加密信息等。
我們從要做的就是從SDP中拿到傳輸協(xié)議中的信息,創(chuàng)建一條sdp數(shù)據(jù)并將數(shù)據(jù)存入LocalDescription對(duì)象中。這樣我們?cè)贚ocalDescription中就得到了所有的SDP數(shù)據(jù),從下圖中我們可以看到有IP地址在里面,接下來(lái)就可以從sdq中提取ip地址了。
rtc.createOffer( offerDesc=> { //創(chuàng)建并存儲(chǔ)一條sdp數(shù)據(jù) rtc.setLocalDescription(offerDesc) }, e=> { console.warn(e)})
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屬性中獲取,不過(guò)這里就會(huì)復(fù)雜點(diǎn),用個(gè)正則來(lái)提取吧(顯然方法一簡(jiǎn)單)。
rtc.onicecandidate=(evt)=> { //監(jiān)聽(tīng)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)用即可,通過(guò)localStorage來(lái)存儲(chǔ)獲取到的ip_addr(或者Vuex存儲(chǔ)),然后我們只需要通過(guò)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)聽(tīng)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)更新
輯導(dǎo)語(yǔ):前段時(shí)間,有很多博主因?yàn)镮P屬地問(wèn)題“翻車”,而是否展示IP屬地也引發(fā)了廣大網(wǎng)友的討論。為什么各大平臺(tái)突然集體展示賬號(hào)IP屬地?這項(xiàng)功能有什么意義?本篇文章中,作者給出了答案,我們一起來(lái)看看吧。
最近,各大平臺(tái)網(wǎng)站陸續(xù)公開(kāi)了賬號(hào)IP屬地。對(duì)于這項(xiàng)新的政策,網(wǎng)上主流觀點(diǎn)都持支持態(tài)度。為什么突然間各大平臺(tái)網(wǎng)站很有默契的同時(shí)開(kāi)發(fā)且執(zhí)行了公開(kāi)賬號(hào)IP屬地這項(xiàng)功能,這對(duì)產(chǎn)品設(shè)計(jì)工作會(huì)有怎樣的影響,在這里一站式分享與你。
關(guān)于IP屬地展示,最早提出是為了網(wǎng)絡(luò)言論的實(shí)名化,即通過(guò)展示言論屬地IP來(lái)對(duì)不良網(wǎng)絡(luò)言論行為進(jìn)行威懾,達(dá)到清朗網(wǎng)絡(luò)環(huán)境的目的。
所以國(guó)家互聯(lián)網(wǎng)信息辦公室在2010年10月提出《互聯(lián)網(wǎng)用戶賬號(hào)名稱信息管理規(guī)定(征求意見(jiàn)稿)》,其中十二條明確規(guī)定:
“互聯(lián)網(wǎng)用戶賬號(hào)服務(wù)平臺(tái)應(yīng)當(dāng)以顯著方式,在互聯(lián)網(wǎng)用戶賬號(hào)信息頁(yè)面展示賬號(hào)IP地址屬地信息。境內(nèi)互聯(lián)網(wǎng)用戶賬號(hào)IP地址屬地信息需標(biāo)注到?。▍^(qū)、市),境外賬號(hào)IP地址屬地信息需標(biāo)注到國(guó)家(地區(qū))?!?/p>
但這里需要注意,這是一個(gè)征求意見(jiàn)稿,所以并不是本次執(zhí)行的法規(guī)依據(jù)。
通俗地講就是問(wèn)問(wèn)大家意見(jiàn),這樣規(guī)定行不行,如果覺(jué)得不行那再修改修改。
雖然不是執(zhí)行文件,但是也表達(dá)了國(guó)家對(duì)IP展示方案的意向。
而此次各大平臺(tái)突然開(kāi)發(fā)展示賬戶IP屬地的真正原因是今年4月中央網(wǎng)信辦開(kāi)展的“清朗·網(wǎng)絡(luò)暴力專項(xiàng)治理行動(dòng)”
總而言之,目前并未有強(qiáng)制的法規(guī)要求平臺(tái)系統(tǒng)對(duì)賬號(hào)做地域展示,目前的展示主要也是用于響應(yīng)國(guó)家關(guān)于網(wǎng)絡(luò)環(huán)境的相關(guān)號(hào)召,或者是一種試運(yùn)行狀態(tài)。
既然沒(méi)有要求,那知道這些對(duì)我們是否還有意義?
既然主流的內(nèi)容平臺(tái)都已經(jīng)上線此功能,那么在各種需求會(huì)議上和日常工作交流中就有可能會(huì)被不經(jīng)意地提及。
雖然不是復(fù)雜的需求,但也是需求,是需求就需要處理。
而全面了解此功能的背景與現(xiàn)狀是我們從容應(yīng)對(duì)需求的基礎(chǔ),同時(shí)也能表現(xiàn)自己的產(chǎn)品全面性與專業(yè)性,因?yàn)楣δ苄。匀菀滓驍U(kuò)展的回答制造驚喜。
不知道大家是否有這樣的經(jīng)歷,在規(guī)劃產(chǎn)品或者項(xiàng)目的時(shí)候,難免會(huì)遇到一道填空題,一道關(guān)于風(fēng)險(xiǎn)的填空題。
填的太真實(shí),影響項(xiàng)目立項(xiàng)或者推進(jìn),填的太敷衍,容易被diss說(shuō)沒(méi)經(jīng)驗(yàn);假如選擇抄取前輩的“答案”,又擔(dān)心前輩變成評(píng)審會(huì)的參與方。
而現(xiàn)在就有一個(gè)現(xiàn)成的答案,既能政治正確又沒(méi)啥成本。
說(shuō)到成本,我想為了各項(xiàng)合規(guī)而開(kāi)發(fā)的功能中,展示IP是相對(duì)成本小的一個(gè)功能,甚至大部分系統(tǒng)的會(huì)員數(shù)據(jù)里面本來(lái)就擁有IP數(shù)據(jù),甚至還有定位數(shù)據(jù),而且還不用改變業(yè)務(wù)流程。
小成本功能是能很好地增加產(chǎn)品的靈活性。
關(guān)于網(wǎng)絡(luò)環(huán)境治理,只會(huì)越來(lái)越規(guī)范。
關(guān)于IP屬地展示規(guī)定的試水,目前的主流觀點(diǎn)是持支持態(tài)度,所以大概率我們還是會(huì)迎來(lái)需要強(qiáng)制展示IP歸屬地的那一天,就像現(xiàn)在的域名備案一樣成為常態(tài)化硬性要求。
我整理了、知乎、貼吧、小紅書(shū)和快手的功能對(duì)比,總結(jié)下來(lái)主要是在三個(gè)位置做IP屬地的展示,分別是【作者主頁(yè)】、【文章頁(yè)】、【評(píng)論區(qū)】,詳細(xì)情況我已分別對(duì)上述各個(gè)平臺(tái)做了截圖介紹。
同樣是展示功能,各個(gè)平臺(tái)對(duì)于展示這件事的解釋有各自的理解:
IP屬地展示的數(shù)據(jù)源是來(lái)自于系統(tǒng)對(duì)用戶發(fā)生行為的時(shí)候獲取的IP地址數(shù)據(jù)進(jìn)行展示,所以主要分為兩種:
(1)博主IP
博主IP位置數(shù)據(jù):根據(jù)賬號(hào)注冊(cè)時(shí)的IP屬地進(jìn)行存儲(chǔ)展示,即在博主注冊(cè)但未發(fā)表作品的狀態(tài)下展示對(duì)應(yīng)的IP位置,后期根據(jù)發(fā)布作品時(shí)的IP位置做對(duì)應(yīng)的統(tǒng)計(jì)得出博主IP位置。主要參考的邏輯是在設(shè)定的時(shí)間段內(nèi)作品發(fā)布時(shí)的IP統(tǒng)計(jì)和注冊(cè)IP屬地加權(quán)計(jì)算取值。
(2)作品和評(píng)論IP
用戶作品和評(píng)論的IP來(lái)源則是根據(jù)發(fā)布時(shí)的實(shí)際IP地址歸屬獲取并展示。
(1)博主IP
關(guān)于博主IP,目前看下來(lái)大家主要是以完成功能為主,但是值得參考的是快手的實(shí)踐。
快手將用戶自己設(shè)置的地址與IP地址結(jié)合,在主頁(yè)面是展示省份+城市。
但是這個(gè)數(shù)據(jù)其實(shí)是博主自己設(shè)置的數(shù)據(jù),點(diǎn)擊進(jìn)去則會(huì)展示IP地址與博主自己設(shè)置的地址。
正常情況下用戶查看時(shí)兩個(gè)數(shù)據(jù)是對(duì)應(yīng)的,如果有不誠(chéng)實(shí)的情況,則也暴露的很明顯。而且其他的平臺(tái)主要還是在博主信息區(qū)對(duì)地址做展示。
(2)作品IP
目前看到的所有的作品詳情頁(yè)關(guān)于IP地址的展示都是不明顯的,但是這很合理,因?yàn)橛脩暨M(jìn)來(lái)看的是內(nèi)容又不是定位信息。
對(duì)于文章類的就兩個(gè)思路,一種是在文章頭部展示,另一種是在文章尾部做展示,基本做到頁(yè)面和諧即可。
(3)評(píng)論IP
關(guān)于評(píng)論IP屬地的展示,各個(gè)平臺(tái)的展示思路高度一致,在原來(lái)頁(yè)面展示評(píng)論時(shí)間的后面直接追加對(duì)應(yīng)的IP屬地,省力又和諧。
IP屬地的展示深度只能到省份級(jí)別,直轄市則展示城市名。
用戶解釋文案:
截止至我發(fā)文的時(shí)間,IP屬地展示功能了解即可,如果未來(lái)剛好遇到的真的要上這個(gè)功能,那希望也能為你提供一點(diǎn)點(diǎn)幫助。
參考資料:
1、中央網(wǎng)信辦:http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html
2、國(guó)家互聯(lián)網(wǎng)信息辦公室官網(wǎng):http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html
本文由 @瑞見(jiàn)釘錘 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。