Jak skutecznie rejestrować wpisywanie użytkowników za pomocą javascript?

Question

Chciałbym móc nagrywać, a następnie odtwarzać, co się stało w obszarze tekstowym.

Natknąłem się na niektóre rozwiązania, ale nie są one niezawodne, jak wysyłanie każdego klawisza za pośrednictwem AJAX. W takim przypadku będę miał miliony wierszy w moim DB.

Pomysł, który miałem na myśli, to rejestrowanie naciśnięć klawiszy w zmiennej po stronie klienta, aktualizowanie tej zmiennej za pomocą akcji, ale śledzenie czasu między każdym naciśnięciem klawisza. Upewniając się, że obsługuje również usuwanie danych.

Na koniec wyślę całą tę zmienną do bazy danych, a następnie będę mógł ją później odkodować.

mapa myśli, co zmienna będzie wyglądać następująco:

hellooo[1.2][backspace][0.6][backspace]World![return] 
Idle time __^  Removes one char __^ 

wierzę, że Dokumenty Google robi coś podobnego do odtworzenia co użytkownicy byli pisania.

Jakieś pomysły?

Answer 1

Na szczęście zdarzenia JavaScript już zajmują się wszystkimi problemami z kodowaniem. Możesz po prostu rzucić cały obiekt zdarzenia, który keyup/keydown/keypress/cokolwiek było bezpośrednio w tablicy.

Każdy obiekt zawiera:

• Rodzaj zdarzenia
• Datownik
• Co klucz został wykorzystany (lub kombinacja klawiszy)
• Jaki był ostry
• kilka innych rzeczy, które mogą zakończyć być użytecznym.

Następnie można po prostu zakodować tablicę i wysłać ją ulubioną metodą ajax do serwera do przechowywania.

Twój kod potrzebuje tylko funkcji, która może przechowywać dane. Nie używaj tej dokładnej funkcji tylko do celów demonstracyjnych.

var handler = function (e) { 
    handler.data.push(e); 
    console.log(handler.data); 
} 
handler.data = []; 

window.addEventListener("keyup", handler); 
window.addEventListener("keydown", handler); 
window.addEventListener("keypress", handler); 

Ponieważ jest to tablica, wszystkie one powinny być w porządku, ale w dziwnym wypadku to goofs, masz dane znacznika czasu każdego zdarzenia (które również pozwala dowiedzieć się opóźnienie pomiędzy zdarzeniami, które jest AWESOME jeśli masz mieszane naciśnięcia klawiszy).

Możesz następnie odtwarzać wydarzenia, ale chcesz je zaprojektować - ale teraz nie musisz wymyślać własnej specyfikacji, ponieważ urocze fokes na w3c wykonały dla ciebie całą ciężką pracę, kiedy zaprojektowały specyfikację zdarzenia DOM.

Answer 2

Bazy danych są tworzone w celu obsługi milionów rekordów, więc nie stanowi to problemu.

Jeśli nadal nie chcesz tego zrobić, możesz zakodować wszystkie dane związane z sesją jako JSON i zapisać je w polu tekstowym w bazie danych lub jako plik na serwerze. W takim przypadku, jeśli dane są naprawdę duże, załadowanie danych i wysłanie ich do przeglądarki może zająć trochę czasu, powodując opóźnienie dla użytkownika.

Answer 3

Zapisuj czas każdej akcji i jej wynik, a kiedy skończysz serializować log i zapamiętaj go.
Powtarzanie każdej czynności jest zbyt skomplikowane. Powiedzmy, że użytkownik cofa kilka znaków i dodaje nowe. Będziesz musiał śledzić pozycję kursora.
Po prostu zapamiętaj całą wartość textarea dla każdego klawisza. Nie ma potrzeby, aby pamiętać, jak to się stało?

Oto realizacja. fiddle

<textarea id="recorder"></textarea> 
<textarea id="playback"></textarea> 

<script type="text/javascript"> 

var Playback = { 
    //store the time an action occured and the resulting state in an object 
    //don't use an array because they are not sparce - interstitial keys 
    //will have to be iterated over 
    record: {}, 
    init: function(recorderId, playbackId) { 
     this.recorder = document.getElementById(recorderId); 
     this.playback = document.getElementById(playbackId); 

     this.recorder.addEventListener('focus', function() { 
      Playback.record = {}; 
      this.value = ''; 
     }, false); 

     this.recorder.addEventListener('keyup', function(e) { 
      Playback.record[ (new Date()).getTime() ] = this.value; 
     }, false); 

     this.recorder.addEventListener('blur', function(e) { 
      Playback.playback.value = ''; 
      //store the time the sequence started 
      //so that we can subtract it from subsequent actions 
      var mark = null; 
      for(var t in Playback.record) { 
       if(mark) { 
        var timeout = t - mark; 
       } else { 
        var timeout = 0; 
        mark = t; 
       } 
       // We need to create a callback which closes over the value of t 
       // because t would have changed by the time this is run 
       setTimeout(Playback.changeValueCallback(Playback.record[t]), timeout); 
      } 
     }, false); 

    }, 

    changeValueCallback: function(val) { 
     return function() { Playback.playback.value = val } 
    } 
} 

Playback.init('recorder', 'playback'); 

</script> 

Zastrzeżenie: Manipulacja wydarzenie tylko dla przeglądarek zgodnych, trzeba by pomieścić internet explorer sam