Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 2 (Final)

Nube Colectiva

hace 4 años

En esta página:

Demo Github

En este Post continuaremos con la parte anterior llamada Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 1, en donde creamos un nuevo proyecto, instalamos las dependencias necesarias para que el proyecto funcione correctamente y creamos el servidor en Node JS, en esta segunda y última parte vamos a crear las funcionalidades del Chat y la vista o interface HTML.

Partes

Parte 1
Parte 2 (Final – Código Fuente GitHub)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Que es y Como instalar Node JS
5 Principales Frameworks para Node JS
Puedes leer más en la categoría Node JS.

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa” :

Spotify:	Sound Cloud:

Bien ahora continuemos con el Post: Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 2 (Final).

Vamos a crear las funcionalidades que para el chat, para esto creo un nuevo archivo llamada chat.js en el mismo directorio en donde se encuentra los demás archivos de mi proyecto.


/chat_node_js_socket_io 
  ├── /node_modules 
  ├── chat.js // Creo este Archivo   
  ├── package-lock.json
  ├── package.json
  ├── server.js

/chat_node_js_socket_io

├── /node_modules

├── chat.js // Creo este Archivo

├── package-lock.json

├── package.json

├── server.js

Abro el archivo chat.js y declaro las siguientes variables.


// Declaramos las siguientes variables 
var socket = io();
var usuario;
var escribiendo = false;
var timeout = undefined;

// Declaramos las siguientes variables

var socket = io();

var usuario;

var escribiendo = false;

var timeout = undefined;

Luego creo el método configurarNombreUsuario() el cual usaré para configurar los nombres de los usuarios en el chat.


// Crear nombre de usuario 
function configurarNombreUsuario(){
    socket.emit('configurarNombreUsuario', $('#item').val());
}

// Crear nombre de usuario

function configurarNombreUsuario(){

socket.emit('configurarNombreUsuario', $('#item').val());

}

Paso seguido creo una función jQuery con el método .ready() en donde realizaré determinada funcionalidades.


$(document).ready(function(){
    // Acá va el código 
});

$(document).ready(function(){

// Acá va el código

});

Lo primero que haré es detectar si el usuario presionó la tecla ENTER luego de escribir su nombre y tras esto que llame al método configurarNombreUsuario().

Luego que el usuario crear su nombre de usuario, este ingresa a la sala del chat y le mostramos una caja de texto en donde escribirá los mensajes y un botón para enviar los mensajes.

Paso seguido con el método keypress(), de jQuery detectamos que el usuario este escribiendo un mensaje y preparamos el texto “Usuario esta escribiendo…” que será mostrado al usuario que se encuentra en otra ventana del chat.

Entonces al usuario que tiene la ventana activa, el cual esta escribiendo un mensaje, le ocultamos el texto “Usuario esta escribiendo…” y mas bien se lo mostramos al usuario que se encuentra en la otra ventana del chat.


$(document).ready(function(){

    // Si el usuario presiona la tecla ENTER luego de escribir su nombre de usuario
    // llamamos al método configurarNombreUsuario() 
    $('#item').keydown(function (e){
        if(e.keyCode == 13){
            configurarNombreUsuario();
        }
    })

    // Configuración para que el usuario pueda enviar mensajes en el chat 
    socket.on('configurarUsuario', (datos)=>{
        usuario = datos.nombreusuario;
        console.log(usuario);
        $("#nombreusuario").html("<label class='txt_negrita'>Escribe un Mensaje:</label>");
        $("#item").val("");
        $("#item").attr("placeholder", "");
        
        $("#enviar").attr("onclick", "enviarMensaje()");
        $("#enviar").attr("value", "Enviar");         

        // Mostramos los mensajes del usuario en el chat 
        obtenerMensajes();
    });

    // Hacemos uso del método 'keypress' de jQuery que detecta si el usuario esta escribiendo en el chat
    // y mostramos el mensaje 'Usuario esta escribiendo...' al otro usuario 
    $('#item').keypress((e)=>{
    
        if($("#item").attr("placeholder") != "Nombre de Usuario:"){

            if(e.which != 13){
                escribiendo = true;
                socket.emit('escribiendo', {usuario:usuario, escribiendo:true});
                clearTimeout(timeout);
                timeout = setTimeout(finTiempoEscritura, 100);
            }
            else {
                clearTimeout(timeout);
                finTiempoEscritura();
                enviarMensaje();
            }
        }

    });

    // Si un usuario esta escribiendo un mensaje, mostramos al otro usuario
    // el texto 'Usuario esta escribiendo...'
    socket.on('display', (datos)=>{

        if(datos.escribiendo == true) {

            // Detectamos la ventana del chat activa 
            // y cuando usuario esta escribiendo su mensaje, le ocultamos el texto 'Usuario esta escribiendo...'           
            if (document.hasFocus()) {
                $('.escribiendo').hide();
            }
            else {
                $('.escribiendo').show(); 
            }

            
        }
        else {
            // Si aún no se crea un nombre de usuario, ocultamos el texto 'Usuario esta escribiendo...' 
            if(usuario == undefined){
                $('.escribiendo').text("");
            }
            else {    
                // Al otro usuario le mostramos el texto 'Usuario esta escribiendo...'                                                
                $('.escribiendo').text(`${datos.usuario} esta escribiendo...`);
                setTimeout(function() {
                    $('.escribiendo').fadeOut('fast');
                }, 1500)                
            }
        }
    });
});

$(document).ready(function(){

// Si el usuario presiona la tecla ENTER luego de escribir su nombre de usuario

// llamamos al método configurarNombreUsuario()

$('#item').keydown(function (e){

if(e.keyCode == 13){

configurarNombreUsuario();

}

})

// Configuración para que el usuario pueda enviar mensajes en el chat

socket.on('configurarUsuario', (datos)=>{

usuario = datos.nombreusuario;

console.log(usuario);

$("#nombreusuario").html("<label class='txt_negrita'>Escribe un Mensaje:</label>");

$("#item").val("");

$("#item").attr("placeholder", "");

$("#enviar").attr("onclick", "enviarMensaje()");

$("#enviar").attr("value", "Enviar");

// Mostramos los mensajes del usuario en el chat

obtenerMensajes();

});

// Hacemos uso del método 'keypress' de jQuery que detecta si el usuario esta escribiendo en el chat

// y mostramos el mensaje 'Usuario esta escribiendo...' al otro usuario

$('#item').keypress((e)=>{

if($("#item").attr("placeholder") != "Nombre de Usuario:"){

if(e.which != 13){

escribiendo = true;

socket.emit('escribiendo', {usuario:usuario, escribiendo:true});

clearTimeout(timeout);

timeout = setTimeout(finTiempoEscritura, 100);

}

else {

clearTimeout(timeout);

finTiempoEscritura();

enviarMensaje();

}

});

// Si un usuario esta escribiendo un mensaje, mostramos al otro usuario

// el texto 'Usuario esta escribiendo...'

socket.on('display', (datos)=>{

if(datos.escribiendo == true) {

// Detectamos la ventana del chat activa

// y cuando usuario esta escribiendo su mensaje, le ocultamos el texto 'Usuario esta escribiendo...'

if (document.hasFocus()) {

$('.escribiendo').hide();

}

else {

$('.escribiendo').show();

}

else {

// Si aún no se crea un nombre de usuario, ocultamos el texto 'Usuario esta escribiendo...'

if(usuario == undefined){

$('.escribiendo').text("");

}

else {

// Al otro usuario le mostramos el texto 'Usuario esta escribiendo...'

$('.escribiendo').text(`${datos.usuario} esta escribiendo...`);

setTimeout(function() {

$('.escribiendo').fadeOut('fast');

}, 1500)

}

});

Luego obtenemos los mensajes en tiempo real en el chat.


// Obtenemos los mensajes en tiempo real 
socket.on('mensaje',obtenerMensajes);

// Obtenemos los mensajes en tiempo real

socket.on('mensaje',obtenerMensajes);

Cuando un usuario deja de escribir, ocultamos el texto “Usuario esta escribiendo…”


// Dejamos de mostrar el mensaje 
function finTiempoEscritura(){
    escribiendo = false;
    socket.emit('escribiendo', {usuario:usuario, escribiendo:false});
}

// Dejamos de mostrar el mensaje

function finTiempoEscritura(){

escribiendo = false;

socket.emit('escribiendo', {usuario:usuario, escribiendo:false});

}

Creo un método con el nombre obtenerMensajes() para mostrar los mensajes en tiempo real en el chat, es decir muestro el nombre del usuario y su mensaje en la ventana del chat, asimismo hago que el scroll siempre este activo en el último mensaje enviado a la ventana del Chat, esto lo hago con los métodos .animate(), scrollTop() y .height() de jQuery.


// Obtenemos los mensajes para mostrarlos en el chat 
function obtenerMensajes(){
    
    $.getJSON("http://localhost:3000/mensajes/", (datos)=>{
        
        var mensaje = [];
        $.each(datos, (key, val) => {
            $.each(val, (key, val) => {
                var nombreusuario = key;
                var msg = val;

                // Mostramos en el chat el nombre de usuario y su mensaje que ha enviado 
                mensaje.push(`<strong>${nombreusuario}</strong><p>${msg}</p>`);
            });
        });
    
        // Mostramos los mensajes en el contenedor del Chat 
        $(".ventanachat").html(mensaje);

        // Mantenemos el scroll siempre activo en el último mensaje enviado al Chat 
        $(".ventanachat").animate({ scrollTop: $(document).height() }, "slow");
        return false;
    });

};

// Obtenemos los mensajes para mostrarlos en el chat

function obtenerMensajes(){

$.getJSON("http://localhost:3000/mensajes/", (datos)=>{

var mensaje = [];

$.each(datos, (key, val) => {

$.each(val, (key, val) => {

var nombreusuario = key;

var msg = val;

// Mostramos en el chat el nombre de usuario y su mensaje que ha enviado

mensaje.push(`<strong>${nombreusuario}</strong><p>${msg}</p>`);

});

// Mostramos los mensajes en el contenedor del Chat

$(".ventanachat").html(mensaje);

// Mantenemos el scroll siempre activo en el último mensaje enviado al Chat

$(".ventanachat").animate({ scrollTop: $(document).height() }, "slow");

return false;

});

};

Por último creo un método que envíe los mensajes en tiempo real al Chat, usando la ruta /enviar_mensaje


// Con este método enviamos el mensaje del usuario al Chat 
function enviarMensaje() {

    var nombreUsuario = usuario; 
    var mensaje = $('#item').val();

    if(nombreUsuario == undefined){
        var item = `{"Bienvenido: " : "${mensaje}"}`;
    }
    else {
        var item = `{"${nombreUsuario}" : "${mensaje}"}`;
    }

    $.post('/enviar_mensaje', JSON.parse(item), ()=>{
        console.log('mensaje enviado');
    });

    $('#item').val("");

}

// Con este método enviamos el mensaje del usuario al Chat

function enviarMensaje() {

var nombreUsuario = usuario;

var mensaje = $('#item').val();

if(nombreUsuario == undefined){

var item = `{"Bienvenido: " : "${mensaje}"}`;

}

else {

var item = `{"${nombreUsuario}" : "${mensaje}"}`;

}

$.post('/enviar_mensaje', JSON.parse(item), ()=>{

console.log('mensaje enviado');

});

$('#item').val("");

}

A continuación el código completo del archivo chat.js


// Declaramos las siguientes variables 
var socket = io();
var usuario;
var escribiendo = false;
var timeout = undefined;

// Crear nombre de usuario 
function configurarNombreUsuario(){
    socket.emit('configurarNombreUsuario', $('#item').val());
}


$(document).ready(function(){

    // Si el usuario presiona la tecla ENTER luego de escribir su nombre de usuario
    // llamamos al método configurarNombreUsuario() 
    $('#item').keydown(function (e){
        if(e.keyCode == 13){
            configurarNombreUsuario();
        }
    })

    // Configuración para que el usuario pueda enviar mensajes en el chat 
    socket.on('configurarUsuario', (datos)=>{
        usuario = datos.nombreusuario;
        console.log(usuario);
        $("#nombreusuario").html("<label class='txt_negrita'>Escribe un Mensaje:</label>");
        $("#item").val("");
        $("#item").attr("placeholder", "");
        
        $("#enviar").attr("onclick", "enviarMensaje()");
        $("#enviar").attr("value", "Enviar");         

        // Mostramos los mensajes del usuario en el chat 
        obtenerMensajes();
    });

    // Hacemos uso del método 'keypress' de jQuery que detecta si el usuario esta escribiendo en el chat
    // y mostramos el mensaje 'Usuario esta escribiendo...' al otro usuario 
    $('#item').keypress((e)=>{
    
        if($("#item").attr("placeholder") != "Nombre de Usuario:"){

            if(e.which != 13){
                escribiendo = true;
                socket.emit('escribiendo', {usuario:usuario, escribiendo:true});
                clearTimeout(timeout);
                timeout = setTimeout(finTiempoEscritura, 100);
            }
            else {
                clearTimeout(timeout);
                finTiempoEscritura();
                enviarMensaje();
            }
        }

    });

    // Si un usuario esta escribiendo un mensaje, mostramos al otro usuario
    // el texto 'Usuario esta escribiendo...'
    socket.on('display', (datos)=>{

        if(datos.escribiendo == true) {

            // Detectamos la ventana del chat activa 
            // y cuando usuario esta escribiendo su mensaje, le ocultamos el texto 'Usuario esta escribiendo...'           
            if (document.hasFocus()) {
                $('.escribiendo').hide();
            }
            else {
                $('.escribiendo').show(); 
            }

            
        }
        else {
            // Si aún no se crea un nombre de usuario, ocultamos el texto 'Usuario esta escribiendo...' 
            if(usuario == undefined){
                $('.escribiendo').text("");
            }
            else {    
                // Al otro usuario le mostramos el texto 'Usuario esta escribiendo...'                                                
                $('.escribiendo').text(`${datos.usuario} esta escribiendo...`);
                setTimeout(function() {
                    $('.escribiendo').fadeOut('fast');
                }, 1500)                
            }
        }
    });
});

// Obtenemos los mensajes en tiempo real 
socket.on('mensaje',obtenerMensajes);

// Dejamos de mostrar el mensaje 
function finTiempoEscritura(){
    escribiendo = false;
    socket.emit('escribiendo', {usuario:usuario, escribiendo:false});
}

// Obtenemos los mensajes para mostrarlos en el chat 
function obtenerMensajes(){
    
    $.getJSON("http://localhost:3000/mensajes/", (datos)=>{
        
        var mensaje = [];
        $.each(datos, (key, val) => {
            $.each(val, (key, val) => {
                var nombreusuario = key;
                var msg = val;

                // Mostramos en el chat el nombre de usuario y su mensaje que ha enviado 
                mensaje.push(`<strong>${nombreusuario}</strong><p>${msg}</p>`);
            });
        });
    
        // Mostramos los mensajes en el contenedor del Chat 
        $(".ventanachat").html(mensaje);

        // Mantenemos el scroll siempre activo en el último mensaje enviado al Chat 
        $(".ventanachat").animate({ scrollTop: $(document).height() }, "slow");
        return false;
    });

};

// Con este método enviamos el mensaje del usuario al Chat 
function enviarMensaje() {

    var nombreUsuario = usuario; 
    var mensaje = $('#item').val();

    if(nombreUsuario == undefined){
        var item = `{"Bienvenido: " : "${mensaje}"}`;
    }
    else {
        var item = `{"${nombreUsuario}" : "${mensaje}"}`;
    }

    $.post('/enviar_mensaje', JSON.parse(item), ()=>{
        console.log('mensaje enviado');
    });

    $('#item').val("");

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

// Declaramos las siguientes variables

var socket = io();

var usuario;

var escribiendo = false;

var timeout = undefined;

// Crear nombre de usuario

function configurarNombreUsuario(){

socket.emit('configurarNombreUsuario', $('#item').val());

}

$(document).ready(function(){

// Si el usuario presiona la tecla ENTER luego de escribir su nombre de usuario

// llamamos al método configurarNombreUsuario()

$('#item').keydown(function (e){

if(e.keyCode == 13){

configurarNombreUsuario();

}

})

// Configuración para que el usuario pueda enviar mensajes en el chat

socket.on('configurarUsuario', (datos)=>{

usuario = datos.nombreusuario;

console.log(usuario);

$("#nombreusuario").html("<label class='txt_negrita'>Escribe un Mensaje:</label>");

$("#item").val("");

$("#item").attr("placeholder", "");

$("#enviar").attr("onclick", "enviarMensaje()");

$("#enviar").attr("value", "Enviar");

// Mostramos los mensajes del usuario en el chat

obtenerMensajes();

});

// Hacemos uso del método 'keypress' de jQuery que detecta si el usuario esta escribiendo en el chat

// y mostramos el mensaje 'Usuario esta escribiendo...' al otro usuario

$('#item').keypress((e)=>{

if($("#item").attr("placeholder") != "Nombre de Usuario:"){

if(e.which != 13){

escribiendo = true;

socket.emit('escribiendo', {usuario:usuario, escribiendo:true});

clearTimeout(timeout);

timeout = setTimeout(finTiempoEscritura, 100);

}

else {

clearTimeout(timeout);

finTiempoEscritura();

enviarMensaje();

}

});

// Si un usuario esta escribiendo un mensaje, mostramos al otro usuario

// el texto 'Usuario esta escribiendo...'

socket.on('display', (datos)=>{

if(datos.escribiendo == true) {

// Detectamos la ventana del chat activa

// y cuando usuario esta escribiendo su mensaje, le ocultamos el texto 'Usuario esta escribiendo...'

if (document.hasFocus()) {

$('.escribiendo').hide();

}

else {

$('.escribiendo').show();

}

else {

// Si aún no se crea un nombre de usuario, ocultamos el texto 'Usuario esta escribiendo...'

if(usuario == undefined){

$('.escribiendo').text("");

}

else {

// Al otro usuario le mostramos el texto 'Usuario esta escribiendo...'

$('.escribiendo').text(`${datos.usuario} esta escribiendo...`);

setTimeout(function() {

$('.escribiendo').fadeOut('fast');

}, 1500)

}

});

// Obtenemos los mensajes en tiempo real

socket.on('mensaje',obtenerMensajes);

// Dejamos de mostrar el mensaje

function finTiempoEscritura(){

escribiendo = false;

socket.emit('escribiendo', {usuario:usuario, escribiendo:false});

}

// Obtenemos los mensajes para mostrarlos en el chat

function obtenerMensajes(){

$.getJSON("http://localhost:3000/mensajes/", (datos)=>{

var mensaje = [];

$.each(datos, (key, val) => {

$.each(val, (key, val) => {

var nombreusuario = key;

var msg = val;

// Mostramos en el chat el nombre de usuario y su mensaje que ha enviado

mensaje.push(`<strong>${nombreusuario}</strong><p>${msg}</p>`);

});

// Mostramos los mensajes en el contenedor del Chat

$(".ventanachat").html(mensaje);

// Mantenemos el scroll siempre activo en el último mensaje enviado al Chat

$(".ventanachat").animate({ scrollTop: $(document).height() }, "slow");

return false;

});

};

// Con este método enviamos el mensaje del usuario al Chat

function enviarMensaje() {

var nombreUsuario = usuario;

var mensaje = $('#item').val();

if(nombreUsuario == undefined){

var item = `{"Bienvenido: " : "${mensaje}"}`;

}

else {

var item = `{"${nombreUsuario}" : "${mensaje}"}`;

}

$.post('/enviar_mensaje', JSON.parse(item), ()=>{

console.log('mensaje enviado');

});

$('#item').val("");

}

Vista o interface del Chat

Ahora voy a crear un archivo HTML con el nombre index.html en donde crearé los elementos visuales del chat.


/chat_node_js_socket_io 
  ├── /node_modules 
  ├── chat.js  
  ├── index.html // Creo este Archivo 
  ├── package-lock.json
  ├── package.json
  ├── server.js

/chat_node_js_socket_io

├── /node_modules

├── chat.js

├── index.html // Creo este Archivo

├── package-lock.json

├── package.json

├── server.js

Abro el archivo index.html y agrego los siguiente elementos (He colocado comentarios en el código HTML explicando para que sirve cada elemento).


<main role="main" class="container contenedor">

   <!-- Ventana para mostrar los mensajes en el Chat -->
   <div class="ventanachat container col-md-12 mt-5"></div>

   <!-- Contenedor para mostrar el mensaje "Usuario esta escribiendo..." -->
   <div class="escribiendo container col-md-12 mb-1"></div>

   <div class="container col-md-12">

      <div class="input-group mb-3">
         <div class="input-group" id="nombreusuario">
            <label class="txt_negrita">Nombre de Usuario:</label>
         </div>

         <!-- Campo para definir un nombre de usuario en el chat -->
         <input type="text" class="form-control" id="item" placeholder="Pedro"> 
      </div>

      <!-- Luego de definir el nombre de usuario, lo configuramos con el método 'configurarNombreUsuario()' -->
      <input type="button" class="btn btn-primary" id="enviar" value="Ingresar al Chat" onclick="configurarNombreUsuario();">     

   </div>

</main>

<label class="txt_negrita">Nombre de Usuario:</label>

</div>

</div>

</div>

</main>

Antes de la etiqueta de cierre </body> instancio a mi archivo chat.js y a Socket IO


    <!-- Instancio a Socket IO y a mi archivo chat.js -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="chat.js"></script>
    
  </body>
  
</html>

</body>

</html>

Entonces si ejecuto mi servidor con el siguiente comando.


node server 

Servidor funcionando en el puerto 3000

node server

Servidor funcionando en el puerto 3000

Y abro la dirección local http://localhost:3000/ en el navegador, debo de ver el chat funcionando sin problemas. (He cambiado el ancho de la ventana del navegador, pero si le das el tamaño normal a la ventana del navegador, igual debe funcionar).

Bueno eso es todo, al inicio de cada parte del tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado el código fuente alojado en GitHub en esta última parte del tutorial.

Nota (s)

El código, los Pasos y opciones mencionadas en este tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas u organizaciones que dan soporte a Node JS y JavaScript, que suele cambiar sus opciones de despliegue y configuración en futuras versiones.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.