Refactor IP display logic in ShowIpTest component
Simplifies the Livewire component by removing public and local IP properties and related listeners. Updates the Blade view to fetch and display the user's public IP using ipify API, removing previous local IP detection logic.
This commit is contained in:
@@ -7,20 +7,7 @@ use Illuminate\Support\Facades\Request;
|
|||||||
|
|
||||||
class ShowIpTest extends Component
|
class ShowIpTest extends Component
|
||||||
{
|
{
|
||||||
public $public_ip;
|
public string $ipId = '';
|
||||||
public $local_ip;
|
|
||||||
|
|
||||||
protected $listeners = ['setLocalIP' => 'setLocalIP'];
|
|
||||||
|
|
||||||
public function mount()
|
|
||||||
{
|
|
||||||
$this->public_ip = Request::ip();
|
|
||||||
}
|
|
||||||
|
|
||||||
public function setLocalIP($data)
|
|
||||||
{
|
|
||||||
$this->local_ip = $data['ip'];
|
|
||||||
}
|
|
||||||
|
|
||||||
public function render()
|
public function render()
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,33 +1,8 @@
|
|||||||
<div x-data>
|
<div x-data>
|
||||||
<div class="p-6 bg-white shadow rounded">
|
<div x-data="{ ipId: @entangle('ipId').live }" x-init="fetch('https://api.ipify.org/?format=json').then(res => res.json()).then(data => ipId = data.ip);">
|
||||||
<h2 class="text-xl font-bold mb-4">IPs del Usuario</h2>
|
<!-- Puedes mostrarla si quieres -->
|
||||||
|
<p class="">Tu IP es: <span x-text="ipId"></span></p>
|
||||||
<div class="space-y-2">
|
|
||||||
<p><strong>IP pública (Laravel):</strong> {{ $public_ip }}</p>
|
|
||||||
<p><strong>IP local (JavaScript):</strong> {{ $local_ip ?? 'Detectando...' }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript" src="https://api.ipify.org/?format=jsonp&callback=get_ip"></script>
|
||||||
async function getLocalIP(callback) {
|
|
||||||
const pc = new RTCPeerConnection({ iceServers: [] });
|
|
||||||
pc.createDataChannel('');
|
|
||||||
pc.createOffer().then(offer => pc.setLocalDescription(offer));
|
|
||||||
pc.onicecandidate = event => {
|
|
||||||
if (!event || !event.candidate) return;
|
|
||||||
const candidate = event.candidate.candidate;
|
|
||||||
const ipMatch = candidate.match(/([0-9]{1,3}(\.[0-9]{1,3}){3})/);
|
|
||||||
if (ipMatch) {
|
|
||||||
callback(ipMatch[1]);
|
|
||||||
pc.close();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('livewire:load', () => {
|
|
||||||
getLocalIP(ip => {
|
|
||||||
window.Livewire.dispatch('setLocalIP', { ip });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user