Vue의 기본 IP 주소를 얻는 방법

Vue.js는 개발자가 동적이고 효율적인 사용자 인터페이스를 구축하는 데 도움이 되는 인기 있는 프런트 엔드 개발 프레임워크입니다. 많은 Vue.js 프로젝트에서는 장치를 식별하고 네트워크 디버깅 및 테스트를 위해 로컬 IP 주소를 얻어야 합니다. 다음으로 Vue.js에서 로컬 IP 주소를 얻는 방법을 다루겠습니다.

1. 네이티브 JavaScript를 통해 로컬 IP 주소 가져오기

Vue.js는 네이티브 JavaScript 위에 구축되었으므로 네이티브 JavaScript를 사용하여 로컬 IP 주소를 가져와 Vue.js에서 사용할 수 있습니다. 다음은 네이티브 JavaScript를 통해 로컬 IP 주소를 얻는 코드 예제입니다.

function getLocalIpAddress() {
  window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  var pc = new RTCPeerConnection({iceServers: []}), noop = function() {};
  pc.createDataChannel("");
  pc.createOffer(pc.setLocalDescription.bind(pc), noop);
  pc.onicecandidate = function(ice) {
    if (ice && ice.candidate && ice.candidate.candidate) {
      var s = ice.candidate.candidate.split('
')[0].split(' ')[4];
      return s;
    }
  };
}

이 코드는 RTCPeerConnection 개체를 사용하여 로컬 IP 주소를 얻고 onicecandidate 이벤트를 통해 IP 주소를 얻은 후 반환합니다.

Vue.js에서 이 코드를 사용하려면 Vue 플러그인으로 래핑하고 Vue 인스턴스에 추가하면 됩니다.

2. 타사 라이브러리를 사용하여 로컬 IP 주소 얻기

기본 JavaScript 외에도 타사 라이브러리를 사용하여 로컬 IP 주소를 얻을 수도 있습니다. 그 중 가장 많이 사용되는 라이브러리 중 하나가 ipaddr.js입니다. ipaddr.js는 IP 주소를 구문 분석하고 형식을 지정하는 데 사용할 수 있는 순수 JavaScript 라이브러리입니다. 다음은 ipaddr.js를 사용하여 로컬 네트워크에서 IP 주소를 얻는 방법에 대한 코드 예제입니다. ipaddr.js。 ipaddr.js 是一个纯 JavaScript 库，可以用于解析和格式化 IP 地址。下面是如何使用 ipaddr.js 从本地网络中获取 IP 地址的代码示例：

import ipaddr from 'ipaddr.js';

const findLocalIpAddress = () => {
  return new Promise((resolve, reject) => {
    const RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    let pc = new RTCPeerConnection({iceServers: []})
    let ips = []
    pc.createDataChannel('')
    pc.createOffer().then(offer => pc.setLocalDescription(offer)).catch(e => console.log(e))
    pc.onicecandidate = event => {
      if (!event.candidate) {
        // all candidates have been sent
        resolve(ips)
      } else {
        const ip = ipaddr.parse(event.candidate.candidate.split(" ")[4]).toString()
        if (ips.indexOf(ip) == -1) {
          ips.push(ip)
        }
      }
    }
    setTimeout(() => {
      reject(new Error('Timeout'))
    }, 5000)
  })
}

这段代码中，我们使用 ipaddr.jsrrreee

이 코드에서는 ipaddr.js를 사용합니다. IP 주소가 수신되어 배열에 추가되는 RTC 개체를 구문 분석하는 라이브러리입니다. 또한 Vue.js에서 더 쉽게 사용할 수 있도록 Promise를 사용하여 이 배열을 반환합니다.

요약

Vue.js에서 로컬 IP 주소를 가져오면 기본 JavaScript 또는 타사 라이브러리를 사용할 수 있습니다. 어떤 방법을 선택하든 Vue.js로 래핑하고 Vue 인스턴스에 추가해야 프로젝트에서 로컬 IP 주소를 쉽게 얻을 수 있습니다. 🎜

위 내용은 Vue의 기본 IP 주소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!