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
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"
}
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"
}
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"
}
}
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);
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());
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 = [];
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');
});
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);
});
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));
});
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);
}
});
});
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');
});
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');
});
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.