sing-song-player-3vx0f39v

Running

App Files Files Community

soiz1 commited on Jul 24

Commit

b31641d

1 Parent(s): 47f5399

Update web-socket.html

Browse files

Files changed (1) hide show

web-socket.html +138 -53

web-socket.html CHANGED Viewed

@@ -2,21 +2,27 @@
 <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>
   <style>
-    table { border-collapse: collapse; width: 100%; }
     th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
     th { background-color: #eee; }
     .highlight {
       background-color: #f99;
       transition: background-color 1s ease;
     }
   </style>
 </head>
 <body>
   <h1>現在の接続ユーザー数: <span id="userCount">0</span></h1>
-  <div>更新まで: <span id="countdown">5</span>秒</div>
   <table>
     <thead>
       <tr>
@@ -29,83 +35,162 @@
     <tbody id="userTableBody"></tbody>
   </table>
   <script>
     const socket = io("https://web-socket-server-14ap.onrender.com/");
-    // ローカルストレージのキー
     const STORAGE_KEY = "userSessions";
-    // localStorageから前回セッション情報を取得（無ければ空オブジェクト）
     let previousSessions = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
-    let countdown = 5;
     const userCountElem = document.getElementById("userCount");
-    const countdownElem = document.getElementById("countdown");
     const tbody = document.getElementById("userTableBody");
-    // カウントダウンタイマー
-    setInterval(() => {
-      countdown--;
-      if (countdown < 0) countdown = 5;
-      countdownElem.textContent = countdown;
-    }, 1000);
-    // 5秒ごとに更新要求（サーバーが自動送信なら不要）
-    setInterval(() => {
-      socket.emit("requestUserSessions");
-    }, 5000);
-    socket.on("updateUserCount", (count) => {
-      userCountElem.textContent = count;
-    });
-    socket.on("userSessionsUpdate", (userSessions) => {
-      tbody.innerHTML = "";
-      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 = false;
-          if (elementKey === "connectTime" || elementKey === "disconnectTime") {
-            changed = prevValue !== currValue;
-          } else {
-            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);
       }
-      // 今回のデータをlocalStorageに保存（ディープコピー推奨）
       localStorage.setItem(STORAGE_KEY, JSON.stringify(userSessions));
-      // previousSessionsも更新
       previousSessions = JSON.parse(JSON.stringify(userSessions));
     });
-    // 初回ロード時に前回のセッションを表示（あるなら）
     if (Object.keys(previousSessions).length > 0) {
-      // 自己発火用の擬似的なイベントで描画のみ実施
       socket.emit("userSessionsUpdate", previousSessions);
     }
   </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" />
+  <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>
     <tbody id="userTableBody"></tbody>
   </table>
+  <div id="map"></div>
   <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) => {
+      userCountElem.textContent = count;
+    });
+    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>