Update web-socket.html

web-socket.html

@@ -63,115 +63,119 @@
 </table>
 
 <script>
-    const socket = io("https://web-socket-server-14ap.onrender.com/", {
-        query: {
-            isAdmin: true  // 管理画面からの接続であることを示す
-        }
-    });
-
-    const STORAGE_KEY = "userSessions";
-
-    let previousSessions = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
-
-    const userCountElem = document.getElementById("userCount");
-    const tbody = document.getElementById("userTableBody");
-
-    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 = {};
-
-    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);
+  const socket = io("https://web-socket-server-14ap.onrender.com/", {
+    query: {
+      isAdmin: true  // 管理画面からの接続であることを示す
     }
+  });
+
+  const STORAGE_KEY = "userSessions";
+
+  // 過去・現在含む全セッション情報を管理
+  let allSessions = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+
+  const userCountElem = document.getElementById("userCount");
+  const tbody = document.getElementById("userTableBody");
+
+  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 = {};
+
+  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("updateUserCount", (count) => {
+    userCountElem.textContent = count;
+  });
+
+  // 現在接続中のセッション更新（リアルタイム）
+  socket.on("userSessionsUpdate", (userSessions) => {
+    // 現在のセッションをallSessionsにマージ（上書き）
+    for (const [socketId, info] of Object.entries(userSessions)) {
+      allSessions[socketId] = info;
+    }
+    renderTable(allSessions);
+  });
+
+  // 過去セッション履歴受信時
+  socket.on("userSessionHistory", (sessionHistory) => {
+    // 履歴の各セッションをallSessionsに追加（既存のsocketIdを上書きしない）
+    for (const session of sessionHistory) {
+      if (!allSessions[session.socketId]) {
+        allSessions[session.socketId] = session;
+      }
+    }
+    renderTable(allSessions);
+  });
 
-    socket.on("updateUserCount", (count) => {
-        userCountElem.textContent = count;
-    });
-
-    socket.on("userSessionsUpdate", (userSessions) => {
-        console.log("userSessionsUpdate受信", userSessions);
-
-        tbody.innerHTML = "";
-
-        for (let key in markers) {
-            map.removeLayer(markers[key]);
-        }
-        markers = {};
-
-        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];
-
-                const 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"));
-            tr.appendChild(createTd(info.loc || "-", "loc"));
-            tr.appendChild(createTd(info.city || "-", "city"));
-            tr.appendChild(createTd(info.region || "-", "region"));
-            tr.appendChild(createTd(info.country || "-", "country"));
-
-            tbody.appendChild(tr);
-
-            // 位置情報がある場合、地図にマーカーを追加
-            if (info.loc) {
-                const [lat, lon] = info.loc.split(',').map(Number);
-                const prevLoc = previousSessions[socketId]?.loc;
-                const changedPos = prevLoc !== info.loc;
-                const color = changedPos ? 'red' : 'blue';
-
-                const locationText = [
-                    `SocketID: ${socketId}`,
-                    `IP: ${info.ip || "-"}`,
-                    `都市: ${info.city || "-"}`,
-                    `地域: ${info.region || "-"}`,
-                    `国: ${info.country || "-"}`
-                ].join('<br>');
-
-                const marker = createCircleMarker(lat, lon, color, locationText);
-                marker.addTo(map);
-                markers[socketId] = marker;
-            }
-        }
+  function renderTable(sessions) {
+    tbody.innerHTML = "";
 
-        // マーカーがある場合、地図を適切な範囲に調整
-        if (Object.keys(markers).length > 0) {
-            const group = L.featureGroup(Object.values(markers));
-            map.fitBounds(group.getBounds().pad(0.5));
-        }
+    // 既存マーカー削除
+    for (let key in markers) {
+      map.removeLayer(markers[key]);
+    }
+    markers = {};
+
+    for (const [socketId, info] of Object.entries(sessions)) {
+      const tr = document.createElement("tr");
+
+      function createTd(text) {
+        const td = document.createElement("td");
+        td.textContent = text;
+        return td;
+      }
+
+      tr.appendChild(createTd(socketId));
+      tr.appendChild(createTd(info.ip || "-"));
+      tr.appendChild(createTd(info.connectTime ? new Date(info.connectTime).toLocaleString() : "-"));
+      tr.appendChild(createTd(info.disconnectTime ? new Date(info.disconnectTime).toLocaleString() : "-"));
+      tr.appendChild(createTd(info.loc || "-"));
+      tr.appendChild(createTd(info.city || "-"));
+      tr.appendChild(createTd(info.region || "-"));
+      tr.appendChild(createTd(info.country || "-"));
+
+      tbody.appendChild(tr);
+
+      // 位置情報がある場合は地図にマーカーを追加
+      if (info.loc) {
+        const [lat, lon] = info.loc.split(',').map(Number);
+        const locationText = [
+          `SocketID: ${socketId}`,
+          `IP: ${info.ip || "-"}`,
+          `都市: ${info.city || "-"}`,
+          `地域: ${info.region || "-"}`,
+          `国: ${info.country || "-"}`
+        ].join('<br>');
+
+        const marker = createCircleMarker(lat, lon, 'blue', locationText);
+        marker.addTo(map);
+        markers[socketId] = marker;
+      }
+    }
 
-        // セッション情報をローカルストレージに保存
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(userSessions));
-        previousSessions = userSessions;
-    });
+    // マーカーがあれば地図を調整
+    if (Object.keys(markers).length > 0) {
+      const group = L.featureGroup(Object.values(markers));
+      map.fitBounds(group.getBounds().pad(0.5));
+    }
 
+    // ローカルストレージに保存
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions));
+  }
 </script>
 </body>
 </html>