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

5 minuto(s)

En esta página:

Demo

Hay aplicaciones de mensajería en donde los usuarios que participan en una chat, suelen ver el mensaje por ejemplo “Pedro esta escribiendo…”, este mensaje le indica al otro usuario que espere atento hasta que el usuario mande su mensaje en la ventana o aplicación de mensajería, tenemos aplicaciones como Messenger o WhatsApp que tienen esta funcionalidad, en este Post te enseñare como hacerlo para un Chat en Navegador web, vamos con ello.

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: “Donde buscar ayuda sobre Programación”:

Spotify	SoundCloud

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 1.

Al Chat le puedes agregar las funcionalidades que desees, yo le agregaré determinadas funcionalidades para este tutorial.

Nuevo Proyecto con Node JS

Lo primero que haré es crear un nuevo proyecto con Node JS, para esto ejecuto el siguiente comando.


# Crear nuevo proyecto en Node JS 
npm init

# Crear nuevo proyecto en Node JS

npm init

Luego de ejecutar el comando anterior, Node JS, nos pedirá llenar algunos datos que irán en el archivo package.json del proyecto, yo le he puesto los siguientes datos.


{
  "name": "chat_node_js_socket_io",
  "version": "1.0.0",
  "description": "Chat con Node JS 14.5.0 (Socket IO 2.3.0)",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nube Colectiva",
  "license": "ISC"  
}

{

"name": "chat_node_js_socket_io",

"version": "1.0.0",

"description": "Chat con Node JS 14.5.0 (Socket IO 2.3.0)",

"main": "server.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "Nube Colectiva",

"license": "ISC"

}

Ahora voy a instalar las siguientes dependencias, que son necesarias para que mi proyecto funcione correctamente, las versiones de estas dependencias son las actuales hasta la fecha de este tutorial, pero en el futuro aparecerán nuevas versiones.


"dependencies": {
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "cookie-parser": "^1.4.5",    
    "express": "^4.17.1",
    "jquery": "^3.4.1",
    "multer": "^1.4.2",
    "popper.js": "^1.16.0",
    "request": "^2.88.2",
    "socket.io": "^2.3.0"
}

"dependencies": {

"body-parser": "^1.19.0",

"bootstrap": "^4.4.1",

"cookie-parser": "^1.4.5",

"express": "^4.17.1",

"jquery": "^3.4.1",

"multer": "^1.4.2",

"popper.js": "^1.16.0",

"request": "^2.88.2",

"socket.io": "^2.3.0"

}

Entonces mi archivo package.json se debe de ver ahora así.


{
  "name": "chat_node_js_socket_io",
  "version": "1.0.0",
  "description": "Chat con Node JS 14.5.0 (Socket IO 2.3.0)",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nube Colectiva",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "jquery": "^3.4.1",
    "multer": "^1.4.2",
    "popper.js": "^1.16.0",
    "request": "^2.88.2",
    "socket.io": "^2.3.0"
  }
}

{

"name": "chat_node_js_socket_io",

"version": "1.0.0",

"description": "Chat con Node JS 14.5.0 (Socket IO 2.3.0)",

"main": "server.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "Nube Colectiva",

"license": "ISC",

"dependencies": {

"body-parser": "^1.19.0",

"bootstrap": "^4.4.1",

"cookie-parser": "^1.4.5",

"express": "^4.17.1",

"jquery": "^3.4.1",

"multer": "^1.4.2",

"popper.js": "^1.16.0",

"request": "^2.88.2",

"socket.io": "^2.3.0"

}

Paso seguido, creo un archivo llamado server.js en donde escribiré el código para mi servidor de Node JS, comenzaré creando las siguientes variables para instanciar las dependencias que instale anteriormente.


// Creo las siguientes variables para mis dependencias 
var express = require('express');
var bodyParser = require('body-parser');
var request = require('request');
var urlencodedParser = bodyParser.urlencoded({extended : false});
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

// Creo las siguientes variables para mis dependencias

var express = require('express');

var bodyParser = require('body-parser');

var request = require('request');

var urlencodedParser = bodyParser.urlencoded({extended : false});

var app = express();

var http = require('http').Server(app);

var io = require('socket.io')(http);

Luego le paso las dependencias express y bodyParser a mi aplicación.


// Uso express y bodyParser 
app.use(express.static(__dirname));
app.use(bodyParser.json());

// Uso express y bodyParser

app.use(express.static(__dirname));

app.use(bodyParser.json());

Creo o declaro las siguientes variables con valores de tipo array.


// Declaro este par de variables con valores de tipo array 
var mensajes = [];
var usuarios = [];

// Declaro este par de variables con valores de tipo array

var mensajes = [];

var usuarios = [];

Ahora hago referencia al archivo index.html que es el archivo en donde mostraré la interface del chat.


// Hacemos uso del archivo index.html para mostrar la interface del chat 
app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');
});

// Hacemos uso del archivo index.html para mostrar la interface del chat

app.get('/', function(req, res){

res.sendFile(__dirname + '/index.html');

});

Ahora voy a definir la ruta /enviar_mensaje la cual servirá para enviar los mensajes en el chat con el método post() de Node JS, estos mensajes los enviaremos en tiempo real con el método .emit() de Socket IO a todas las ventanas de chat que se hayan abierto.


// Usamos las ruta /enviar_mensaje para enviar los mensajes de los usuarios en el chat 
app.post('/enviar_mensaje', urlencodedParser, (req,res) => {
   mensajes.push(req.body);
   io.emit('mensaje');
   res.sendStatus(200);
});

// Usamos las ruta /enviar_mensaje para enviar los mensajes de los usuarios en el chat

app.post('/enviar_mensaje', urlencodedParser, (req,res) => {

mensajes.push(req.body);

io.emit('mensaje');

res.sendStatus(200);

});

También defino una ruta llamada /mensajes para obtener los mensajes con el método get() de Node JS


// Obtenemos los mensajes y con JSON.stringify() convertimos los objetos en una cadena de texto JSON 
app.get('/mensajes', (req,res)=>{
   res.send(JSON.stringify(mensajes));
});

// Obtenemos los mensajes y con JSON.stringify() convertimos los objetos en una cadena de texto JSON

app.get('/mensajes', (req,res)=>{

res.send(JSON.stringify(mensajes));

});

Ahora cuando el usuario ingrese al Chat, este escribe su nombre de usuario, el servidor configura y guarda ese nombre de usuario y le permite enviar mensajes al chat.


// Cuando el usuario conecta al chat 
io.on('connection', (socket)=>{   

   // Configuramos su nombre de usuario 
   socket.on('configurarNombreUsuario', (datos)=>{ 
      usuarios.push(datos);
      socket.emit('configurarUsuario', {nombreusuario:datos}); 
   });

   // Pasamos los datos que el usuario esta escribiendo en el chat 
   socket.on('escribiendo', (datos)=>{
      // Si el usuario esta escribiendo un mensaje 
      if(datos.escribiendo == true){
         io.emit('display', datos);
      }
      else {
         io.emit('display', datos);
      }
   });

});

// Cuando el usuario conecta al chat

io.on('connection', (socket)=>{

// Configuramos su nombre de usuario

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

usuarios.push(datos);

socket.emit('configurarUsuario', {nombreusuario:datos});

});

// Pasamos los datos que el usuario esta escribiendo en el chat

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

// Si el usuario esta escribiendo un mensaje

if(datos.escribiendo == true){

io.emit('display', datos);

}

else {

io.emit('display', datos);

}

});

Por último iniciamos el servidor en el puerto 3000, con toda la configuración que realizada anteriormente.


// Corremos el servidor en el puerto 3000 
http.listen(3000, function(){
   console.log('Servidor funcionando en el puerto 3000');
});

// Corremos el servidor en el puerto 3000

http.listen(3000, function(){

console.log('Servidor funcionando en el puerto 3000');

});

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


// Creo las siguientes variables para mis dependencias 
var express = require('express');
var bodyParser = require('body-parser');
var request = require('request');
var urlencodedParser = bodyParser.urlencoded({extended : false});
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

// Uso express y bodyParser 
app.use(express.static(__dirname));
app.use(bodyParser.json());

// Declaro este par de variables con valores de tipo array 
var mensajes = [];
var usuarios = [];

// Hacemos uso del archivo index.html para mostrar la interface del chat 
app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');
});

// Usamos las ruta /enviar_mensaje para enviar los mensajes de los usuarios en el chat 
app.post('/enviar_mensaje', urlencodedParser, (req,res) => {
   mensajes.push(req.body);
   io.emit('mensaje');
   res.sendStatus(200);
});

// Obtenemos los mensajes y con JSON.stringify() convertimos los objetos en una cadena de texto JSON 
app.get('/mensajes', (req,res)=>{
   res.send(JSON.stringify(mensajes));
});

// Cuando el usuario conecta al chat 
io.on('connection', (socket)=>{   

   // Configuramos su nombre de usuario 
   socket.on('configurarNombreUsuario', (datos)=>{ 
      usuarios.push(datos);
      socket.emit('configurarUsuario', {nombreusuario:datos}); 
   });

   // Pasamos los datos que el usuario esta escribiendo en el chat 
   socket.on('escribiendo', (datos)=>{
      // Si el usuario esta escribiendo un mensaje 
      if(datos.escribiendo == true){
         io.emit('display', datos);
      }
      else {
         io.emit('display', datos);
      }
   });

});

// Corremos el servidor en el puerto 3000 
http.listen(3000, function(){
   console.log('Servidor funcionando en el puerto 3000');
});

// Creo las siguientes variables para mis dependencias

var express = require('express');

var bodyParser = require('body-parser');

var request = require('request');

var urlencodedParser = bodyParser.urlencoded({extended : false});

var app = express();

var http = require('http').Server(app);

var io = require('socket.io')(http);

// Uso express y bodyParser

app.use(express.static(__dirname));

app.use(bodyParser.json());

// Declaro este par de variables con valores de tipo array

var mensajes = [];

var usuarios = [];

// Hacemos uso del archivo index.html para mostrar la interface del chat

app.get('/', function(req, res){

res.sendFile(__dirname + '/index.html');

});

// Usamos las ruta /enviar_mensaje para enviar los mensajes de los usuarios en el chat

app.post('/enviar_mensaje', urlencodedParser, (req,res) => {

mensajes.push(req.body);

io.emit('mensaje');

res.sendStatus(200);

});

// Obtenemos los mensajes y con JSON.stringify() convertimos los objetos en una cadena de texto JSON

app.get('/mensajes', (req,res)=>{

res.send(JSON.stringify(mensajes));

});

// Cuando el usuario conecta al chat

io.on('connection', (socket)=>{

// Configuramos su nombre de usuario

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

usuarios.push(datos);

socket.emit('configurarUsuario', {nombreusuario:datos});

});

// Pasamos los datos que el usuario esta escribiendo en el chat

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

// Si el usuario esta escribiendo un mensaje

if(datos.escribiendo == true){

io.emit('display', datos);

}

else {

io.emit('display', datos);

}

});

// Corremos el servidor en el puerto 3000

http.listen(3000, function(){

console.log('Servidor funcionando en el puerto 3000');

});

Bien hasta aquí esta primera parte, en donde creamos un nuevo proyecto en Node JS, instalamos las dependencias necesarias para el proyecto y creamos el servidor Node JS.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En el siguiente capitulo crearemos las funcionalidades del Chat y la vista HTML respectiva.
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.