@FANTASANTA

Как сделать совместный просмотр и управление файлом двух пользователей?

Есть два пользователя на одной странице - один из них открывает на этой же странице, допустим, PDF файл с возможность листать страницы - в то же время, второй пользователь следит за этим и видит как появляется файл, меняются страницы для просмотра а так же видит позицию мышки над файлом в соответствии позиции мышки первого пользователя.

Пример данной реализации есть в Skyeng - слева видеозвонок со студентом, справа блок, где меняется контент для обучения и видна позиция мышки.

Меня интересуется картинка разработки, пожалуйста, проясните мне, в какую сторону копать для изучения. Как это реализуется?
Просто передавать по websocket'у позицию мышки?) а так же все клики и события над определенным объектом?

P.S. Я уже задавался такого рода вопросом, супер мамкины умнички просто давали мне ссылку в гугл с запросом websocket. Я знаю вам это будет трудно, но пройдите мимо, если не хотите мне помочь!

А те, кто имеют возможность посказать мне, пожалуйста, не проходите мимо.
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 2
vistoyn
@vistoyn
программист
Как идея.
1) PDF разбивается на сервере на картинки.
2) Отображается конкретная картинка.
3) Когда клиент нажимает следующий слайд, отправляется запрос на сервер, а там через websocket всем подключенным клиентам приходит сообщения о том, что слайд сменился. Приходит конкретный номер текущего слайда.
4) Мышка у всех прячется и показывается виртуальный курсор на сайте (img картинка курсора).
5) Если модератор двигает курсором, это отслеживается через событие mousemove, на сервер отправляется координаты сдвинутого виртуального курсора, и затем все клиентам рассылается новое смещение курсора.
6) Клиент получает новую позицию и запускает анимацию движения курсора.

С картинкой курсора можно играться. Можно сделать так, кто двигает мышкой, тот и управляет виртуальным курсором. Координаты виртуального курсора, должны совпадать с координатами реального, кто двигает. Конечно если двигать начнет другой, то курсор переместится на новое место. Можно плавную анимацию сделать.

Спрятать курсор можно через CSS cursor: none;

Есть вебсокеты, а есть еще WebRTC. Это p2p коммуникация в реальном времени. Можно отсылать клиентам json сообщения где находится курсор, кто им управляет и какой номер слайда pdf презентации. Но для WebRTC все равно нужен будет сервер с ajax или вебсокетами.

Через WebRTC можно сделать видеосвязь.

Как то так, наверное.
Ответ написан
firedragon
@firedragon
Senior .NET developer
Скролить документ можно

window.scrollTo({
    top: 1000,
    behavior: "smooth"
})


Кроме этого можно ставить и виртуальный курсор.
А вот с кликами сложнее.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы