Si quieres hacerlo de manera temporal, sin guardar datos en la BD, es decir, solo JS, podrías guardar el tiempo en el cual se publica cada mensaje en un pseudo-atributo dentro del elemento en el que muestras a cada mensaje. Luego, con un temporizador, vas restando el tiempo actual con cada uno de los tiempos guardados y muestras la diferencia.
Un pequeño ejemplo:
Código Javascript
:
Ver originalvar textarea = document.querySelector("textarea"),
button = document.querySelector("button"),
div = document.querySelector("div");
button.addEventListener("click", function(){
if (textarea.value.length){
var p = document.createElement("p"),
span = document.createElement("span");
p.innerHTML = textarea.value.replace(/\n+/g, "<br />");
p.setAttribute("data-time", new Date().getTime());
p.appendChild(span);
div.appendChild(p);
textarea.value = null;
textarea.focus();
}
}, false);
setInterval(function(){
var par = div.querySelectorAll("p"),
len = par.length;
for (var i = 0; i < len; i++){
var now = new Date().getTime(),
then = par[i].getAttribute("data-time"),
diff = ((now - then) / 1000) / 60,
span = par[i].querySelector("span");
span.innerHTML = diff.toFixed() + " minutes ago";
}
}, 60000);
Cuando pulso el botón para publicar el mensaje, verifico primero que se haya escrito un mensaje (aunque también podrías deshabilitar al botón y habilitarlo cuando se pulse una tecla teniendo el área de texto el enfoque y luego de verificar que tenga contenido) y si esta condición se cumple, creo un párrafo, en el que mostraré el mensaje escrito y un
<span>, en donde mostraré el tiempo transcurrido desde la publicación del mensaje. Asigno el contenido del área de texto al párrafo, en el cual reemplazo los saltos de línea por elementos
<br /> para que estos sean visibles en el párrafo, creo un pseudo-atributo
data-time y le asigno el tiempo actual en milésimas de segundo. Añado el
<span> creado al párrafo y este al
<div>. Por último, elimino el contenido del área de texto y le doy el enfoque para seguir escribiendo mensajes.
Luego, establezco un temporizador que ejecutará una función cada 60000 milésimas de segundo, lo cual equivale a 60 segundos o 1 minuto. En dicha función, tomo a la colección de párrafos contenidos en el
<div> y calculo el total que estos representan, luego, con ayuda de un bucle, recorro a dicha colección. En cada iteración, tomo el tiempo actual en milésimas de segundo, el tiempo guardado en el pseudo-atributo
data-time del párrafo actual en la iteración, resto ambas cantidades, tomo al
<span> del párrafo y le asigno como contenido el resultado de la resta anterior sin decimales y un texto complementario.
Puedes personalizar esto, por ejemplo, que el temporizador se ejecute en intervalos mayores o menores o que no se muestre la diferencia en minutos sino en segundos u horas o que el tiempo transcurrido se muestre inmediatamente después de publicar el mensaje. Eso lo decides tú. También te sugiero utilizar identificadores para cada elemento, así no habrán conflictos con otros elementos similares, además de validar el texto escrito.
DEMO
Saludos
. 
y luego restas al tiempo local el resultado anterior. 
