继续创造，加速成长！这是我参加「日新方案 10 月更文挑战」的第6天，点击查看活动详情

背景

近大半年发现很多的运用, 不限于(微博，抖音，知乎、yuque、字节、微信等）都开放了 显现 IP 属地的显现，这个功用挺风趣，一起我也考虑了一下，想在自己的项目中运用，现在就写下这篇文章谈谈让我做的实现思路和主意；

话说什么时候出这个功用？

作为前端仔，先给设计一波.

全网都在搞的谈论区、主页等显现IP地址功用

实现

就两个问题, 获取ip, 再拿ip地址换地舆位置信息(省市区)

下面咱们以Node.js为比如

获取IP地址

从 Http header 中能够获取到客户端在恳求头中带着的IP地址

头部名词的解说

  • X-Forwarded-For：Web 服务器获取拜访用户的真实 IP 地址，若存在署理，最左边是最原始客户端的 IP 地址；

在node.js中

koa为比如

在中间件函数中, 获取header里的x-forwarded-for子段

export default (ctx, next) => {
  const {
    method, body, query, header: { 'x-forwarded-for': ip },
  } = ctx.request;
  console.log(ip, 'ip地址’)
}

nginx的装备

假如你运用的nginx署理你的服务, 其实上面node里获取的真实ip那个子段, 依赖于nginx的转发。便是这行。 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

子段释义

$proxy_add_x_forwarded_for 记录真实的客户端IP地址，但是服务器中的日志需要有这个变量。

参考链接 nginx官方文档 nginx.org/en/docs/htt…

nginx装备转发伪代码

server {
      listen 80;
           ...
              location  /api/ { 
              ...
              // 署理真实IP
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              ...
              proxy_set_header Connection "upgrade";
              proxy_pass http://127.0.0.1:8001/;
              proxy_redirect off;
        }
}

ip地址换地舆位置

注册高德地图开放渠道, 进入控制台

lbs.amap.com/

创建一个运用

全网都在搞的谈论区、主页等显现IP地址功用

在运用 创建一个apikey

全网都在搞的谈论区、主页等显现IP地址功用
apikey创建好了
全网都在搞的谈论区、主页等显现IP地址功用

运用IP定位API

文档链接 lbs.amap.com/api/webserv…

如下, 传你的apiKey和ip地址即可交换省市区及经纬度

https://restapi.amap.com/v3/ip?key=XXX&ip=你的ip地址

回来示例

{
    "status": "1", // 1为成功
    "info": "OK",
    "infocode": "10000",
    "province": "浙江省",
    "city": "杭州市",
    "adcode": "330100",
    "rectangle": "119.8824799,29.95931271;120.5552208,30.52048536"
}

node中运用

koa中间件中运用

const fetch = require('node-fetch');
export default async(ctx, next) => {
  const {
    method, body, query, header: { 'x-forwarded-for': ip },
  } = ctx.request;
  const info = await getLocation(ip);
  console.log(info, '省市信息’)
    // {
    //   "status": "1",
    //     "info": "OK",
    //     "infocode": "10000",
    //     "province": "浙江省",
    //     "city": "杭州市",
    //     "adcode": "330100",
    //     "rectangle": "119.8824799,29.95931271;120.5552208,30.52048536"
    // }
  await next()
}
/*
 * ip获取省市信息
 * @param {} $ip
 * @returns 省市信息
 */
async function getLocation($ip) {
  // 处理一下ip
  const ip = $ip.replace(/::ffff:/g, '').split(',')[0];
  // 调用高德地图的
  const ipResult = await fetch(`https://restapi.amap.com/v3/ip?key=310d88b1f76599ee6a4b0bd50ba6bbd8&ip=${ip}`).then((res) => res.json()).catch(() => { });
  if (data && data.status === '1') {
      return ipResult;
  }
  return null;
}

其他ip交换地舆信息办法

github发现一个离线的解析ip的库

Ip2region

ip2region v2.0 – 是一个离线IP地址定位库和IP定位数据管理结构，10微秒级别的查询功率，提供了很多干流编程语言的xdb数据生成和查询客户端实现。 github链接 (github.com/lionsoul201…) github.com/lionsoul201…

存储办法 & 事务剖析

存储办法

1、存Redis

每次获取ip先从redis里找， 没有再去查询第三方API

2、 搞个ip和地舆信息对应表

每次获取ip先从对应表， 没有再去查询第三方API

事务功用剖析

谈论里的IP信息

例如谈论这种功用 , ip和谈论绑定，是快照存(后续变动了不影响之前的谈论)。

  • 这种每次从ip和地舆信息对应表 查也能够。
  • 假如 要求不高, 不考虑后续扩展, 直接加个子段 把地舆信息冗余到事务表里吧。

主页的IP信息

主页的位置信息要实时变的。

加个中间件 每次都去获取当前ip 判别地址变没变？

按必定战略, 在某个接口 加个异步办法,低频率判别。

比如在主页的某个接口，加一个办法，异步判别, 变化了，就更新到用户表。

总结两步

1、异步判别ip地址变化。

2、异步更新到用户表。

结束

是个风趣的功用，快去加到你的项目里吧‍♂️‍♀ developer!

希望也快点出这个功用, 掘友们@产品经理