Bagaimana untuk mendapatkan alamat IP asli vue

Vue.js ialah rangka kerja pembangunan bahagian hadapan yang popular yang membantu pembangun membina antara muka pengguna yang dinamik dan cekap. Dalam banyak projek Vue.js, kami perlu mendapatkan alamat IP tempatan untuk mengenal pasti peranti dan untuk penyahpepijatan dan ujian rangkaian. Seterusnya, kami akan membincangkan cara mendapatkan alamat IP tempatan dalam Vue.js.

1. Dapatkan alamat IP tempatan melalui JavaScript asli

Vue.js dibina di atas JavaScript asli, jadi kami boleh mendapatkan alamat IP tempatan dengan menggunakan JavaScript asli dan Digunakan dalam Vue.js. Berikut ialah contoh kod untuk mendapatkan alamat IP tempatan melalui JavaScript asli:

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;
    }
  };
}

Kod ini menggunakan objek RTCPeerConnection untuk mendapatkan alamat IP tempatan dan mengembalikannya selepas mendapat alamat IP melalui acara onicecandidate.

Untuk menggunakan kod ini dalam Vue.js, kami boleh membungkusnya dalam pemalam Vue dan menambahkannya pada contoh Vue.

2. Gunakan perpustakaan pihak ketiga untuk mendapatkan alamat IP setempat

Selain JavaScript asli, kami juga boleh menggunakan perpustakaan pihak ketiga untuk mendapatkan IP setempat alamat. Antaranya, salah satu perpustakaan yang paling biasa digunakan ialah ipaddr.js. ipaddr.js ialah perpustakaan JavaScript tulen yang boleh digunakan untuk menghuraikan dan memformat alamat IP. Berikut ialah contoh kod cara menggunakan ipaddr.js untuk mendapatkan alamat IP daripada rangkaian tempatan:

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)
  })
}

Dalam kod ini, kami menggunakan perpustakaan ipaddr.js untuk menghuraikan alamat IP yang diterima daripada objek RTC dan tambahkannya ke dalam tatasusunan. Kami juga menggunakan Janji untuk mengembalikan tatasusunan ini untuk penggunaan yang lebih mudah dalam Vue.js.

Ringkasan

Dapatkan alamat IP setempat dalam Vue.js, anda boleh menggunakan JavaScript asli atau perpustakaan pihak ketiga. Mana-mana kaedah yang anda pilih, anda perlu membungkusnya dalam Vue.js dan menambahkannya pada tika Vue anda supaya anda boleh mendapatkan alamat IP tempatan dengan mudah dalam projek anda.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan alamat IP asli vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!