Comment obtenir l'adresse IP native de vue

Vue.js est un framework de développement front-end populaire qui aide les développeurs à créer des interfaces utilisateur dynamiques et efficaces. Dans de nombreux projets Vue.js, nous devons obtenir l'adresse IP locale pour identifier l'appareil et pour le débogage et les tests du réseau. Nous verrons ensuite comment obtenir l'adresse IP locale dans Vue.js.

1. Obtenir une adresse IP locale via JavaScript natif

Vue.js est construit sur JavaScript natif, nous pouvons donc utiliser JavaScript natif. JavaScript obtient l'adresse IP locale et l'utilise dans Vue.js. Voici un exemple de code pour obtenir l'adresse IP locale via JavaScript natif :

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

Ce code utilise l'objet RTCPeerConnection pour obtenir l'adresse IP locale et la renvoie après avoir obtenu l'adresse IP via l'événement onicecandidate.

Pour utiliser ce code dans Vue.js, nous pouvons l'envelopper dans un plugin Vue puis l'ajouter à l'instance Vue.

2. Utiliser une bibliothèque tierce pour obtenir l'adresse IP locale

En plus du JavaScript natif, nous pouvons également utiliser un tiers bibliothèque pour obtenir l’adresse IP locale. Parmi elles, l'une des bibliothèques les plus couramment utilisées est ipaddr.js. ipaddr.js est une bibliothèque JavaScript pure qui peut être utilisée pour analyser et formater les adresses IP. Voici un exemple de code montrant comment utiliser ipaddr.js pour obtenir une adresse IP du réseau local : 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

Dans ce code, nous utilisons ipaddr. js La bibliothèque analyse l'adresse IP reçue de l'objet RTC et l'ajoute à un tableau. Nous utilisons également une promesse pour renvoyer ce tableau pour une utilisation plus facile dans Vue.js.

Summary

Obtenez l'adresse IP locale dans Vue.js, vous pouvez utiliser du JavaScript natif ou des bibliothèques tierces. Quelle que soit la méthode que vous choisissez, vous devrez les envelopper dans Vue.js et les ajouter à votre instance Vue afin de pouvoir obtenir facilement l'adresse IP locale de votre projet. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!