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 アドレスを取得することもできます。住所。その中でも、最もよく使用されるライブラリの 1 つは ipaddr.js です。 ipaddr.js は、IP アドレスの解析とフォーマットに使用できる純粋な JavaScript ライブラリです。以下は、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.js# を使用します。 ## IP アドレスを解析するためのライブラリ RTC オブジェクトは IP アドレスを受け取り、それを配列に追加します。また、Vue.js で使いやすくするために、Promise を使用してこの配列を返します。

概要

Vue.js でローカル IP アドレスを取得するには、ネイティブ JavaScript またはサードパーティ ライブラリを使用できます。どちらの方法を選択する場合でも、プロジェクト内のローカル IP アドレスを簡単に取得できるように、それらを Vue.js でラップして Vue インスタンスに追加する必要があります。

以上がvueのネイティブIPアドレスを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。