sing-song-player-3vx0f39v

Running

App Files Files Community

soiz1 commited on Jul 24

Commit

bc22a6c

1 Parent(s): dc53e23

Update web-socket.html

Browse files

Files changed (1) hide show

web-socket.html +59 -44

web-socket.html CHANGED Viewed

@@ -12,22 +12,34 @@
     src="https://unpkg.com/[email protected]/dist/leaflet.js"
   ></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>
@@ -42,57 +54,43 @@
     <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");
-    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);
     }
@@ -101,15 +99,17 @@
     });
     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);
@@ -142,17 +142,13 @@
         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 || "-"}`);
@@ -161,7 +157,14 @@
         }
       }
-      // 今回のデータにジオ位置も追加してlocalStorageに保存
       const sessionsToStore = {};
       for(const [socketId, info] of Object.entries(userSessions)) {
         sessionsToStore[socketId] = {
@@ -174,10 +177,22 @@
       previousSessions = sessionsToStore;
     });
-    // 初回ロード時に前回のセッションを表示（あるなら）
-    if (Object.keys(previousSessions).length > 0) {
-      socket.emit("userSessionsUpdate", previousSessions);
-    }
   </script>
 </body>
 </html>

     src="https://unpkg.com/[email protected]/dist/leaflet.js"
   ></script>
   <style>
     #map {
       height: 400px;
       width: 100%;
       border: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+    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;
     }
   </style>
 </head>
 <body>
+  <div id="map"></div>
   <h1>現在の接続ユーザー数: <span id="userCount">0</span></h1>
   <div>更新はページ再読み込みで行います。</div>
   <table>
     <tbody id="userTableBody"></tbody>
   </table>
   <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.681236, 139.767125], 5);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 18,
       attribution: '© OpenStreetMap contributors'
     }).addTo(map);
     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;
     }
+    // ----------------------------------
     function createCircleMarker(lat, lon, color, popupText) {
       return L.circleMarker([lat, lon], {
+        radius: 10,
         fillColor: color,
         color: '#000',
         weight: 1,
         opacity: 1,
+        fillOpacity: 0.9
       }).bindPopup(popupText);
     }
     });
     socket.on("userSessionsUpdate", async (userSessions) => {
+      console.log("userSessionsUpdate受信", 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);
         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 || "-"}`);
         }
       }
+      // マーカー全体を囲んで地図を移動
+      const markerPositions = Object.values(markers).map(m => m.getLatLng());
+      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)) {
         sessionsToStore[socketId] = {
       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>