Синхронизация в реальном времени перетаскиваемых изображений на холсте для рисования
Я работаю над приложением для рисования с использованием HTML5 Canvas, JavaScript и Socket.IO. Создатель комнаты может рисовать на холсте, а рисунки обновляются в режиме реального времени для других пользователей в комнате. Создатель также может добавлять и перетаскивать изображения PNG на холст. Однако у меня возникают проблемы с синхронизацией новых позиций перетаскиваемых изображений в режиме реального времени для других пользователей в комнате.
Вот соответствующий код:
Client-side:
function onMouseMove(e) {
// ...
if (isCreator()) {
const selectedImage = placedImages.find((img) => img.selected);
if (selectedImage) {
selectedImage.x = mouseX - offsetX;
selectedImage.y = mouseY - offsetY;
requestAnimationFrame(redrawCanvas);
}
}
}
function onMouseUp(e) {
drawing = false;
socket.emit('mouseUp', { sessionId });
if (isCreator()) {
const selectedImage = placedImages.find((img) => img.selected);
if (selectedImage) {
selectedImage.selected = false;
socket.emit('updateImagePosition', { id: selectedImage.id, x: selectedImage.x, y: selectedImage.y });
}
}
}
socket.on('updateImagePosition', ({ id, x, y }) => {
const image = placedImages.find((img) => img.id === id);
if (image) {
image.x = x;
image.y = y;
requestAnimationFrame(redrawCanvas);
}
});
Server-side (Socket.IO):
function updateImage(socket, data) {
const roomID = findRoomByCreator(socket.id);
if (!roomID) return;
const image = rooms[roomID].drawingData.find((img) => img.type === 'image' && img.id === data.id);
if (image) {
image.x = data.x;
image.y = data.y;
socket.to(roomID).emit('updateImage', data);
}
}
В этой реализации создатель комнаты может перетаскивать изображения, но другие пользователи видят новые позиции изображения только после обновления страницы.
Как я могу синхронизировать новые позиции перетаскиваемых изображений в хранилище реального времени для всех пользователей в комнате?