Spaces:

OzoneAsai
/

Motions

Running

App Files Files Community

OzoneAsai commited on Dec 25, 2024

Commit

08eeeee

verified ·

1 Parent(s): 576baed

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -91

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebSocket with Client-Side Sensor Data and Flags</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -11,12 +11,12 @@
         #container {
             margin: 50px;
         }
-        #output, #ping, #client-refresh, #server-refresh, #client-sensor, #controls, #flags, #export, #send-data {
             margin-top: 10px;
             padding: 10px;
             border: 1px solid #ccc;
             background-color: #f9f9f9;
-            width: 300px;
         }
         #status {
             margin-top: 10px;
@@ -38,11 +38,12 @@
 </head>
 <body>
     <div id="container">
-        <h1>WebSocket & Client-Side Sensor Data with Flags</h1>
-        <p>WebSocketサーバーのURLを指定してください（例: ws://localhost:8765）。</p>
-        <input type="text" id="ws-url" placeholder="ws://localhost:8765">
-        <button onclick="connectWebSocket()">Connect</button>
-        <button onclick="requestSensorPermissions()">センサーを有効化</button>
         <div id="controls">
             <button onclick="startRecording()">記録開始</button>
@@ -61,6 +62,7 @@
             <div id="current-flags">
                 <strong>現在のフラグ:</strong> なし
             </div>
         </div>
         <div id="export">
@@ -73,17 +75,13 @@
         <div id="status">Status: Not connected</div>
         <div id="output">最新サーバーデータがここに表示されます</div>
         <div id="client-sensor">クライアントサイドデータ: 加速度と回転率がここに表示されます</div>
-        <div id="ping">Ping: 計測中...</div>
         <div id="client-refresh">クライアント リフレッシュレート: 計測中...</div>
-        <div id="server-refresh">サーバー リフレッシュレート: 計測中...</div>
         <div id="error">エラー: なし</div>
     </div>
     <script>
-        let websocket;
-        let lastMessageTime = null;
-        let lastClientUpdate = null;
-        let clientRefreshRate = 0;
         // センサー記録用
         let isRecording = false;
@@ -122,72 +120,18 @@
             if (flags.hasOwnProperty(flag)) {
                 flags[flag] = !flags[flag];
                 updateFlagButtons();
-                sendFlagsViaWebSocket();
             }
         }
-        function connectWebSocket() {
-            try {
-                let wsUrl = document.getElementById('ws-url').value || 'ws://localhost:8765';
-                websocket = new WebSocket(wsUrl);
-                websocket.onopen = function() {
-                    document.getElementById('status').innerHTML = "Status: Connected to " + wsUrl;
-                    startPing();
-                    sendFlagsViaWebSocket(); // 接続時に現在のフラグを送信
-                };
-                websocket.onmessage = function(event) {
-                    // チェック: PING応答か通常のメッセージか
-                    if (event.data === 'pong') {
-                        let endTime = new Date().getTime();
-                        let pingTime = endTime - startTimePing;
-                        document.getElementById('ping').innerHTML = "Ping: " + pingTime + " ms";
-                        return;
-                    }
-                    document.getElementById('output').innerHTML = "最新サーバーデータ: " + event.data;
-                    // サーバーリフレッシュレートの計算
-                    let currentTime = new Date().getTime();
-                    if (lastMessageTime !== null) {
-                        let serverRefreshRate = (currentTime - lastMessageTime) / 1000;
-                        document.getElementById('server-refresh').innerHTML = "サーバー リフレッシュレート: " + serverRefreshRate.toFixed(2) + "秒";
-                    }
-                    lastMessageTime = currentTime;
-                    // クライアントリフレッシュレートの計算
-                    if (lastClientUpdate !== null) {
-                        clientRefreshRate = (currentTime - lastClientUpdate) / 1000;
-                        document.getElementById('client-refresh').innerHTML = "クライアント リフレッシュレート: " + clientRefreshRate.toFixed(2) + "秒";
-                    }
-                    lastClientUpdate = currentTime;
-                };
-                websocket.onclose = function() {
-                    document.getElementById('status').innerHTML = "Status: Disconnected";
-                };
-                websocket.onerror = function(error) {
-                    handleError(error);
-                };
-            } catch (error) {
-                handleError(error);
-            }
-        }
-        // PINGを送信して応答時間を計測
-        let startTimePing;
-        function startPing() {
-            try {
-                setInterval(function() {
-                    if (websocket.readyState === WebSocket.OPEN) {
-                        startTimePing = new Date().getTime();
-                        websocket.send('ping');
-                    }
-                }, 5000); // 5秒ごとにPINGを送信
-            } catch (error) {
-                handleError(error);
             }
         }
@@ -247,8 +191,8 @@
                         sensorData.push(sensorInfo);
                     }
-                    // フラグをWebSocketで送信
-                    sendFlagsViaWebSocket();
                 });
             } catch (error) {
                 handleError(error);
@@ -302,14 +246,12 @@
                 return;
             }
-            // 送信先のサーバーURLを指定
-            let serverUrl = prompt("データを送信するサーバーのURLを入力してください（例: https://example.com/api/sensor-data）:");
             if (!serverUrl) {
-                alert("サーバーURLが入力されていません。");
                 return;
             }
-            fetch(serverUrl, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
@@ -319,6 +261,7 @@
             .then(response => {
                 if (response.ok) {
                     alert("データが正常に送信されました。");
                 } else {
                     alert("データの送信に失敗しました。ステータスコード: " + response.status);
                 }
@@ -328,15 +271,31 @@
             });
         }
-        // WebSocket経由でフラグ情報を送信
-        function sendFlagsViaWebSocket() {
-            if (websocket && websocket.readyState === WebSocket.OPEN) {
-                const flagsPayload = {
-                    type: 'flags',
-                    flags: { ...flags }
-                };
-                websocket.send(JSON.stringify(flagsPayload));
             }
         }
         // エラーを画面とコンソールに出力

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTTP with Client-Side Sensor Data and Flags</title>
     <style>
         body {
             font-family: Arial, sans-serif;
         #container {
             margin: 50px;
         }
+        #output, #client-refresh, #client-sensor, #controls, #flags, #export, #send-data, #send-flags {
             margin-top: 10px;
             padding: 10px;
             border: 1px solid #ccc;
             background-color: #f9f9f9;
+            width: 320px;
         }
         #status {
             margin-top: 10px;
 </head>
 <body>
     <div id="container">
+        <h1>HTTP & Client-Side Sensor Data with Flags</h1>
+        <p>データを送信するサーバーのURLを指定してください（例: https://example.com/api/）:</p>
+        <input type="text" id="server-url" placeholder="https://example.com/api/">
+        <div id="send-flags">
+            <button onclick="setServerUrl()">設定</button>
+        </div>
         <div id="controls">
             <button onclick="startRecording()">記録開始</button>
             <div id="current-flags">
                 <strong>現在のフラグ:</strong> なし
             </div>
+            <button onclick="sendFlagsToServer()">フラグを送信</button>
         </div>
         <div id="export">
         <div id="status">Status: Not connected</div>
         <div id="output">最新サーバーデータがここに表示されます</div>
         <div id="client-sensor">クライアントサイドデータ: 加速度と回転率がここに表示されます</div>
         <div id="client-refresh">クライアント リフレッシュレート: 計測中...</div>
         <div id="error">エラー: なし</div>
     </div>
     <script>
+        // サーバーURL
+        let serverUrl = '';
         // センサー記録用
         let isRecording = false;
             if (flags.hasOwnProperty(flag)) {
                 flags[flag] = !flags[flag];
                 updateFlagButtons();
             }
         }
+        // サーバーURLを設定
+        function setServerUrl() {
+            const inputUrl = document.getElementById('server-url').value.trim();
+            if (inputUrl) {
+                serverUrl = inputUrl.endsWith('/') ? inputUrl : inputUrl + '/';
+                document.getElementById('status').innerHTML = `Status: Server URL set to ${serverUrl}`;
+                document.getElementById('error').innerHTML = "エラー: なし";
+            } else {
+                alert("有効なサーバーURLを入力してください。");
             }
         }
                         sensorData.push(sensorInfo);
                     }
+                    // フラグをサーバーに送信
+                    sendFlagsToServer();
                 });
             } catch (error) {
                 handleError(error);
                 return;
             }
             if (!serverUrl) {
+                alert("サーバーURLを設定してください。");
                 return;
             }
+            fetch(`${serverUrl}sensor-data`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
             .then(response => {
                 if (response.ok) {
                     alert("データが正常に送信されました。");
+                    document.getElementById('output').innerHTML = "データがサーバーに送信されました。";
                 } else {
                     alert("データの送信に失敗しました。ステータスコード: " + response.status);
                 }
             });
         }
+        // フラグをサーバーに送信
+        function sendFlagsToServer() {
+            if (!serverUrl) {
+                console.warn("サーバーURLが設定されていません。フラグを送信できません。");
+                return;
             }
+            // フラグ情報を送信
+            fetch(`${serverUrl}flags`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ flags: { ...flags } })
+            })
+            .then(response => {
+                if (response.ok) {
+                    console.log("フラグが正常に送信されました。");
+                } else {
+                    console.error("フラグの送信に失敗しました。ステータスコード: " + response.status);
+                }
+            })
+            .catch(error => {
+                handleError(error);
+            });
         }
         // エラーを画面とコンソールに出力