Mahayoga
/
MIF_E31231392
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP websocket

This commit is contained in:
Mahayoga 2026-04-15 04:23:15 +07:00
parent 321216b7b3
commit f9ac3ebcf9
1 changed files with 99 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
resources/views/user/pages/tutorial_tes/index.blade.php
View File

@ -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;
const ws = new WebSocket("ws://localhost:8080");
let tobiiConnectedStatus = false;
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__']) }}';
$('#link_api_tobii').val(linkApi.replace('__ID__', '{{ $data_session->id_test_sessions }}').replace('__TOKEN__', '{{ $data_session->token_session }}').replace('&amp;', '&'));
const linkApi = '{{ env("WEBSOCKET_URL") }}'.replace('ws://', '');
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({
// url: '{{ route("tobii-receiver.show", ['tobii_receiver' => $data_session->id_test_sessions]) }}',
// method: 'GET',
// 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();
// }
// });
ws.send(JSON.stringify({
type: "check_temp_data",
id_session: SESSION_ID
}));
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);
}
};
});