sing-song-player-3vx0f39v

Running

App Files Files Community

soiz1 commited on Jul 24

Commit

4bf0c24

1 Parent(s): b31641d

Update web-socket.html

Browse files

Files changed (1) hide show

web-socket.html +115 -124

web-socket.html CHANGED Viewed

@@ -2,27 +2,38 @@
 <html lang="ja">
 <head>
   <meta charset="UTF-8" />
-  <title>管理ページ（IP・接続時間表示・位置情報）</title>
   <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
-  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
   <style>
-    table { border-collapse: collapse; width: 100%; margin-top: 10px; }
     th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
     th { background-color: #eee; }
     .highlight {
       background-color: #f99;
       transition: background-color 1s ease;
     }
-    #map { height: 400px; margin-top: 20px; }
-    .marker-highlight {
-      filter: drop-shadow(0 0 5px red);
     }
   </style>
 </head>
 <body>
   <h1>現在の接続ユーザー数: <span id="userCount">0</span></h1>
   <table>
     <thead>
       <tr>
@@ -39,118 +50,54 @@
   <script>
     const socket = io("https://web-socket-server-14ap.onrender.com/");
     const STORAGE_KEY = "userSessions";
     let previousSessions = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
     const userCountElem = document.getElementById("userCount");
     const tbody = document.getElementById("userTableBody");
-    // Leaflet地図初期化
-    const map = L.map('map').setView([35.68, 139.76], 5); // 東京中心にズーム5
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '© OpenStreetMap contributors'
     }).addTo(map);
-    // IP => 緯度経度をキャッシュ（session中の重複問い合わせ防止）
-    const ipCache = {};
-    // マーカーを保存（socketId => marker）
-    const markers = {};
-    // IPから位置情報を取得する関数（非同期）
-    async function fetchLatLngFromIP(ip) {
-      if (!ip) return null;
-      if (ipCache[ip]) return ipCache[ip];
       try {
-        const res = await fetch(`https://ipapi.co/${ip}/json/`);
-        if (!res.ok) throw new Error('API error');
-        const data = await res.json();
-        if (data.latitude && data.longitude) {
-          ipCache[ip] = [data.latitude, data.longitude];
-          return ipCache[ip];
         }
-      } catch(e) {
-        console.warn("IP位置情報取得失敗:", ip, e);
       }
-      return null;
     }
-    // 表の行とマーカーを作る関数
-    async function createRowAndMarker(socketId, info) {
-      const tr = document.createElement("tr");
-      const ip = info.ip || "-";
-      // IP位置情報取得
-      const latlng = await fetchLatLngFromIP(ip);
-      // 位置情報変化判定
-      const prevInfo = previousSessions[socketId];
-      let locationChanged = false;
-      if (prevInfo) {
-        // 前回の位置と今回の位置が違ったらtrue
-        if (latlng && prevInfo.latitude && prevInfo.longitude) {
-          if (latlng[0] !== prevInfo.latitude || latlng[1] !== prevInfo.longitude) {
-            locationChanged = true;
-          }
-        } else if ((latlng && (!prevInfo.latitude || !prevInfo.longitude)) ||
-                   ((!latlng) && (prevInfo.latitude || prevInfo.longitude))) {
-          locationChanged = true;
-        }
-      } else if (latlng) {
-        locationChanged = true;
-      }
-      // td作成関数
-      function createTd(text) {
-        const td = document.createElement("td");
-        td.textContent = text;
-        return td;
-      }
-      tr.appendChild(createTd(socketId));
-      tr.appendChild(createTd(ip));
-      tr.appendChild(createTd(info.connectTime ? new Date(info.connectTime).toLocaleString() : "-"));
-      tr.appendChild(createTd(info.disconnectTime ? new Date(info.disconnectTime).toLocaleString() : "-"));
-      if (locationChanged) {
-        tr.classList.add("highlight");
-      }
-      tbody.appendChild(tr);
-      // マーカー作成または更新
-      if (latlng) {
-        if (markers[socketId]) {
-          // 既存マーカー更新
-          markers[socketId].setLatLng(latlng);
-          if (locationChanged) {
-            markers[socketId].getElement().classList.add("marker-highlight");
-            setTimeout(() => {
-              if(markers[socketId]?.getElement()) {
-                markers[socketId].getElement().classList.remove("marker-highlight");
-              }
-            }, 2000);
-          }
-        } else {
-          // 新規マーカー作成
-          const marker = L.marker(latlng).addTo(map).bindPopup(
-            `Socket ID: ${socketId}<br>IP: ${ip}`
-          );
-          markers[socketId] = marker;
-          if (locationChanged && marker.getElement()) {
-            marker.getElement().classList.add("marker-highlight");
-            setTimeout(() => {
-              if(marker.getElement()) {
-                marker.getElement().classList.remove("marker-highlight");
-              }
-            }, 2000);
-          }
-        }
-      }
-      // sessionに緯度経度を保存
-      info.latitude = latlng ? latlng[0] : null;
-      info.longitude = latlng ? latlng[1] : null;
     }
     socket.on("updateUserCount", (count) => {
@@ -159,38 +106,82 @@
     socket.on("userSessionsUpdate", async (userSessions) => {
       tbody.innerHTML = "";
-      // すべてのマーカーを一旦削除（更新用）
-      Object.values(markers).forEach(marker => map.removeLayer(marker));
-      for (const key in markers) {
-        delete markers[key];
       }
-      // IP位置取得を含むため、順次await
       for (const [socketId, info] of Object.entries(userSessions)) {
-        await createRowAndMarker(socketId, info);
       }
-      // 地図の表示範囲調整（全マーカーが見えるように）
-      const allLatLngs = Object.values(markers).map(m => m.getLatLng());
-      if (allLatLngs.length > 0) {
-        const bounds = L.latLngBounds(allLatLngs);
-        map.fitBounds(bounds, { padding: [50, 50] });
-      } else {
-        map.setView([35.68, 139.76], 5);
       }
-      // localStorageに保存（緯度経度も含む）
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(userSessions));
-      previousSessions = JSON.parse(JSON.stringify(userSessions));
     });
-    // 初回ロード時に前回のセッションを表示（あれば）
     if (Object.keys(previousSessions).length > 0) {
       socket.emit("userSessionsUpdate", previousSessions);
     }
-    // 初回の更新要求（手動更新なしのためここで1回だけ）
-    socket.emit("requestUserSessions");
   </script>
 </body>
 </html>

 <html lang="ja">
 <head>
   <meta charset="UTF-8" />
+  <title>管理ページ（IP・接続時間表示 + 地図表示）</title>
   <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha256-sA+e0L5rG3tXZm7sn+v3z4xn7As9H9i57VFlLx4Q3uU="
+    crossorigin=""
+  />
+  <script
+    src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha256-o2eScTq2gk1sCewkwKJmJY4W1EfA/HC2n20MRKdA5h0="
+    crossorigin=""
+  ></script>
   <style>
+    table { border-collapse: collapse; width: 100%; margin-bottom: 20px;}
     th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
     th { background-color: #eee; }
     .highlight {
       background-color: #f99;
       transition: background-color 1s ease;
     }
+    #map {
+      height: 400px;
+      width: 100%;
+      margin-top: 20px;
+      border: 1px solid #ccc;
     }
   </style>
 </head>
 <body>
   <h1>現在の接続ユーザー数: <span id="userCount">0</span></h1>
+  <div>更新はページ再読み込みで行います。</div>
   <table>
     <thead>
       <tr>
   <script>
     const socket = io("https://web-socket-server-14ap.onrender.com/");
     const STORAGE_KEY = "userSessions";
+    // 前回セッション情報
     let previousSessions = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
     const userCountElem = document.getElementById("userCount");
     const tbody = document.getElementById("userTableBody");
+    const mapDiv = document.getElementById("map");
+    // 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,
       attribution: '© OpenStreetMap contributors'
     }).addTo(map);
+    // マーカー管理用（socketId => marker）
+    let markers = {};
+    // IPアドレスから緯度経度を取得（ip-api.comを使用）
+    async function fetchGeo(ip) {
+      if(!ip || ip === "-") return null;
       try {
+        const response = await fetch(`https://ip-api.com/json/${ip}?fields=status,message,lat,lon`);
+        const data = await response.json();
+        if(data.status === "success") {
+          return { lat: data.lat, lon: data.lon };
+        } else {
+          console.warn(`IP位置情報取得失敗: ${ip} - ${data.message}`);
+          return null;
         }
+      } catch (e) {
+        console.error("IP位置情報取得エラー", e);
+        return null;
       }
     }
+    // マーカーの色を指定するためのCircleMarkerを作る関数
+    function createCircleMarker(lat, lon, color, popupText) {
+      return L.circleMarker([lat, lon], {
+        radius: 8,
+        fillColor: color,
+        color: '#000',
+        weight: 1,
+        opacity: 1,
+        fillOpacity: 0.8
+      }).bindPopup(popupText);
     }
     socket.on("updateUserCount", (count) => {
     socket.on("userSessionsUpdate", async (userSessions) => {
       tbody.innerHTML = "";
+      // まず、すべてのマーカーを地図から削除
+      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);
+      }));
       for (const [socketId, info] of Object.entries(userSessions)) {
+        const tr = document.createElement("tr");
+        function createTd(text, elementKey) {
+          const td = document.createElement("td");
+          td.textContent = text;
+          const prevValue = previousSessions[socketId] ? previousSessions[socketId][elementKey] : undefined;
+          const currValue = info[elementKey];
+          let changed = prevValue !== currValue;
+          if (changed) {
+            td.classList.add("highlight");
+            setTimeout(() => td.classList.remove("highlight"), 1000);
+          }
+          return td;
+        }
+        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"));
+        tbody.appendChild(tr);
+        // 位置情報が取得できた場合、マーカー表示
+        const pos = positions[socketId];
+        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) {
+            changedPos = false;
+          }
+          // 色を決定：変化あれば赤丸、なければ黒丸
+          const color = changedPos ? 'red' : 'black';
+          const marker = createCircleMarker(pos.lat, pos.lon, color, `SocketID: ${socketId}<br>IP: ${info.ip || "-"}`);
+          marker.addTo(map);
+          markers[socketId] = marker;
+        }
       }
+      // 今回のデータにジオ位置も追加してlocalStorageに保存
+      const sessionsToStore = {};
+      for(const [socketId, info] of Object.entries(userSessions)) {
+        sessionsToStore[socketId] = {
+          ...info,
+          geoPosition: positions[socketId] || null
+        };
       }
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(sessionsToStore));
+      previousSessions = sessionsToStore;
     });
+    // 初回ロード時に前回のセッションを表示（あるなら）
     if (Object.keys(previousSessions).length > 0) {
       socket.emit("userSessionsUpdate", previousSessions);
     }
   </script>
 </body>
 </html>