Update web-socket.html

web-socket.html

@@ -4,14 +4,14 @@
   <meta charset="UTF-8" />
   <title>管理ページ（IP・接続時間表示 + 地図表示）</title>
   <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
-  <script src="https://soiz1-eruda3.hf.space/eruda.js"></script>
-  <script>eruda.init();</script>
   <link
     rel="stylesheet"
     href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    crossorigin=""
   />
   <script
     src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    crossorigin=""
   ></script>
   <style>
     #map {
@@ -66,7 +66,6 @@
     const userCountElem = document.getElementById("userCount");
     const tbody = document.getElementById("userTableBody");
 
-    // Leafletマップ初期化（東京近辺）
     const map = L.map('map').setView([35.681236, 139.767125], 5);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 18,
@@ -75,15 +74,27 @@
 
     let markers = {};
 
-    // --- 簡易テスト用IP座標返し関数 ---
     async function fetchGeo(ip) {
-      const knownIPs = {
-        "8.8.8.8": {lat: 37.386, lon: -122.0838},  // Google DNS
-        "1.1.1.1": {lat: -33.4940, lon: 143.2104}  // Cloudflare DNS
-      };
-      return knownIPs[ip] || null;
+      try {
+        const response = await fetch("https://soiz1-ip-address-api.hf.space/ip", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ip: ip })
+        });
+        if (!response.ok) {
+          console.error("APIエラー:", response.status);
+          return null;
+        }
+        const data = await response.json();
+        if (data && data.location && typeof data.location.latitude === "number" && typeof data.location.longitude === "number") {
+          return { lat: data.location.latitude, lon: data.location.longitude };
+        }
+        return null;
+      } catch (error) {
+        console.error("fetchGeo失敗:", error);
+        return null;
+      }
     }
-    // ----------------------------------
 
     function createCircleMarker(lat, lon, color, popupText) {
       return L.circleMarker([lat, lon], {
@@ -105,13 +116,11 @@
 
       tbody.innerHTML = "";
 
-      // 既存マーカーを削除
-      for(let key in markers) {
+      for (let key in markers) {
         map.removeLayer(markers[key]);
       }
       markers = {};
 
-      // IPごとの位置情報を取得
       const positions = {};
       await Promise.all(Object.entries(userSessions).map(async ([socketId, info]) => {
         positions[socketId] = await fetchGeo(info.ip);
@@ -127,7 +136,7 @@
           const prevValue = previousSessions[socketId] ? previousSessions[socketId][elementKey] : undefined;
           const currValue = info[elementKey];
 
-          let changed = prevValue !== currValue;
+          const changed = prevValue !== currValue;
 
           if (changed) {
             td.classList.add("highlight");
@@ -137,7 +146,7 @@
           return td;
         }
 
-        tr.appendChild(createTd(socketId, "socketId")); 
+        tr.appendChild(createTd(socketId, "socketId"));
         tr.appendChild(createTd(info.ip || "-", "ip"));
         tr.appendChild(createTd(info.connectTime ? new Date(info.connectTime).toLocaleString() : "-", "connectTime"));
         tr.appendChild(createTd(info.disconnectTime ? new Date(info.disconnectTime).toLocaleString() : "-", "disconnectTime"));
@@ -145,10 +154,10 @@
         tbody.appendChild(tr);
 
         const pos = positions[socketId];
-        if(pos) {
+        if (pos) {
           const prevPos = previousSessions[socketId]?.geoPosition;
           let changedPos = true;
-          if(prevPos && Math.abs(prevPos.lat - pos.lat) < 0.0001 && Math.abs(prevPos.lon - pos.lon) < 0.0001) {
+          if (prevPos && Math.abs(prevPos.lat - pos.lat) < 0.0001 && Math.abs(prevPos.lon - pos.lon) < 0.0001) {
             changedPos = false;
           }
           const color = changedPos ? 'red' : 'black';
@@ -159,42 +168,23 @@
         }
       }
 
-      // マーカー全体を囲んで地図を移動
       const markerPositions = Object.values(markers).map(m => m.getLatLng());
-      if(markerPositions.length > 0) {
+      if (markerPositions.length > 0) {
         const group = L.featureGroup(Object.values(markers));
         map.fitBounds(group.getBounds().pad(0.5));
       }
 
-      // localStorageに保存
       const sessionsToStore = {};
-      for(const [socketId, info] of Object.entries(userSessions)) {
+      for (const [socketId, info] of Object.entries(userSessions)) {
         sessionsToStore[socketId] = {
           ...info,
           geoPosition: positions[socketId] || null
         };
       }
-
       localStorage.setItem(STORAGE_KEY, JSON.stringify(sessionsToStore));
       previousSessions = sessionsToStore;
     });
 
-    // テスト用に手動発火
-    window.addEventListener("load", () => {
-      const testData = {
-        "test-socket-1": {
-          ip: "8.8.8.8",
-          connectTime: Date.now(),
-          disconnectTime: null
-        },
-        "test-socket-2": {
-          ip: "1.1.1.1",
-          connectTime: Date.now(),
-          disconnectTime: null
-        }
-      };
-      socket.emit("userSessionsUpdate", testData);
-    });
   </script>
 </body>
 </html>