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

Question

[FANTASANTA]

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

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

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

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

А те, кто имеют возможность посказать мне, пожалуйста, не проходите мимо.

Answer 1

[Ильдар]

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

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

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

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

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

Как то так, наверное.

Comments

[FANTASANTA]

На самом деле, до того, как я задал этот вопрос, у меня уже была такая картина, похожая на вашу. Но я решил задать вопрос, чтобы услышать других, возможно, у кого-то уже был опыт.

На данный момент я уже все разработал, примерно так же, как вы описали)

Answer 2

[Владимир Коротенко]

Скролить документ можно

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

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

Comments

[FANTASANTA]

Ну конечно же я не об этом!
Меня интересует, как двигать курсором пользователя, что бы два пользователя могли перемешать друг-другу курсоры. Такая реализация есть в Skyeng. По моему еще в jivosite.

[Владимир Коротенко]

FANTASANTA,

https://stackoverflow.com/questions/4752501/move-t...

Тут это обсуждается.
В общем случае это не возможно. Так как это дыра в безопасности размером в ГрандКаньон

[FANTASANTA]

Владимир Коротенко, Вам говорят это возможно! Я студент в Skyeng! Там учитель передвигает курсор и кликает на любой объект за меня, точно так же он видит, когда я передвигаю свой курсор.
Не зная точно, я бы вам посоветовал не убедить в этом других.

[Владимир Коротенко]

FANTASANTA, Вы видимо не совсем понимаете что видите. Курсор двигать даже из доверенного источника дыра в безопасности

[FANTASANTA]

Владимир Коротенко, Запишитесь на бесплатный пробный урок, вы сами все увидите)