56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
function initWebSocket() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const browserId = urlParams.get('b');
|
|
const ws = new WebSocket(`ws://127.0.0.1:8888/?b=${browserId}`);
|
|
document.documentElement.classList.add(`theme-${browserId}`);
|
|
|
|
ws.onopen = function () {
|
|
console.log("Connected to the server");
|
|
setInterval(() => sendSquareDetails(ws), 5);
|
|
};
|
|
|
|
ws.onmessage = function (event) {
|
|
if (event.data instanceof Blob) {
|
|
const reader = new FileReader();
|
|
reader.onload = function() {
|
|
recreateOtherSquare(JSON.parse(reader.result));
|
|
};
|
|
reader.readAsText(event.data);
|
|
} else {
|
|
recreateOtherSquare(JSON.parse(event.data));
|
|
}
|
|
};
|
|
|
|
ws.onerror = function (error) {
|
|
console.log('WebSocket Error: ' + error);
|
|
};
|
|
}
|
|
|
|
function sendSquareDetails(ws) {
|
|
const square = document.querySelector('.square');
|
|
const rect = square.getBoundingClientRect();
|
|
const details = {
|
|
width: rect.width,
|
|
height: rect.height,
|
|
x: window.screenX + rect.left,
|
|
y: window.screenY + rect.top
|
|
};
|
|
ws.send(JSON.stringify(details));
|
|
}
|
|
|
|
function recreateOtherSquare(details) {
|
|
let otherSquare = document.getElementById('other-square');
|
|
if (!otherSquare) {
|
|
otherSquare = document.createElement('div');
|
|
otherSquare.id = 'other-square';
|
|
otherSquare.className = 'square-2';
|
|
document.body.appendChild(otherSquare);
|
|
}
|
|
|
|
otherSquare.style.width = `${details.width}px`;
|
|
otherSquare.style.height = `${details.height}px`;
|
|
otherSquare.style.position = 'fixed';
|
|
otherSquare.style.left = `${details.x - window.screenX}px`;
|
|
otherSquare.style.top = `${details.y - window.screenY}px`;
|
|
}
|