जावास्क्रिप्ट का उपयोग कर उपयोगकर्ता टाइपिंग को कुशलता से रिकॉर्ड करने के लिए कैसे करें?

Question

मैं टेक्स्टरेरा में जो भी हुआ, उसके बाद रिकॉर्डबैक रिकॉर्ड करने में सक्षम होना चाहता हूं।

मैं कुछ समाधानों में आया हूं लेकिन वे विश्वसनीय नहीं हैं, जैसे कि प्रत्येक कीस्ट्रोक AJAX के माध्यम से भेजना। उस स्थिति में मैं अपने डीबी में लाखों पंक्तियों को समाप्त कर दूंगा।

मुझे लगता है कि मुझे लगता है कि क्लाइंट पक्ष में एक चर के लिए कीस्ट्रोक लॉग करना है, उस चर को क्रिया के साथ अद्यतन करना, लेकिन प्रत्येक कीस्टोक के बीच समय का ट्रैक रखना। यह भी सुनिश्चित करना कि यह डेटा को हटाने का भी समर्थन करता है।

अंत में मैं इस पूरे चर को डीबी में एक बार भेजूंगा, फिर मैं इसे बाद में प्लेबैक के लिए डीकोड कर सकता हूं।

मन क्या चर कैसा दिखेगा का नक्शा:

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

मुझे विश्वास है कि गूगल डॉक्स प्लेबैक करने के लिए जो कुछ भी उन टाइपिंग रहे थे ऐसा ही कुछ कर रही है।

कोई विचार?

Answer 1

सौभाग्य से जावास्क्रिप्ट ईवेंट पहले से ही आपके लिए सभी एन्कोडिंग समस्याओं का ख्याल रखता है। आप बस पूरे ईवेंट ऑब्जेक्ट को टॉस कर सकते हैं कि एक कीप/कीडाउन/कीप्रेस/जो भी सरणी में सीधे था।

प्रत्येक वस्तु में शामिल हैं:

• घटना का प्रकार
• टाइमस्टैम्प
• क्या कुंजी इस्तेमाल किया गया था (या कुंजी के संयोजन)
• क्या ध्यान में
• कुछ अन्य सामान था खत्म हो सकता है कि उपयोगी हो रहा है।

आप फिर सरणी को एन्कोड कर सकते हैं और इसे स्टोरेज के लिए सर्वर पर अपने पसंदीदा AJAX विधि के साथ भेज सकते हैं।

तो आपके कोड को केवल उस फ़ंक्शन की आवश्यकता है जो डेटा स्टोर कर सके। इस सटीक फ़ंक्शन का उपयोग न केवल प्रदर्शन उद्देश्यों के लिए करें।

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); 

चूंकि यह एक सरणी है, वे सब क्रम में होना चाहिए, लेकिन अजीब घटना यह goofs में, आप प्रत्येक घटना पर टाइमस्टैम्प डेटा (जो भी आप घटनाओं के बीच देरी है, जो कमाल है यह पता लगाने की सुविधा देता है है यदि आपके पास मिश्रित कीप्रेस हैं।)।

फिर आप ईवेंट को फिर से चला सकते हैं, हालांकि आप उन्हें डिज़ाइन करना चाहते हैं - लेकिन अब आपको अपनी खुद की कल्पना का आविष्कार नहीं करना है क्योंकि डब्ल्यूओएमसी के प्यारे फोकस ने आपके लिए सभी कड़ी मेहनत की है जब उन्होंने डोम इवेंट स्पेक बनाया है।

Answer 2

डेटाबेस लाखों रिकॉर्डों को संभालने के लिए बनाए जाते हैं, इसलिए यह वास्तव में कोई समस्या नहीं है।

यदि आप अभी भी ऐसा नहीं करना चाहते हैं तो आप JSON के रूप में सत्र से संबंधित सभी डेटा एन्कोड कर सकते हैं और डेटाबेस में किसी टेक्स्ट फ़ील्ड में या सर्वर पर फ़ाइल के रूप में संग्रहीत कर सकते हैं। इस मामले में यदि डेटा वास्तव में बड़ा है तो डेटा लोड करने में कुछ समय लग सकता है और इसे ब्राउज़र पर भेज सकता है, जिससे उपयोगकर्ता के लिए देरी हो सकती है।

Answer 3

प्रत्येक कार्रवाई का समय और उस क्रिया के परिणाम को स्टोर करें और जब आप समाप्त कर लें तो लॉग को व्यवस्थित करें और उसे स्टोर करें।
प्रत्येक कार्य को व्यक्तिगत रूप से फिर से चलाने के लिए यह जटिल है। मान लें कि उपयोगकर्ता कुछ पात्रों को वापस ले जाता है और वहां नए जोड़े को जोड़ता है। आपको कर्सर की स्थिति का ट्रैक रखने की आवश्यकता होगी।
बस प्रत्येक कीस्ट्रोक के लिए टेक्स्टरेरा के पूरे मान को याद रखें। याद रखने की कोई आवश्यकता नहीं है कि यह कैसे हुआ?

यहां एक कार्यान्वयन है। 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> 

चेतावनी: घटना से निपटने केवल अनुरूप ब्राउज़र के लिए है, तो आप अपने आप को