Сериализация / зеркальное отображение событий мыши / касания JavaScript - PullRequest
Новая
       10

Сериализация / зеркальное отображение событий мыши / касания JavaScript

2 голосов
/ 23 ноября 2011

Я бы хотел отразить события JavaScript мыши / касания между двумя браузерами, в идеальном случае сериализовав их и отправив из браузера A в браузер B. Кажется, что объект события мыши содержит циклические ссылки и поэтому не сериализуем.

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

Учитывая, что событие ссылается на локальные объекты DOM, вполне возможно, что при использовании мыши илисенсорные события не путь.Любые советы / идеи приветствуются.

Ответы [ 2 ]

2 голосов
/ 23 ноября 2011

Скорее всего, вам нужно выбрать набор свойств, переменных и т. Д., Которые вы хотите передать. Храните их в объектном литерале, который можно сериализовать. Поскольку вы строите объект самостоятельно, вы можете контролировать циклические ссылки.

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

Я мог бы предложить посмотреть что-то вроде Backbone.js. Он предоставляет некоторые интересные функции, такие как наблюдение ключ / значение, которые могут быть полезны для вас.

Кроме того, это звучит как приложение, для которого будет очень полезен node.js. Поскольку он также поддерживает Backbone, вы можете создать среду js клиента и сервера, которая будет отражать друг друга в терминах событий, переменных и т. Д. Когда пользователь на iPad делает что-то, обновляющее модель клиента, эти изменения могут быть сериализованы и отправлены. на сервер узла. Затем он обновит свое внутреннее представление модели клиента и передаст эти изменения другим клиентам, используя что-то вроде socket.io.

1 голос
/ 23 ноября 2011

Мне кажется, у вас есть две отдельные проблемы:

  1. Как захватывать и сериализовать события мыши. Это довольно просто.
  2. Как заново создать эти события мыши в другом контексте. Это сложно.

Даже без использования библиотеки, такой как jQuery, захват событий мыши довольно прост (особенно если, как вы подразумеваете, вы можете быть уверены в том, что браузер будет использоваться клиентом). Все, что вам нужно сделать, это прослушать событие, получить необходимую информацию и отправить ее через транспортный уровень, например, 

document.body.addEventListener('click', function(e) {
    sendToOtherBrowser({ type: 'click', pageX: e.pageX, pageY: e.pageY });
}, false);

Я не знаю, что для большинства событий вам понадобится гораздо больше, чем тип и местоположение события. Сложнее всего взять эти данные о событии и заново создать их в другом месте. Чтобы сделать это, как я думаю, вы заметили, вам нужно:

  1. захват e.target а
  2. придумает сериализуемый уникальный идентификатор для элемента DOM
  3. отправить идентификатор с данными вашего события
  4. используйте уникальный идентификатор, чтобы получить ссылку на элемент DOM в другом браузере
  5. использовать что-то вроде myUniqueElement.dispatchEvent для воссоздания события

Я бы сказал, что (2) и (4) - это сложные части - вы можете взглянуть на эти связанные вопросы для идей. Для (5) вы можете взглянуть на примеры моделирования событий здесь .

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

...