Electron 开发:获取当前客户端 IP

Electron 开发:获取当前客户端 IP

一、背景与需求

1. 项目背景

客户端会自启动一个服务,Web/后端服务通过 IP + port 请求以操作客户端接口

2. 初始方案与问题

2.1. 初始方案:通过代码获取本机 IP

typescript 复制代码
/**
 * 获取局域网 IP
 * @returns {string} 局域网 IP
 */
export function getLocalIP(): string {
  const interfaces = os.networkInterfaces()
  for (const name of Object.keys(interfaces)) {
    for (const iface of interfaces[name] || []) {
      if (iface.family === 'IPv4' && !iface.internal) {
        log.info('获取局域网 IP:', iface.address)
        return iface.address
      }
    }
  }
  log.warn('无法获取局域网 IP,使用默认 IP: 127.0.0.1')
  return '127.0.0.1'
}

2.2. 遇到的问题

如果设备开启了代理,可能获取的是代理 IP,导致后端请求失败

二、解决方案设计

1. 总体思路

  • 获取本机所有 IP
  • 遍历 IP + port 请求客户端服务接口
  • 成功响应即为目标 IP
  • 缓存有效 IP,避免频繁请求

2. 获取所有可能的 IP

使用 Node.js 的 os.networkInterfaces() 获取所有可用 IP

typescript 复制代码
private getAllPossibleIPs(): string[] {
  const interfaces = os.networkInterfaces()
  const result: string[] = []

  for (const name of Object.keys(interfaces)) {
    const lowerName = name.toLowerCase()
    if (lowerName.includes('vmware')
      || lowerName.includes('virtual')
      || lowerName.includes('vpn')
      || lowerName.includes('docker')
      || lowerName.includes('vethernet')) {
      continue
    }

    for (const iface of interfaces[name] || []) {
      if (iface.family === 'IPv4' && !iface.internal) {
        result.push(iface.address)
      }
    }
  }

  return result
}

3. 遍历 IP 请求验证

轮询所有 IP,尝试访问客户端服务,验证是否可用

typescript 复制代码
private async testIPsParallel(ips: string[]): Promise<string | null> {
  if (ips.length === 0)
    return null
  return new Promise((resolve) => {
    const globalTimeout = setTimeout(() => {
      resolve(null)
    }, this.TIMEOUT * 1.5)

    const controllers = ips.map(() => new AbortController())
    let hasResolved = false
    let completedCount = 0

    const testIP = (ip: string, index: number) => {
      const controller = controllers[index]
      axios.get(`http://${ip}:${PORT}/api/task-server/ip`, {
        timeout: this.TIMEOUT,
        signal: controller.signal,
      })
        .then(() => {
          if (!hasResolved) {
            hasResolved = true
            clearTimeout(globalTimeout)
            controllers.forEach((c, i) => {
              if (i !== index)
                c.abort()
            })
            resolve(ip)
          }
        })
        .catch(() => {
          if (!hasResolved) {
            completedCount++
            if (completedCount >= ips.length) {
              clearTimeout(globalTimeout)
              resolve(null)
            }
          }
        })
    }
    ips.forEach(testIP)
  })
}

4. 添加缓存策略

对成功的 IP 进行缓存,设定缓存有效时间,避免重复请求

typescript 复制代码
private cachedValidIP: string | null = null
private lastValidationTime = 0
private readonly CACHE_VALID_DURATION = 24 * 60 * 60 * 1000

三、完整代码

typescript 复制代码
import os from 'node:os'
import axios from 'axios'
import { PORT } from '../../enum/env'

/**
 * IP管理器单例类
 * 用于获取并缓存本地有效IP地址
 */
export class IPManager {
  private static instance: IPManager
  private cachedValidIP: string | null = null
  private lastValidationTime = 0
  private readonly CACHE_VALID_DURATION = 24 * 60 * 60 * 1000
  private readonly TIMEOUT = 200
  private isTestingIPs = false

  private constructor() {}

  static getInstance(): IPManager {
    if (!IPManager.instance) {
      IPManager.instance = new IPManager()
    }
    return IPManager.instance
  }

  async getLocalIP(): Promise<string> {
    const now = Date.now()
    if (this.cachedValidIP && now - this.lastValidationTime < this.CACHE_VALID_DURATION) {
      console.log('从缓存中获取 IP', this.cachedValidIP)
      return this.cachedValidIP
    }

    if (this.isTestingIPs) {
      const allIPs = this.getAllPossibleIPs()
      return allIPs.length > 0 ? allIPs[0] : '127.0.0.1'
    }
    this.isTestingIPs = true

    try {
      const allIPs = this.getAllPossibleIPs()
      if (allIPs.length === 0) {
        return '127.0.0.1'
      }

      const validIP = await this.testIPsParallel(allIPs)
      if (validIP) {
        this.cachedValidIP = validIP
        this.lastValidationTime = now
        return validIP
      }
      return allIPs[0]
    }
    catch (error) {
      const allIPs = this.getAllPossibleIPs()
      return allIPs.length > 0 ? allIPs[0] : '127.0.0.1'
    }
    finally {
      this.isTestingIPs = false
    }
  }

  private getAllPossibleIPs(): string[] {
    const interfaces = os.networkInterfaces()
    const result: string[] = []

    for (const name of Object.keys(interfaces)) {
      const lowerName = name.toLowerCase()
      if (lowerName.includes('vmware')
        || lowerName.includes('virtual')
        || lowerName.includes('vpn')
        || lowerName.includes('docker')
        || lowerName.includes('vethernet')) {
        continue
      }

      for (const iface of interfaces[name] || []) {
        if (iface.family === 'IPv4' && !iface.internal) {
          result.push(iface.address)
        }
      }
    }

    return result
  }

  private async testIPsParallel(ips: string[]): Promise<string | null> {
    if (ips.length === 0)
      return null
    return new Promise((resolve) => {
      const globalTimeout = setTimeout(() => {
        resolve(null)
      }, this.TIMEOUT * 1.5)

      const controllers = ips.map(() => new AbortController())
      let hasResolved = false
      let completedCount = 0

      const testIP = (ip: string, index: number) => {
        const controller = controllers[index]
        axios.get(`http://${ip}:${PORT}/api/task-server/ip`, {
          timeout: this.TIMEOUT,
          signal: controller.signal,
          // validateStatus: status => status === 200,
        })
          .then(() => {
            if (!hasResolved) {
              hasResolved = true
              clearTimeout(globalTimeout)
              controllers.forEach((c, i) => {
                if (i !== index)
                  c.abort()
              })
              resolve(ip)
            }
          })
          .catch(() => {
            if (!hasResolved) {
              completedCount++
              if (completedCount >= ips.length) {
                clearTimeout(globalTimeout)
                resolve(null)
              }
            }
          })
      }
      ips.forEach(testIP)
    })
  }
}

/**
 * 获取本地有效IP地址
 */
export async function getLocalIP(): Promise<string> {
  return IPManager.getInstance().getLocalIP()
}
相关推荐
Enti7c3 分钟前
JavaScript 实现输入框的撤销功能
开发语言·javascript·ecmascript
每次的天空37 分钟前
Android学习总结之GetX库篇(场景运用)
android·javascript·学习
卡戎-caryon39 分钟前
【项目实践】boost 搜索引擎
linux·前端·网络·搜索引擎·boost·jieba·cpp-http
别催小唐敲代码2 小时前
解决跨域的4种方法
java·服务器·前端·json
溪饱鱼2 小时前
Nuxt3还能用吗?
前端·个人开发·seo
丨丨三戒丶3 小时前
layui轮播图根据设备宽度图片等比例,高度自适应
前端·javascript·layui
进取星辰3 小时前
20、数据可视化:魔镜报表——React 19 图表集成
前端·react.js·信息可视化
寧笙(Lycode)4 小时前
React实现B站评论Demo
前端·react.js·前端框架
24白菜头4 小时前
CSS学习笔记
前端·javascript·css·笔记·学习
蠢货爱好者4 小时前
Linux中web服务器的部署及优化
linux·服务器·前端