File size: 2,825 Bytes
47f5399 2582957 f2dea7f 2582957 47f5399 2582957 47f5399 2582957 47f5399 3436304 2582957 47f5399 2582957 a034404 2582957 b31641d 96eb9ab 2582957 96eb9ab 2582957 96eb9ab 3436304 2582957 47f5399 2582957 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>IPアクセス履歴管理</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
<script src="https://soiz1-eruda3.hf.space/eruda.js"></script>
<script>eruda.init();</script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
<style>
#map { height: 400px; width: 100%; margin-bottom: 20px; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th { background-color: #f0f0f0; }
</style>
</head>
<body>
<h1>アクセスログ一覧</h1>
<div id="map"></div>
<table>
<thead>
<tr>
<th>Socket ID</th>
<th>IPアドレス</th>
<th>接続時間</th>
<th>位置情報</th>
<th>都市</th>
<th>地域</th>
<th>国</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<script>
const map = L.map('map').setView([35.681236, 139.767125], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
async function loadSessions() {
const res = await fetch('https://soiz1-websocket.hf.space/api/sessions');
const data = await res.json();
renderTable(data);
renderMap(data);
}
function renderTable(sessions) {
const tbody = document.getElementById('table-body');
tbody.innerHTML = '';
sessions.forEach(session => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${session.socketId}</td>
<td>${session.ip}</td>
<td>${new Date(session.connectTime).toLocaleString()}</td>
<td>${session.loc || '-'}</td>
<td>${session.city || '-'}</td>
<td>${session.region || '-'}</td>
<td>${session.country || '-'}</td>
`;
tbody.appendChild(tr);
});
}
function renderMap(sessions) {
const markers = sessions
.filter(s => s.loc)
.map(s => {
const [lat, lon] = s.loc.split(',').map(Number);
return L.circleMarker([lat, lon], {
radius: 8,
fillColor: 'blue',
color: '#000',
weight: 1,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`
IP: ${s.ip}<br>
都市: ${s.city}<br>
地域: ${s.region}<br>
国: ${s.country}
`).addTo(map);
});
if (markers.length > 0) {
const group = L.featureGroup(markers);
map.fitBounds(group.getBounds().pad(0.5));
}
}
loadSessions();
</script>
</body>
</html>
|