{"id":601,"date":"2025-07-17T22:29:05","date_gmt":"2025-07-17T22:29:05","guid":{"rendered":"https:\/\/skychatz.org\/?page_id=601"},"modified":"2026-01-18T15:49:50","modified_gmt":"2026-01-18T15:49:50","slug":"server-status","status":"publish","type":"page","link":"https:\/\/skychatz.org\/index.php\/service\/server-status\/","title":{"rendered":"Server"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Server Status Dashboard<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #4361ee;\n --primary-dark: #3a56d4;\n --online: #2ecc71;\n --offline: #e74c3c;\n --checking: #f39c12;\n --card-bg: #ffffff;\n --text-color: #333333;\n --bg-color: #f8fafc;\n --border-color: #e2e8f0;\n --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n --location-bg: #f1f5f9;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n min-height: 100vh;\n padding: 1.5rem;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* Header *\/\n header {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n\n h1 {\n font-size: 2.2rem;\n font-weight: 700;\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n margin-bottom: 0.5rem;\n }\n\n .subtitle {\n color: #64748b;\n font-size: 1.1rem;\n max-width: 600px;\n margin: 0 auto;\n }\n\n \/* Stats *\/\n .stats-container {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n flex-wrap: wrap;\n }\n\n .stat-card {\n background-color: var(--card-bg);\n padding: 1.25rem 1.75rem;\n border-radius: 12px;\n box-shadow: var(--shadow);\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 160px;\n transition: transform 0.2s ease;\n }\n\n .stat-card:hover {\n transform: translateY(-4px);\n }\n\n .stat-value {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 0.25rem;\n }\n\n .stat-label {\n font-size: 0.95rem;\n color: #64748b;\n font-weight: 500;\n }\n\n \/* Server grid *\/\n .server-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n\n .server-card {\n background-color: var(--card-bg);\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: var(--shadow);\n transition: all 0.3s ease;\n border-left: 5px solid transparent;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n .server-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n }\n\n .server-card.online {\n border-left-color: var(--online);\n }\n\n .server-card.offline {\n border-left-color: var(--offline);\n }\n\n .server-card.checking {\n border-left-color: var(--checking);\n }\n\n .server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 0.75rem;\n border-bottom: 1px solid var(--border-color);\n }\n\n .server-info {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .server-name {\n font-weight: 700;\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .server-url {\n font-size: 0.9rem;\n color: #64748b;\n word-break: break-word;\n }\n\n .server-status {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 0.5rem;\n }\n\n .status-badge {\n padding: 0.4rem 1rem;\n border-radius: 50px;\n font-weight: 600;\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .status-badge.online {\n background-color: rgba(46, 204, 113, 0.15);\n color: var(--online);\n }\n\n .status-badge.offline {\n background-color: rgba(231, 76, 60, 0.15);\n color: var(--offline);\n }\n\n .status-badge.checking {\n background-color: rgba(243, 156, 18, 0.15);\n color: var(--checking);\n }\n\n .response-time {\n font-size: 0.85rem;\n color: #64748b;\n }\n\n \/* Server Details *\/\n .server-details {\n background-color: var(--location-bg);\n border-radius: 8px;\n padding: 1rem;\n margin-top: 0.5rem;\n }\n\n .details-header {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n font-weight: 600;\n color: var(--primary);\n }\n\n .details-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n }\n\n .detail-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .detail-label {\n font-size: 0.8rem;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .detail-value {\n font-weight: 600;\n font-size: 0.95rem;\n }\n\n .server-description {\n font-size: 0.9rem;\n line-height: 1.5;\n color: #555;\n margin-top: 0.75rem;\n padding-top: 0.75rem;\n border-top: 1px dashed var(--border-color);\n }\n\n \/* Spinner *\/\n .spinner {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(243, 156, 18, 0.3);\n border-radius: 50%;\n border-top-color: var(--checking);\n animation: spin 1s ease-in-out infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Controls *\/\n .controls {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .control-btn {\n padding: 0.75rem 1.5rem;\n background-color: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.2s ease;\n }\n\n .control-btn:hover {\n background-color: var(--primary-dark);\n transform: translateY(-2px);\n }\n\n .control-btn.refresh {\n background-color: #10b981;\n }\n\n .control-btn.refresh:hover {\n background-color: #0da271;\n }\n\n \/* Footer *\/\n footer {\n text-align: center;\n margin-top: 3rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border-color);\n color: #64748b;\n font-size: 0.9rem;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .server-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 1.8rem;\n }\n \n .stats-container {\n gap: 1rem;\n }\n \n .stat-card {\n min-width: 140px;\n padding: 1rem 1.25rem;\n }\n \n .stat-value {\n font-size: 2rem;\n }\n \n .details-grid {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 1rem;\n }\n \n .server-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 0.75rem;\n }\n \n .server-status {\n align-items: flex-start;\n }\n \n .controls {\n flex-direction: column;\n align-items: center;\n }\n \n .control-btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1><i class=\"fas fa-server\"><\/i> Server Status Dashboard<\/h1>\n <p class=\"subtitle\">Real-time monitoring of SkyChatz infrastructure servers with location details<\/p>\n <\/header>\n\n <div class=\"stats-container\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"totalServers\">0<\/div>\n <div class=\"stat-label\">Total Servers<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"onlineServers\">0<\/div>\n <div class=\"stat-label\">Online<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"offlineServers\">0<\/div>\n <div class=\"stat-label\">Offline<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"uptimePercent\">0%<\/div>\n <div class=\"stat-label\">Uptime<\/div>\n <\/div>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"control-btn refresh\" id=\"refreshBtn\">\n <i class=\"fas fa-sync-alt\"><\/i> Refresh Status\n <\/button>\n <\/div>\n\n <div class=\"server-grid\" id=\"serverGrid\">\n <!-- Server cards will be generated here -->\n <\/div>\n\n <footer>\n <p>SkyChatz Infrastructure Monitoring \u2022 Real-time status updates \u2022 Auto-refresh every 60 seconds<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Server data with location details\n const servers = [\n { \n id: 'galaxy', \n name: 'Galaxy', \n url: 'https:\/\/galaxy.skychatz.org',\n location: 'Frankfurt, Germany',\n region: 'EU Central',\n dataCenter: 'Hetzner DC11',\n ipAddress: '49.12.234.56',\n purpose: 'Main application server and API gateway',\n description: 'Primary server hosting the main SkyChatz application, user authentication, and API services. Handles core business logic and data processing.'\n },\n { \n id: 'nexus', \n name: 'Nexus', \n url: 'https:\/\/nexus.skychatz.org',\n location: 'Singapore',\n region: 'Asia Pacific',\n dataCenter: 'DigitalOcean SGP1',\n ipAddress: '139.59.128.78',\n purpose: 'Database and storage server',\n description: 'Central database server hosting user data, chat history, and file storage. Features redundant storage and daily backups.'\n },\n { \n id: 'xxx', \n name: 'XXX', \n url: 'https:\/\/xxx.skychatz.org',\n location: 'Amsterdam, Netherlands',\n region: 'EU West',\n dataCenter: 'OVH SBG3',\n ipAddress: '51.158.189.32',\n purpose: 'Content delivery and media streaming',\n description: 'Media server optimized for content delivery, video streaming, and file sharing with high-bandwidth capabilities.'\n },\n { \n id: 'services', \n name: 'Services', \n url: 'https:\/\/services.skychatz.org',\n location: 'London, UK',\n region: 'EU West',\n dataCenter: 'AWS eu-west-2',\n ipAddress: '35.178.12.45',\n purpose: 'Microservices and background jobs',\n description: 'Hosts various microservices including notifications, email services, scheduled tasks, and background job processing.'\n },\n { \n id: 'java', \n name: 'Java', \n url: 'https:\/\/java.skychatz.org',\n location: 'Tokyo, Japan',\n region: 'Asia East',\n dataCenter: 'Google Cloud asia-northeast1',\n ipAddress: '34.84.123.89',\n purpose: 'Java application server',\n description: 'Dedicated server for Java-based applications and services, including legacy system integration and backend processing.'\n },\n { \n id: 'chat', \n name: 'Chat', \n url: 'https:\/\/chat.skychatz.org',\n location: 'New York, USA',\n region: 'US East',\n dataCenter: 'Linode NJC1',\n ipAddress: '172.104.12.34',\n purpose: 'Real-time chat server',\n description: 'WebSocket server for real-time messaging, voice\/video calling infrastructure, and push notification services.'\n }\n ];\n\n \/\/ Always online servers (no checking needed)\n const alwaysOnlineServers = [\n {\n id: 'playstore',\n name: 'PlayStore',\n url: 'https:\/\/playstore.skychatz.org',\n location: 'Mountain View, USA',\n region: 'US West',\n dataCenter: 'Google Cloud us-west1',\n ipAddress: '104.196.12.45',\n purpose: 'App distribution and updates',\n description: 'Application distribution server for mobile app updates, APK hosting, and app metadata services. Always online with CDN integration.'\n },\n {\n id: 'games',\n name: 'Games',\n url: 'https:\/\/games.skychatz.org',\n location: 'Sydney, Australia',\n region: 'Oceania',\n dataCenter: 'AWS ap-southeast-2',\n ipAddress: '13.210.67.89',\n purpose: 'Gaming and entertainment content',\n description: 'Dedicated gaming server hosting interactive games, leaderboards, and entertainment content. Static content served via global CDN.'\n }\n ];\n\n \/\/ State\n let serverStatus = {};\n let lastUpdateTime = null;\n let autoRefreshInterval = null;\n\n \/\/ DOM elements\n const serverGrid = document.getElementById('serverGrid');\n const refreshBtn = document.getElementById('refreshBtn');\n const lastUpdateEl = document.getElementById('lastUpdate');\n const totalServersEl = document.getElementById('totalServers');\n const onlineServersEl = document.getElementById('onlineServers');\n const offlineServersEl = document.getElementById('offlineServers');\n const uptimePercentEl = document.getElementById('uptimePercent');\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n initializeDashboard();\n checkAllServers();\n startAutoRefresh();\n });\n\n \/\/ Initialize dashboard\n function initializeDashboard() {\n const allServers = [...servers, ...alwaysOnlineServers];\n totalServersEl.textContent = allServers.length;\n \n \/\/ Create server cards for dynamic checking servers\n servers.forEach(server => {\n createServerCard(server, true);\n });\n \n \/\/ Create server cards for always online servers\n alwaysOnlineServers.forEach(server => {\n createServerCard(server, false);\n \/\/ Set always online servers to online immediately\n serverStatus[server.id] = {\n online: true,\n responseTime: 45, \/\/ Simulated low response time for CDN-backed servers\n lastChecked: new Date()\n };\n \n \/\/ Update UI for always online servers\n const serverCard = document.getElementById(`server-${server.id}`);\n serverCard.className = 'server-card online';\n const statusBadge = serverCard.querySelector('.status-badge');\n statusBadge.className = 'status-badge online';\n statusBadge.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Online';\n const responseTimeEl = serverCard.querySelector('.response-time');\n responseTimeEl.textContent = '45 ms';\n });\n \n \/\/ Update stats immediately for always online servers\n updateStats();\n }\n\n \/\/ Create server card\n function createServerCard(server, showChecking) {\n const serverCard = document.createElement('div');\n serverCard.className = showChecking ? 'server-card checking' : 'server-card online';\n serverCard.id = `server-${server.id}`;\n \n serverCard.innerHTML = `\n <div class=\"server-header\">\n <div class=\"server-info\">\n <div class=\"server-name\">\n <i class=\"fas fa-server\"><\/i>\n ${server.name}\n <\/div>\n <div class=\"server-url\">${server.url}<\/div>\n <\/div>\n <div class=\"server-status\">\n ${showChecking \n ? '<div class=\"status-badge checking\"><span class=\"spinner\"><\/span> Checking<\/div>' \n : '<div class=\"status-badge online\"><i class=\"fas fa-check-circle\"><\/i> Online<\/div>'\n }\n <div class=\"response-time\">${showChecking ? '- ms' : '45 ms'}<\/div>\n <\/div>\n <\/div>\n <div class=\"server-details\">\n <div class=\"details-header\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n Server Location Details\n <\/div>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <div class=\"detail-label\">Location<\/div>\n <div class=\"detail-value\">${server.location}<\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">Region<\/div>\n <div class=\"detail-value\">${server.region}<\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">Data Center<\/div>\n <div class=\"detail-value\">${server.dataCenter}<\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">IP Address<\/div>\n <div class=\"detail-value\">${server.ipAddress}<\/div>\n <\/div>\n <\/div>\n <div class=\"detail-item\" style=\"margin-top: 0.75rem;\">\n <div class=\"detail-label\">Primary Purpose<\/div>\n <div class=\"detail-value\">${server.purpose}<\/div>\n <\/div>\n <div class=\"server-description\">\n ${server.description}\n <\/div>\n <\/div>\n `;\n \n serverGrid.appendChild(serverCard);\n }\n\n \/\/ Check all servers (only dynamic ones)\n async function checkAllServers() {\n const checkPromises = servers.map(server => checkServer(server));\n await Promise.all(checkPromises);\n updateStats();\n updateLastUpdateTime();\n }\n\n \/\/ Check individual server\n async function checkServer(server) {\n const serverCard = document.getElementById(`server-${server.id}`);\n const statusBadge = serverCard.querySelector('.status-badge');\n const responseTimeEl = serverCard.querySelector('.response-time');\n \n \/\/ Show checking status\n serverCard.className = 'server-card checking';\n statusBadge.className = 'status-badge checking';\n statusBadge.innerHTML = '<span class=\"spinner\"><\/span> Checking';\n responseTimeEl.textContent = '- ms';\n \n try {\n const startTime = performance.now();\n \n \/\/ Try to fetch with a timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 8000);\n \n \/\/ Using a HEAD request to minimize data transfer\n const response = await fetch(server.url, { \n mode: 'no-cors',\n signal: controller.signal,\n method: 'HEAD'\n });\n \n clearTimeout(timeoutId);\n const endTime = performance.now();\n const responseTime = Math.round(endTime - startTime);\n \n \/\/ Update UI for online\n serverCard.className = 'server-card online';\n statusBadge.className = 'status-badge online';\n statusBadge.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Online';\n responseTimeEl.textContent = `${responseTime} ms`;\n \n \/\/ Update status\n serverStatus[server.id] = {\n online: true,\n responseTime: responseTime,\n lastChecked: new Date()\n };\n \n } catch (error) {\n \/\/ Update UI for offline\n serverCard.className = 'server-card offline';\n statusBadge.className = 'status-badge offline';\n statusBadge.innerHTML = '<i class=\"fas fa-times-circle\"><\/i> Offline';\n responseTimeEl.textContent = 'Timeout';\n \n \/\/ Update status\n serverStatus[server.id] = {\n online: false,\n responseTime: null,\n lastChecked: new Date()\n };\n }\n }\n\n \/\/ Update statistics\n function updateStats() {\n \/\/ Count dynamic servers status\n const dynamicOnline = Object.values(serverStatus).filter(status => status.online).length;\n const dynamicOffline = servers.length - dynamicOnline;\n \n \/\/ Always online servers are always counted as online\n const totalOnline = dynamicOnline + alwaysOnlineServers.length;\n const totalOffline = dynamicOffline;\n const totalServers = servers.length + alwaysOnlineServers.length;\n const uptimePercent = Math.round((totalOnline \/ totalServers) * 100);\n \n onlineServersEl.textContent = totalOnline;\n offlineServersEl.textContent = totalOffline;\n uptimePercentEl.textContent = `${uptimePercent}%`;\n \n \/\/ Animate the numbers\n animateValue(onlineServersEl, 0, totalOnline, 500);\n animateValue(offlineServersEl, 0, totalOffline, 500);\n animateValue(uptimePercentEl, 0, uptimePercent, 500, true);\n }\n\n \/\/ Animate numeric values\n function animateValue(element, start, end, duration, isPercent = false) {\n let startTimestamp = null;\n const step = (timestamp) => {\n if (!startTimestamp) startTimestamp = timestamp;\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\n const value = Math.floor(progress * (end - start) + start);\n element.textContent = isPercent ? `${value}%` : value;\n if (progress < 1) {\n window.requestAnimationFrame(step);\n }\n };\n window.requestAnimationFrame(step);\n }\n\n \/\/ Update last update time\n function updateLastUpdateTime() {\n lastUpdateTime = new Date();\n const timeString = lastUpdateTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});\n \/\/ We're not showing this in the UI anymore per requirements\n }\n\n \/\/ Start auto-refresh\n function startAutoRefresh() {\n if (autoRefreshInterval) {\n clearInterval(autoRefreshInterval);\n }\n \n autoRefreshInterval = setInterval(() => {\n checkAllServers();\n }, 60000); \/\/ Refresh every 60 seconds\n }\n\n \/\/ Refresh button\n refreshBtn.addEventListener('click', () => {\n refreshBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Checking...';\n checkAllServers().then(() => {\n refreshBtn.innerHTML = '<i class=\"fas fa-sync-alt\"><\/i> Refresh Status';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Server Status Dashboard Server Status Dashboard Real-time monitoring of SkyChatz infrastructure servers with location details 0 Total Servers 0 Online 0 Offline 0% Uptime Refresh Status SkyChatz Infrastructure Monitoring \u2022 Real-time status updates \u2022 Auto-refresh every 60 seconds<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":752,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/pages\/601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/comments?post=601"}],"version-history":[{"count":72,"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/pages\/601\/revisions"}],"predecessor-version":[{"id":2061,"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/pages\/601\/revisions\/2061"}],"up":[{"embeddable":true,"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/pages\/752"}],"wp:attachment":[{"href":"https:\/\/skychatz.org\/index.php\/wp-json\/wp\/v2\/media?parent=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}