rabet · November 2, 2015 18:40
diff --git a/typing-indicator.html b/typing-indicator.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="live typing indicator">
 <script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
  <meta charset="utf-8">
  <title>Live Typing Indicator</title>
 </head>
 <body>
  <ul id='typers'>
  </ul>
  <textarea cols="60" rows="20" id='input'></textarea>

 <script>
 var ref = new Firebase('https://types.firebaseio-demo.com');
 var input = document.getElementById('input');
 var typers = document.getElementById('typers');
 var uid = Date.now(); // generate a fake user id
 var timer;

 // attach a listener that display all people current typing in a list
 ref.on('value', function(snapshot) {
  typers.innerText = '';
  snapshot.forEach(function(typer) {
    var li = document.createElement('li');
    li.innerText = typer.key();
    typers.appendChild(li);
  });
 });

 // whenever the content of the textarea changes
 input.addEventListener('input',function(e) {
  // mark this user a "typing"
  ref.child(uid).set(true);
  // if we're counting down, stop the timer
  if (timer) clearTimeout(timer);
  // remove this user in 2 seconds
  timer = setTimeout(function() {
    ref.child(uid).remove();
  }, 2000);
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="live typing indicator">
	<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
	<meta charset="utf-8">
	<title>Live Typing Indicator</title>
	</head>
	<body>
	<ul id='typers'>
	</ul>
	<textarea cols="60" rows="20" id='input'></textarea>

	<script>
	var ref = new Firebase('https://types.firebaseio-demo.com');
	var input = document.getElementById('input');
	var typers = document.getElementById('typers');
	var uid = Date.now(); // generate a fake user id
	var timer;

	// attach a listener that display all people current typing in a list
	ref.on('value', function(snapshot) {
	typers.innerText = '';
	snapshot.forEach(function(typer) {
	var li = document.createElement('li');
	li.innerText = typer.key();
	typers.appendChild(li);
	});
	});

	// whenever the content of the textarea changes
	input.addEventListener('input',function(e) {
	// mark this user a "typing"
	ref.child(uid).set(true);
	// if we're counting down, stop the timer
	if (timer) clearTimeout(timer);
	// remove this user in 2 seconds
	timer = setTimeout(function() {
	ref.child(uid).remove();
	}, 2000);
	});
	</script>
	</body>
	</html>