Perbaikan websokect dan lainnya
This commit is contained in:
parent
46040fa886
commit
d88b961e4b
|
|
@ -30,37 +30,10 @@
|
|||
<ol>
|
||||
<li><strong>Persiapan:</strong> Pastikan Tobii sudah terhubung dan berfungsi dengan baik.</li>
|
||||
<li><strong>Penempatan:</strong> Tempatkan Tobii di posisi yang sesuai untuk mendeteksi gerakan mata dengan akurat.</li>
|
||||
<li><strong>Hubungkan Tobii:</strong> Hubungkan Tobii ke dalam web dengan menggunakan link API dibawah ini.</li>
|
||||
<li><strong>Hubungkan Tobii:</strong> Hubungkan Tobii ke dalam web dengan menggunakan aplikasi API, jika tidak terhubung, hubungi administrator.</li>
|
||||
<li><strong>Hasil:</strong> Setelah menghubungkan ke web berhasil, akan muncul notifikasi bahwa Tobii telah terhubung.</li>
|
||||
<li><strong>Selanjutnya:</strong> Melakukan kalibrasi mata dengan Tobii.</li>
|
||||
</ol>
|
||||
<h5 class="">Link API Tobii:</h5>
|
||||
<div class="row px-3">
|
||||
<div class="col-md-11">
|
||||
<input type="text" disabled id="link_api_tobii" class="input form-control mb-3" value="">
|
||||
</div>
|
||||
<div class="col-md-1 p-0">
|
||||
<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>
|
||||
|
|
@ -128,10 +101,79 @@
|
|||
let getDataInterval = false;
|
||||
let checkTobiiInterval = null;
|
||||
let tobiiConnectedStatus = false;
|
||||
const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
|
||||
let ws = null;
|
||||
let reconnectDelay = 1000;
|
||||
let maxReconnectDelay = 10000;
|
||||
let SESSION_ID = '{{ $data_session->id_test_sessions }}';
|
||||
let TOKEN_SESSION = '{{ $data_session->token_session }}';
|
||||
|
||||
function startWebsocket() {
|
||||
console.log("Connecting to WebSocket...");
|
||||
ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
|
||||
ws.onopen = () => {
|
||||
console.log("Connected to WebSocket");
|
||||
reconnectDelay = 1000;
|
||||
ws.send(JSON.stringify({
|
||||
type: "register",
|
||||
session_id: SESSION_ID,
|
||||
token_session: TOKEN_SESSION,
|
||||
role: "web"
|
||||
}));
|
||||
|
||||
searchingTobiiDevice();
|
||||
|
||||
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('Received data from WebSocket:', data);
|
||||
|
||||
if(data.type === 'tobii_data') {
|
||||
try {
|
||||
moveTheEye(data.gaze_x, data.gaze_y);
|
||||
} catch(error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
if(data.type === 'status_tobii_device') {
|
||||
if(data.status) {
|
||||
console.log('Tobii device is connected');
|
||||
tobiiConnectedStatus = true;
|
||||
} else {
|
||||
console.log('Tobii device is not connected');
|
||||
tobiiConnectedStatus = false;
|
||||
searchingTobiiDevice();
|
||||
}
|
||||
checkTobiiConnection();
|
||||
}
|
||||
|
||||
if(data.type === 'reset_start_tobii') {
|
||||
startTobii();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = function (error) {
|
||||
console.log("WebSocket error");
|
||||
};
|
||||
|
||||
ws.onclose = function () {
|
||||
setTimeout(() => {
|
||||
reconnectDelay = Math.min(
|
||||
reconnectDelay * 2,
|
||||
maxReconnectDelay
|
||||
);
|
||||
console.log("Disconnected from WebSocket. Retrying in " + reconnectDelay + " ms...");
|
||||
startWebsocket();
|
||||
}, reconnectDelay);
|
||||
};
|
||||
}
|
||||
|
||||
function showTutorial(step, tutorialId) {
|
||||
$(`#${tutorialId}`).hide();
|
||||
$(`#tutorial_${step}`).show();
|
||||
|
|
@ -297,6 +339,39 @@ function checkTobiiConnection() {
|
|||
}
|
||||
}
|
||||
|
||||
async function searchingTobiiDevice() {
|
||||
try {
|
||||
console.log('Searching for tobii...');
|
||||
const response = await fetch('{{ env('TOBII_API_URL') }}', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
session_id: SESSION_ID,
|
||||
token: TOKEN_SESSION,
|
||||
url: "{{ env('WEBSOCKET_URL') }}"
|
||||
})
|
||||
}
|
||||
);
|
||||
if (!response.ok) {
|
||||
console.error('Failed to get tobii device, retrying...');
|
||||
setTimeout(5000);
|
||||
searchingTobiiDevice();
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
if(data.session_id == SESSION_ID && data.token == TOKEN_SESSION) {
|
||||
tobiiConnectedStatus = true;
|
||||
console.log('Done searching...');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error getting Tobii device:', error);
|
||||
setTimeout(5000);
|
||||
searchingTobiiDevice();
|
||||
}
|
||||
}
|
||||
|
||||
function startTobii() {
|
||||
ws.send(JSON.stringify({
|
||||
type: "command",
|
||||
|
|
@ -320,50 +395,8 @@ function stopTobii() {
|
|||
$('#calibration_point').hide();
|
||||
$('#show_calibration').hide();
|
||||
generateLinkApiTobii();
|
||||
|
||||
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('Received data from WebSocket:', data);
|
||||
|
||||
if(data.type === 'tobii_data') {
|
||||
try {
|
||||
moveTheEye(data.gaze_x, data.gaze_y);
|
||||
} catch(error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
if(data.type === 'status_tobii_device') {
|
||||
if(data.status) {
|
||||
console.log('Tobii device is connected');
|
||||
tobiiConnectedStatus = true;
|
||||
} else {
|
||||
console.log('Tobii device is not connected');
|
||||
tobiiConnectedStatus = false;
|
||||
}
|
||||
checkTobiiConnection();
|
||||
}
|
||||
|
||||
if(data.type === 'reset_start_tobii') {
|
||||
startTobii();
|
||||
}
|
||||
};
|
||||
startWebsocket();
|
||||
console.log("hehehehehehehehehhehehe");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,9 @@
|
|||
|
||||
@section('script')
|
||||
<script>
|
||||
const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
|
||||
let ws = null;
|
||||
let reconnectDelay = 1000;
|
||||
let maxReconnectDelay = 10000;
|
||||
const SESSION_ID = '{{ $data_session->id_test_sessions }}';
|
||||
const TOKEN_SESSION = '{{ $data_session->token_session }}';
|
||||
let UNIX_END_TIME = null;
|
||||
|
|
@ -79,6 +81,119 @@
|
|||
let CURRENT_BTN = null;
|
||||
let CAPTION_BTN = null;
|
||||
|
||||
function startWebsocket() {
|
||||
console.log("Connecting to WebSocket...");
|
||||
ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
|
||||
ws.onopen = () => {
|
||||
console.log("Connected to WebSocket");
|
||||
ws.send(JSON.stringify({
|
||||
type: "register",
|
||||
session_id: SESSION_ID,
|
||||
token_session: TOKEN_SESSION,
|
||||
role: "web"
|
||||
}));
|
||||
|
||||
document.addEventListener('fullscreenchange', checkFullscreen);
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
type: "update_status",
|
||||
status_sessions: true,
|
||||
session_id: SESSION_ID
|
||||
}));
|
||||
|
||||
searchingTobiiDevice()
|
||||
checkFullscreen();
|
||||
getTimeLeft();
|
||||
setInterval(updateTimeLeft, 1000);
|
||||
getNavigationField();
|
||||
setCurrentNavigation();
|
||||
fetchQuestion(QUESTION_INDEX);
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if(data.type === 'reset_start_tobii') {
|
||||
startTobii();
|
||||
}
|
||||
|
||||
if(data.type === 'status_tobii_device') {
|
||||
if(data.status) {
|
||||
// console.log('Tobii device is connected');
|
||||
// document.getElementById('status_tobii_device').innerText = 'Connected';
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-danger');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-success');
|
||||
} else {
|
||||
console.log('Tobii device is not connected');
|
||||
searchingTobiiDevice();
|
||||
// document.getElementById('status_tobii_device').innerText = 'Not Connected';
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-success');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-danger');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = function (error) {
|
||||
console.log("WebSocket error");
|
||||
};
|
||||
|
||||
ws.onclose = function () {
|
||||
setTimeout(() => {
|
||||
reconnectDelay = Math.min(
|
||||
reconnectDelay * 2,
|
||||
maxReconnectDelay
|
||||
);
|
||||
console.log("Disconnected from WebSocket. Retrying in " + reconnectDelay + " ms...");
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-success');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-danger');
|
||||
startWebsocket();
|
||||
}, reconnectDelay);
|
||||
};
|
||||
}
|
||||
|
||||
async function searchingTobiiDevice() {
|
||||
try {
|
||||
console.log('Searching for tobii...');
|
||||
const response = await fetch('{{ env('TOBII_API_URL') }}', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
session_id: SESSION_ID,
|
||||
token: TOKEN_SESSION,
|
||||
url: "{{ env('WEBSOCKET_URL') }}"
|
||||
})
|
||||
}
|
||||
);
|
||||
if (!response.ok) {
|
||||
console.error('Failed to get tobii device, retrying...');
|
||||
setTimeout(5000);
|
||||
searchingTobiiDevice();
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
if(data.session_id == SESSION_ID && data.token == TOKEN_SESSION) {
|
||||
// tobiiConnectedStatus = true;
|
||||
startTobii();
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-success');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-danger');
|
||||
console.log('Done searching...');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error getting Tobii device:', error);
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-success');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-danger');
|
||||
setTimeout(5000);
|
||||
searchingTobiiDevice();
|
||||
}
|
||||
}
|
||||
|
||||
function changeQuestion(num) {
|
||||
Swal.showLoading();
|
||||
|
||||
|
|
@ -106,15 +221,13 @@ function changeQuestion(num) {
|
|||
formData.append('question', num);
|
||||
formData.append('id_question', QUESTION_ID);
|
||||
formData.append('session_id', SESSION_ID);
|
||||
xhttp.open("POST", "{{ route('ujian.store') }}", false);
|
||||
xhttp.open("POST", "{{ route('ujian.store') }}", true);
|
||||
xhttp.send(formData);
|
||||
}
|
||||
// stopTobii();
|
||||
QUESTION_INDEX = num;
|
||||
getNavigationField();
|
||||
setCurrentNavigation();
|
||||
fetchQuestion(QUESTION_INDEX);
|
||||
Swal.close();
|
||||
}
|
||||
|
||||
function setCurrentNavigation() {
|
||||
|
|
@ -144,7 +257,7 @@ function fetchQuestion(question_index) {
|
|||
}
|
||||
}
|
||||
|
||||
xhttp.open("GET", "{{ route('ujian.fetchQuestion') }}?session_id=" + SESSION_ID + "&question_index=" + question_index, false);
|
||||
xhttp.open("GET", "{{ route('ujian.fetchQuestion') }}?session_id=" + SESSION_ID + "&question_index=" + question_index, true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
|
|
@ -232,6 +345,8 @@ function getCurrentAnswer(id_question) {
|
|||
}
|
||||
});
|
||||
}
|
||||
Swal.close();
|
||||
checkFullscreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -282,11 +397,12 @@ function getNavigationField() {
|
|||
}
|
||||
}
|
||||
$('#navigation_field').html(navigation_field);
|
||||
setCurrentNavigation();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhttp.open('GET', '{{ route('ujian.navigationField') }}?session_id=' + SESSION_ID, false);
|
||||
xhttp.open('GET', '{{ route('ujian.navigationField') }}?session_id=' + SESSION_ID, true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
|
|
@ -385,55 +501,7 @@ function checkFullscreen() {
|
|||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
ws.onopen = () => {
|
||||
console.log("Connected to WebSocket");
|
||||
ws.send(JSON.stringify({
|
||||
type: "register",
|
||||
session_id: SESSION_ID,
|
||||
token_session: TOKEN_SESSION,
|
||||
role: "web"
|
||||
}));
|
||||
|
||||
document.addEventListener('fullscreenchange', checkFullscreen);
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
type: "update_status",
|
||||
status_sessions: true,
|
||||
session_id: SESSION_ID
|
||||
}));
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if(data.type === 'reset_start_tobii') {
|
||||
startTobii();
|
||||
}
|
||||
|
||||
if(data.type === 'status_tobii_device') {
|
||||
if(data.status) {
|
||||
console.log('Tobii device is connected');
|
||||
// document.getElementById('status_tobii_device').innerText = 'Connected';
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-danger');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-success');
|
||||
} else {
|
||||
console.log('Tobii device is not connected');
|
||||
// document.getElementById('status_tobii_device').innerText = 'Not Connected';
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-success');
|
||||
document.getElementById('bg_status_tobii').classList.remove('bg-warning');
|
||||
document.getElementById('bg_status_tobii').classList.add('bg-danger');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
startTobii();
|
||||
checkFullscreen();
|
||||
getTimeLeft();
|
||||
setInterval(updateTimeLeft, 1000);
|
||||
getNavigationField();
|
||||
setCurrentNavigation();
|
||||
fetchQuestion(QUESTION_INDEX);
|
||||
};
|
||||
startWebsocket();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue