WIP websocket

resources/views/user/pages/tutorial_tes/index.blade.php

@@ -41,6 +41,24 @@
                 <button class="btn btn-secondary" onclick="copyLinkApiTobii()">Copy</button>
               </div>
             </div>
+            <h5 class="">Link ID Tobii:</h5>
+            <div class="row px-3">
+              <div class="col-md-11">
+                <input type="text" disabled id="link_id_tobii" class="input form-control mb-3" value="">
+              </div>
+              <div class="col-md-1 p-0">
+                <button class="btn btn-secondary" onclick="copyLinkIdTobii()">Copy</button>
+              </div>
+            </div>
+            <h5 class="">Link Token Tobii:</h5>
+            <div class="row px-3">
+              <div class="col-md-11">
+                <input type="text" disabled id="link_token_tobii" class="input form-control mb-3" value="">
+              </div>
+              <div class="col-md-1 p-0">
+                <button class="btn btn-secondary" onclick="copyLinkTokenTobii()">Copy</button>
+              </div>
+            </div>
             <p class="card-text mt-3" id="status_tobii">Memuat...</p>
             <button class="btn btn-primary" id="back_btn" onclick="showTutorial(1, 'tutorial_2')">Back</button>
             <button class="btn btn-primary" id="next_btn_connect_tobii" onclick="showTutorial(3, 'tutorial_2')">Next</button>
@@ -120,8 +138,10 @@
   <script>
     let getDataInterval = false;
     let checkTobiiInterval = null;
-    let tobiiConnectedStatus = true;
+    let tobiiConnectedStatus = false;
-    const ws = new WebSocket("ws://localhost:8080");
+    const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
+    let SESSION_ID = '{{ $data_session->id_test_sessions }}';
+    let TOKEN_SESSION = '{{ $data_session->token_session }}';
 
     function showTutorial(step, tutorialId) {
       $(`#${tutorialId}`).hide();
@@ -139,11 +159,8 @@ function showTutorial(step, tutorialId) {
 
       if(step === 3) {
         $('#calibration_point').show();
-        getDataInterval = true;
-        startPolling();
       } else {
         $('#calibration_point').hide();
-        getDataInterval = false;
       }
     }
 
@@ -201,8 +218,12 @@ function openFullscreen() {
     }
 
     function generateLinkApiTobii() {
-      const linkApi = '{{ route("tobii-receiver.store", ['id_test_sessions' => '__ID__', 'token_session' => '__TOKEN__']) }}';
+      const linkApi = '{{ env("WEBSOCKET_URL") }}'.replace('ws://', '');
-      $('#link_api_tobii').val(linkApi.replace('__ID__', '{{ $data_session->id_test_sessions }}').replace('__TOKEN__', '{{ $data_session->token_session }}').replace('&amp;', '&'));
+      const linkId = SESSION_ID;
+      const linkToken = TOKEN_SESSION;
+      $('#link_api_tobii').val(linkApi);
+      $('#link_id_tobii').val(linkId);
+      $('#link_token_tobii').val(linkToken);
     }
 
     function copyLinkApiTobii() {
@@ -225,24 +246,52 @@ function copyLinkApiTobii() {
         });
     }
 
+    function copyLinkIdTobii() {
+      const linkId = $('#link_id_tobii').val();
+      navigator.clipboard.writeText(linkId)
+        .then(() => {
+          Swal.fire({
+            icon: 'success',
+            title: 'Link ID berhasil disalin!',
+            showConfirmButton: true,
+            timer: 1500
+          });
+        })
+        .catch(err => {
+          Swal.fire({
+            icon: 'error',
+            title: 'Gagal menyalin Link ID',
+            text: err,
+          });
+        });
+    }
+
+    function copyLinkTokenTobii() {
+      const linkToken = $('#link_token_tobii').val();
+      navigator.clipboard.writeText(linkToken)
+        .then(() => {
+          Swal.fire({
+            icon: 'success',
+            title: 'Link Token berhasil disalin!',
+            showConfirmButton: true,
+            timer: 1500
+          });
+        })
+        .catch(err => {
+          Swal.fire({
+            icon: 'error',
+            title: 'Gagal menyalin Link Token',
+            text: err,
+          });
+        });
+    }
+
     function checkTobiiConnection() {
-      // $.ajax({
+      ws.send(JSON.stringify({
-      //   url: '{{ route("tobii-receiver.show", ['tobii_receiver' => $data_session->id_test_sessions]) }}',
+        type: "check_temp_data",
-      //   method: 'GET',
+        id_session: SESSION_ID
-      //   success: function(response) {
+      }));
-      //     if (response.connected) {
+
-      //       $('#status_tobii').text('Status Tobii: Terhubung').removeClass('text-danger').addClass('text-success');
-      //       $('#next_btn_connect_tobii').show();
-      //     } else {
-      //       $('#status_tobii').text('Status Tobii: Tidak Terhubung').removeClass('text-success').addClass('text-danger');
-      //       $('#next_btn_connect_tobii').hide();
-      //     }
-      //   },
-      //   error: function() {
-      //     $('#status_tobii').text('Status Tobii: Tidak Terhubung').removeClass('text-success').addClass('text-danger');
-      //     $('#next_btn_connect_tobii').hide();
-      //   }
-      // });
       if(tobiiConnectedStatus) {
         $('#status_tobii').text('Status Tobii: Terhubung').removeClass('text-danger').addClass('text-success');
         $('#next_btn_connect_tobii').show();
@@ -275,12 +324,36 @@ function checkTobiiConnection() {
 
       ws.onopen = () => {
           console.log("Connected to WebSocket");
+          ws.send(JSON.stringify({
+            type: "register",
+            session_id: SESSION_ID,
+            token_session: TOKEN_SESSION,
+            role: "web"
+          }));
+
+          ws.send(JSON.stringify({
+            type: "update_status",
+            status_sessions: false,
+            id_session: SESSION_ID
+          }));
       };
 
       ws.onmessage = (event) => {
         const data = JSON.parse(event.data);
-        console.log("DATA MASUK:", data);
+        
-        moveTheEye(data.gaze_x, data.gaze_y);
+        if(data.type === 'temp_data') {
+          console.log('Received temp_data:', data);
+          if((Date.now() - data.data[0].timestamp) < 5000) {
+            tobiiConnectedStatus = true;
+          } else {
+            tobiiConnectedStatus = false;
+          }
+        }
+
+        if(data.type === 'tobii_data_not_active') {
+          console.log('Tobii data not active:', data);
+          moveTheEye(data.data[0].gaze_x, data.data[0].gaze_y);
+        }
       };
     });