Есть ли библиотека JavaScript для захвата событий мыши / клавиатуры и отправки их на внешний сервер? - PullRequest
4 голосов
/ 28 ноября 2011

Мне нужно что-то, что:

  • может перехватывать все события клавиатуры
  • может перехватывать все события мыши (щелчки, движения)
  • может перехватывать прокрутку страницывозможно, заботясь о различиях в браузерах
  • отправка данных на внешний сервер с использованием JSONP (или чего-либо еще, но должна работать не только в новейших браузерах)
  • довольно мала, не более xx кБ Iнадеюсь

Я хотел бы найти что-то, что по крайней мере 3 из вышеупомянутых реализовано должным образом.Я также могу посмотреть на js-фреймворки, такие как Dojo или JQuery, если они могут мне помочь, но смогу ли я сохранить его достаточно маленьким?

Ответы [ 3 ]

9 голосов
/ 29 ноября 2011

Как насчет того, чтобы написать это самостоятельно?:) Давайте рассмотрим этот простой код jquery:

поместите его в свой

    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('html').mousemove(function(event){
                console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
            });
            $('html').click(function(event){
                console.log("mouse click X:"+event.pageX+" Y:"+event.pageY);
            });
            $('html').keyup(function(event){
                console.log("keyboard event: key pressed "+event.keyCode);
            });
        });
    </script>

Если вы зайдете в Firefox Firebug или в IE / Chrome developer tools / javascript console, выувидим все значения.Вам нужно будет реализовать простой объект события с нужными вам данными и какой-то механизм для публикации собранных данных каждые пару секунд (с помощью jquery post или ajax-метода и объекта JSON)

Суммирование:

  • все события клавиатуры?да (нажатие клавиши)
  • движение мыши и щелчки?да
  • может поймать прокрутку страницы?doable
  • возможно, заботиться о различиях в браузерах - это главная цель jquery
  • отправлять данные на внешний сервер с помощью JSONP?конечно, просто используйте $ .ajax или $ .post
  • довольно мало, самое большее, xx кБ. Надеюсь - jquery сам по себе составляет около 31 Кб.вам понадобится серверная часть (простая страница php / asp.net mvc для десериализации json и сохранения ее в db / xml, в зависимости от того, что вам нужно), и вы готовы к работе:)

    согласно комментарию ниженасчет группировки данных - очень хороший момент.Изменение события .mousemove на:

                $('html').mousemove(function(event){
                    console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
                    var color = 'red';
                    var size = '2px';
                    $("body").append(
                        $('<div></div>')
                            .css('position', 'absolute')
                            .css('top', event.pageY + 'px')
                            .css('left', event.pageX + 'px')
                            .css('width', size)
                            .css('height', size)
                            .css('background-color', color)
                    );
                });
    

    упростит представление о том, сколько данных будет - каждая точка будет представлять собой один POST для удаленного сервера

0 голосов
/ 19 сентября 2012
0 голосов
/ 28 ноября 2011

Этот вопрос звучит как XY Проблема . Я думаю, что вы на самом деле ищете систему, которая позволит вам регистрировать пользовательские события в веб-браузере и сообщать об этих событиях. Обычно этот тип функциональности существует не как частичный продукт, а как законченное решение. Единственное известное мне решение, позволяющее отслеживать этот тип и предоставлять отчеты, - Adobe Omniture (из личного опыта). Что на момент написания этой статьи, веб-сайт, кажется, не работает.

...