Node.js - freeCodeCamp.org

Cómo escribir Pruebas usando el Ejecutor de Pruebas de Node.js y mongodb-memory-server

Elias Ezequiel Pereyra Gomez — Tue, 15 Apr 2025 14:27:15 +0000

Artículo original: How to Write Tests Using the Node.js Test Runner and mongodb-memory-server

Recientemente migré algunas pruebas de Jest al ejecutor de pruebas de Node.js en dos de mis proyectos que usan MongoDB. En uno de esos proyectos, el tiempo de ejecución de las pruebas fue reducido de 107 segundos a 25 segundos (captura de pantalla abajo). En el otro proyecto, el tiempo de ejecución de las pruebas fue reducido cerca de un 66%.

Decidí compartirte cómo pude implementarlo. Pienso que te será de utilidad, ya que es más rentable (en términos de reducir dinero gastado en ejecutar pruebas en CI/CD), y también mejora tu experiencia de desarrollo.

Cómo escribir las Pruebas

Conclusión

Pre-requisitos

Para seguir esta guía, deberías de tener experiencia trabajando con Node.js, MongoDB y Mongoose (o cualquier otro mapeador de datos de objetos de MongoDB). Deberías también tener instalado Node.js (al menos la versión 20.18.2) y MongoDB (Compass la versión GUI) en tu computadora.

El Ejecutor de Pruebas de Node.js

El ejecutor de pruebas de Node.js fue introducido como una característica experimental en la versión 18 de Node.js. Se volvió disponible oficialmente en la versión 20. Te da la habilidad de:

Ejecutar pruebas
Reportar resultados de las pruebas
Reportar cobertura de las pruebas (todavía experimental en la versión 23)

Es una buena idea el usar el ejecutor de pruebas incorporado cuando se escriban pruebas en Node.js porque significa que tienes que usar menos dependencias externas. No necesitas instalar una librería externa (y sus dependencias entre pares) para ejecutar las pruebas.

El mejor ejecutor incorporado también es el más rápido. Basado en mi experiencia usándolo en dos proyectos (los cuales usaron Jest), vi mejoras de al menos una reducción del 66% en el tiempo que tomó ejecutar las pruebas completamente.

Y a diferencia de otros frameworks o librerías de pruebas, el ejecutor de pruebas de Node.js fue construido especialmente para proyectos de Node.js. No trata de acomodar las especificaciones de otros entornos de programación como el navegador. Las especificaciones de Node.js son su principal y única prioridad.

El Servidor en memoria de MongoDB

Para las pruebas que involucran el hacer peticiones a una base de datos, algunos desarrolladores prefieren imitar las peticiones para evitar hacer peticiones a una base de datos real. Hacen esto porque hacer una petición a una base de datos real requiere un montón de configuraciones que puede costar tiempo y recursos.

Escribir y solicitar datos usando una base de datos real es más lento comparado con escribir y solicitar datos de la memoria. Cuando se ejecutan pruebas automatizadas, usando un servidor de MongoDB real será más lento que usar un servidor de base de datos en memoria, y ahí es donde mongodb-memory-server se vuelve útil.

Según su documentación, mongodb-memory-server crea y comienza un servidor de MongoDB real de forma programática desde dentro de Node.js, pero usa una base de datos en memoria por defecto. También te permite conectar el servidor de base de datos que crea usando tu mapeador de datos de objetos preferido tales como Mongoose, Prisma, o TypeORM. En esta guía, usaremos Mongoose (v.8.9.6).

Ya que los datos almacenados por mongodb-memory-server reside en la memoria por defecto, es más rápido leer y escribir en él que cuando se usa una base de datos real. mongodb-memory-server también es más fácil de configurar. Estos beneficios lo hace una buena elección para usarlo como un servidor de base de datos para escribir pruebas.

Nota: asegúrate de instalar la versión 9.1.6 de mongodb-memory-server para seguir esta guía. La versión 10 actualmente tiene problemas con limpiar los recursos después que se hacen las pruebas. Mira este problema con el título "Node forking will include any --import from the original command".

El problema ha sido resuelto al tiempo de escribir este artículo, pero el arreglo no ha sido fusionado para las instalaciones.

Cómo escribir las Pruebas

Ahora te guiaré a través de los siguientes pasos para que comiences a escribir las pruebas:

Configurar el proyecto
Configurar el esquema de Mongoose
Configurar los servicios
Configurar las pruebas
Escribir las pruebas
Pasar las pruebas
Usa TypeScript (Opcional)

1. Configurar el Proyecto

Creé un repositorio de Github para facilitarte que sigas esta guía. Clona este repositorio en nodejs-test-runner-mongoose y dirígete a la rama 01-setup.

En 01-setup, las dependencias para el proyecto están el archivo package.json. Instala las dependencias usando el comando npm install para configurar el proyecto. Asegúrate de que la configuración esté completa y correcta, ejecuta el comando node . en la terminal de tu proyecto. Deberías ver tu versión de Node.js como una salida en la terminal.

# instala las dependencias
npm install
...
# ejecuta el comando node
node .
# la salida
You are running Node.js v22.13.1

2. Configurar el Esquema de Mongoose

Configuraremos el esquema para dos colecciones (Task y User) en la rama 02-setup-schema usando Mongoose. Los archivos task/model.mjs y user/model.mjs contienen el esquema para las colecciones Task y User, respectivamente. También configuraremos una conexión de base de datos en index.mjs para asegurar que la configuración del esquema funcione correctamente.

No iré en detalle sobre los modelos y esquemas de Mongoose en este artículo porque están fuera de su alcance.

Cuando ejecutas el comando node . después de implementar los cambios en 02-setup-schema, deberías de ver un resultado similar en la consola como en el fragmento de abajo:

node .
You are running Node.js v22.13.1
Created user with id 679f1d7f73fbeaf23b2007df
Created task "Task title" for user with id "679f1d7f73fbeaf23b2007df"

Puedes ver las diferencias entre 01-setup y 02-setup-schema a través de la diferencia 01-setup <> 02-setup-schema en Github.

3. Configurar los Servicios

Luego, creamos los archivos de servicio (task/service.mjs y user/service.mjs) en la rama 03-setup-services. Ambos archivos actualmente contienen funciones vacías en el que escribiremos las pruebas más tarde. Estas funciones contendrán la lógica de negocio y también se comunicará con la base de datos. Estamos usando comentarios de JSDoc para escribir parámetros y regresar valores.

Haz clic en la diferencia de 02-setup-schema <> 03-setup-services para ver los cambios de código entre 02-setup-schema y 03-setup-services.

4. Configurar las Pruebas

En la rama 04-set-up-tests, configuramos la base de código para ejecutar las pruebas. Creamos test.setup.mjs el cual contiene el código que será ejecutado antes de que cada archivo de prueba se ejecute.

En test.setup.mjs, la función connect crea un servidor de MongoDB en memoria y lo conecta con Mongoose para ejecutar las pruebas. La función closeDatabase cierra la conexión de la base de datos y limpia todos los recursos para liberar memoria.

Las funciones connect y closeDatabase se ejecutan en el hook t.before y en el hook t.after respectivamente. Esto asegura eso, antes que un archivo test se ejecute, una conexión de base de datos se establece a través t.before. Luego de que se hayan ejecutado las pruebas del archivo, la conexión de la base de datos se cae y los recursos usados se limpian a través de t.after.

En package.json, actualizaremos el script de npm test a node --test --import ./test.setup.mjs. Este comando asegura que Módulo Es test.setup.mjs se pre-cargue y se ejecute a través del comando --import del CLI antes de que cada archivo de prueba se ejecute.

Luego crearemos los archivos de prueba con pruebas vacías en las carpetas __tests__ para user y task. Después de implementar los nuevos cambios en 04-set-up-tests, ejecutar el script test con npm run test debería de mostrar la salida similar al fragmento de abajo:

npm run test

> nodejs-test-runner-mongoose@1.0.0 test
> node --test --import ./test.setup.mjs

...

ℹ tests 8
ℹ suites 5
ℹ pass 8
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 941.768873

Todas las pruebas actualmente pasan porque no hay aserciones que fallen. Escribiremos las pruebas con aserciones en la siguiente sección.

5. Escribir Pruebas

Ahora es tiempo de escribir las pruebas para las funciones en los archivos de service en la rama 05-write-tests. Estamos usando la librería de aserción de Node.js para asegurar que los valores regresados de las funciones sean lo que esperamos. Puedes ver las pruebas que hemos escrito cuando comparas las diferencias entre 04-set-up-tests y 05-write-tests.

Cuando el script tests se ejecute, todas las pruebas fallan porque no hemos escritos las funciones en los archivos de service todavía. Debería de ver una salida similar al fragmento de abajo cuando ejecutes el script test:

npm run test

> nodejs-test-runner-mongoose@1.0.0 test
> node --test --import ./test.setup.mjs

...

ℹ tests 8
ℹ suites 5
ℹ pass 0
ℹ fail 8
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 1202.031961

6. Pasar las Pruebas

En 06-pass-tests, escribimos las funciones en los archivos de service que pasen las pruebas. Solamente 6 de 7 pruebas pasan cuando el script test se ejecuta porque salteamos la prueba para la función getById en user/service.mjs con t.skip. No hemos terminado la función getById en user/service.mjs. Supuse que podríamos dejarlo como ejercicio.

Cuando ejecutas el script test, deberías obtener una salida similar en la terminal como el de abajo:

ℹ tests 7
ℹ suites 4
ℹ pass 6
ℹ fail 0
ℹ cancelled 0
ℹ skipped 1
ℹ todo 0
ℹ duration_ms 1287.564918

Puedes ver el código que escribimos para pasar las pruebas en los cambios de código entre 05-write-tests y 06-pass-tests.

7. Usa TypeScript (Opcional)

Si tu intención es ejecutar las pruebas con TypeScript, puedes cambiar a la rama 07-with-typescript. Necesitas tener Node.js >=22.6.0 instalado porque estamos usando la opción --experimental-strip-types en el test. Para configurar las pruebas que se ejecuten con TypeScript, sigue los siguientes pasos:

Instala TypeScript usando el comando npm install typescript --save-dev
Instala tsx usando el comando npm install tsx
Crea un archivo predeterminado tsconfig.json en la raíz del proyecto usando el comando npx tsc --init

En package.json, actualiza el script test a esto:

"test": "node --test --experimental-strip-types --import tsx --import ./test.setup.mjs"

--experimental-strip-types ayuda a eliminar tipos antes de cada archivo de prueba se ejecute.

Pre-cargar tsx con el --import ayuda a ejecutar el archivo de TypeScript. Sin él, el ejecutor de pruebas no será capaz de encontrar archivos importados sin la extensión .ts. Por ejemplo, user/model.ts importado con el fragmento de código de abajo no será encontrado.

  import { UserModel } from "./model";

El resto de los cambios desde 06-pass-tests a 07-with-typescript involucran actualizar los tipos, cambiar las extensiones de archivo de .mjs a .ts y actualizar las declaraciones import.

Conclusión

En esta guía, has aprendido cómo usar el ejecutor de pruebas incorporado de Node.js y por qué es frecuentemente una mejor elección sobre otras librerías y frameworks de pruebas. También has aprendido cómo usar mongodb-memory-server como un reemplazo de un servidor real de MongoDB, así también como por qué es una buena idea usarlo en vez de un servidor real de MongoDB para las pruebas.

Lo más importante, has aprendido cómo configurar y ejecutar las pruebas en Node.js usando el ejecutor de pruebas de Node.js y mongodb-memory-server. Ahora deberías de saber cómo configurar tus proyectos para que ejecuten las pruebas si usas TypeScript.

Si encuentras útil a este repositorio nodejs-test-runner-mongoose, por favor dale una estrella. Me anima mucho. Gracias.

Cómo construir una Aplicación de Chat en Tiempo Real con React, Node, Socket.io, y HarperDB

Elias Ezequiel Pereyra Gomez — Fri, 24 Jan 2025 16:28:21 +0000

En este artículo, estaremos usando Socket.io y HarperDB para construir una aplicación chat fullstack de tiempo real con salas de chat.

Este será un gran proyecto para aprender cómo armar las aplicaciones fullstack, y cómo crear una aplicación donde el back-end puede comunicarse con el front-end en tiempo real.

Normalmente, usando solicitudes HTTP, el servidor no puede enviar datos al cliente en tiempo real. Pero al usar Socket.io, el servidor es capaz de enviar información en tiempo real al cliente sobre algunos eventos que sucedieron en el servidor.

La aplicación que estaremos construyendo tiene dos páginas:

Una página join-a-chat-room:

Y una página chat-room:

Aquí está lo que estaremos usando para construir este aplicación:

Front-end: React (Un framework de front-end de JavaScript para construir aplicaciones interactvias)
Back-end: Node y Express (Express es un framework muy popular de NodeJS que nos permite crear fácilmente APIs y back-ends)
Base de Datos: HarperDB (una plataforma de datos + aplicación que te permite solicitar datos usando SQL o NoSQL. HarperDB también tiene una API integrada, ahorrándonos el escribir mucho código de back-end)
Comunicación en Tiempo Real: Socket.io (¡ve abajo!)

Aquí está el código fuente (recuerda de darle una estrella ⭐).

Tabla de Contenidos

¿Qué es Socket.io?
Configuración del Proyecto
Cómo construir la Página "Join a Room"
Cómo configurar el Servidor
Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor
Cómo funcionan las Salas en Socket.io
Cómo construir la Página Chat
Cómo crear el componente Messages (B)
Cómo crear un Esquema y una Tabla en HarperDB
Cómo crear el Componente Send Message (C)
Cómo configurar las Variables de Entorno de HarperDB
Cómo permitir a los Usuarios que se envíen Mensajes con Socket.io
Cómo obtener los Mensajes desde HarperDB
Cómo mostrar los Últimos 100 Mensajes en el Cliente
Cómo mostrar la Sala y los Usuarios (A)
Cómo quitar a un Usuario de una Sala de Socket.io
Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué es Socket.io?

Socket.io permite al servidor enviar información al cliente en tiempo real, cuando los eventos ocurren en el servidor.

Por ejemplo, si estuvieras jugando un juego de múltiple jugador, un evento podría ser tu "amigo" que consiguió un gol espectacular en contra tuya.

Con Socket.io, sabrías (casi) instantáneamente sobre conceder un gol.

Sin Socket.io, el cliente tendría que hacer múltiples llamadas polling de AJAX para verificar que el evento ha ocurrido en el servidor. Por ejemplo, el cliente podría usar JavaScript para verificar un evento en el servidor cada 5 segundos.

Socket.io significa que el cliente no tiene que hacer múltiples llamadas polling de AJAX para verificar si algunos eventos han ocurrido en el servidor. Más bien, el servidor envía la información al cliente tan pronto como lo obtenga. Mucho mejor.👌

Así que, Socket.io nos permite construir fácilmente aplicaciones de tiempo real, tales comos aplicaciones de chat y juegos multijugador.

Configuración del Proyecto

1. Cómo configurar nuestras carpetas

Comienza un nuevo proyecto en tu editor de texto de prefrencia (VS Code para mí), y crea dos carpetas a nivel raíz llamados client y server.

Crearemos nuestra aplicación React Front-end en la carpeta client, y nuestro backend con Node/express en la carpeta server.

2. Cómo instalar nuestras dependencias de client

Abre una terminal en la raíz del proyecto (en VS Code, puedes hacer esto al presionar Ctrl + ' o al ir a terminal->new terminal).

Luego, instalaremos React en nuestra carpeta client:

$ npx create-react-app client

Después de que React se haya instalado, ve hacia la carpeta client, e instala las siguientes dependencias:

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom nos permitirá configurar las rutas a nuestros distintos componentes de React – esencialmente creando diferentes páginas.

Socket.io-client es la versión cliente de socket.io, que nos permite "emitir" eventos al servidor. Una vez que el servidor lo recibe, podemos usar la versión del servidor de socket.io para hacer cosas como enviar mensajes a los usuarios en la misma sala como el emisor, o unirse con un usuario a una sala de socket.

Ganarás un mejor entendimiento de esto más tarde cuando lleguemos a implementar estas ideas con código.

3. Cómo iniciar la aplicación de React

Vamos a asegurarnos que todo está funcionando bien ejecutando el siguiente comando desde la carpeta client:

$ npm start

Webpack construirá la aplicación de React y lo servirá en `http://localhost:3000`:

Ahora configuremos nuestra base de datos de HarperDB que usaremos para guardar mensajes de forma permanente enviados por los usuarios.

Cómo configurar HarperDB

Primero, crea una cuenta con HarperDB.

Luego crea una nueva instancia en la nube de HarperDB.

Para hacer las cosas fáciles, selecciona la instancia cloud:

Selecciona el proveedor del cloud (Yo escojo AWS):

Brinda un nombre a tu instancia de la nube, y crea tus credenciales de la instancia:

HarperDB tiene una capa gratuita generosa que podemos usar para este proyecto, así que selecciona ese:

Verifica que tus detalles son correctos, luego crea la instancia.

Tomará unos pocos minutos para crear la instancia, así que continuemos y, ¡hagamos nuestro primer componente de React!

Cómo construir la Página "Join a Room"

Nuestra página principal va a terminar luciendo así:

El usuario ingresará un nombre de usuario, selecciona una sala de chat desde el despegable, luego haz clic en "Join Room". El usuario será dirigido a la página de la sala de chat.

Así que, hagamos esta página principal.

1. Cómo crear el formulario HTML y agregar estilos

Crea un nuevo archivo en src/pages/home/index.js.

Agregaremos estilos básicos a nuestra aplicación usando módulos de CSS, así que crea un nuevo archivo: src/pages/home/styles.module.css.

Nuestra estructura de carpeta debería ahora lucir así:

Ahora creemos el formulario básico HTML:

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    
      
        {`<>DevRooms`}
        

        

        
      
    
  );
};

export default Home;

Arriba, tenemos un input de texto sencillo para capturar el nombre de usuario, y un despegable seleccionable con algunas opciones por defecto para que el usuario seleccione una sala de chat para unirse.

Ahora importemos este componente en App.js y configuremos una ruta para el componente usando el paquete react-router-dom. Este será nuestra página principal, así que la ruta será /:

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    
      
        
          } />
        
      
    
  );
}

export default App;

Ahora agreguemos algunos estilos básicos para hacer que nuestra aplicación luzca mas presentable:

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

También agreguemos los estilos específicos a nuestro componente de la página principal:

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

También hagamos que el botón "Join Room" tenga el ancho completo agregando un atributo de estilo:

// client/src/pages/home/index.js

Nuestra página principal ahora se ve sólido:

2. Cómo agregar funcionalidad al formulario Join Room

Ahora tenemos un formulario básico y estilos, así que es tiempo de agregar algo de funcionalidad.

Esto es lo que queremos que suceda cuando el usuario haga clic en el botón "Join Room":

Verificar que el nombre de usuario y los campos de la sala sean rellenados.
Si es así, emitimos un evento de socket a nuestro servidor.
Redireccionar al usuario a la página Chat (el cual crearemos luego).

Vamos a necesitar crear algo de estado para almacenar los valores nombre de usuario y room. También necesitamos crear una instancia del socket.

Podríamos crear estos estados directamente dentro de nuestro componente home, pero nuestra página Chat también necesitará acceder al username, room y socket. Así que elevaremos el estado al App.js, donde podemos pasar estas variables a las páginas HomePage y Chat.

Así que, creemos nuestro estado y configuremos un socket en App.js, y pasemos estas variables como props al componente. También pasaremos la función setState de forma que podamos alterar el estado:

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    
      
        
          
            }
          />
        
      
    
  );
}

export default App;

Ahora podemos acceder a estos props en nuestro componente Home. Usaremos la destructuración para obtener estas props:

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

Cuando el usuario ingrese su nombre de usuario o seleccione una sala, necesitamos actualizar las variables de estado username y room:

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    
      // ...
         setUsername(e.target.value)} // Add this
        />

        

        // ...
    
  );
};

export default Home;

Ahora estamos capturamos los datos ingresados por el usuario, podemos crear una función callback joinRoom() para cuando el usuario haga clic en el botón "Join Room":

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {

  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    
      // ...

        
      // ...
    
  );
};

export default Home;

Arriba, cuando el usuario haga clic en el botón, un evento del socket llamado joinroom se emite, juntamente con un objeto conteniendo el nombre de usuario y la sala seleccionada. Este evento será recibido por nuestro servidor un poco más tarde cuando haremos algo de magia.

Para terminar nuestra página principal, necesitamos agregar una redirección al final de nuestra función joinRoom() para llevar al usuario a la página /chat:

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Agrega esto

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Agrega esto

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirecciona a /chat
    navigate('/chat', { replace: true }); // Agrega esto
  };

 // ...

Pruébalo: escribe un nombre de usuario y selecciona una sala, luego haz clic en Join Room. Deberías ser dirigido a la ruta http://localhost:3000/chat – actualmente una página vacía.

Pero antes que creemos nuestra Página Chat, tengamos algo ejecutándose en el servidor.

Cómo configurar el Servidor

En el servidor, vamos a escuchar los eventos del socket que son emitidos desde el frontend. Actualmente, solamente tenemos un evento join_room siendo emitido desde React, así que agregaremos este escucha de evento primero.

Pero antes de eso, necesitamos instalar nuestras dependencias del servidor y tener el servidor activo y ejecutándose.

1. Cómo instalar las dependencias del servidor

Abre una nueva terminal (en VS Code: Terminal->Nueva Terminal), cambia la carpeta a nuestra carpeta de servidor, inicializa un archivo package.json, e instala las siguientes dependencias:

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

Axios es un paquete usado comunmente para hacer solicitudes fácilmente a APIs.
Cors permite a nuestro cliente hacer solicitudes a otros orígenes – necesario para socket.io para que funcione de forma apropiada. Ve ¿Qué es el CORS? si no has escuchado de CORS antes.
Express es un framework de Node.js que nos permite escribir nuestro backend más fácilmente con menos código.
Socket.io es una librería que permite que el cliente y el servidor se comunique a tiempo real – el cual no es posible con solicitudes estándares de HTTP.
Dotenv es un módulo que nos permite almacenar claves privadas y contraseñas de forma segura, y cargarlos en nuestro códio cuando sea necesario.

También instalaremos nodemon como una dependencia dev, así no tenemos que reiniciar nuestro servidor cada vez que hagamos un cambio al código – ahorrándonos tiempo y energía:

$ npm i -D nodemon

2. Cómo iniciar nuestro servidor

Crea un archivo index.js en la raíz de nuestra carpeta server, y agrega el siguiente código para iniciar el servidor:

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

Abre el archivo package.json en nuestro servidor, y agrega un script que nos permitirá usar nodemon en desarrollo:

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

Ahora, iniciemos nuestro servidor al ejecutar el siguiente comando:

$ npm run dev

Podemos verificar rápidamente que nuestro servidor se está ejecutando correctamente al agregar un manejador de solicitudes get:

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app);

// Agrega esto
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora ve a http://localhost:4000/:

Nuestro servidor está activo y en ejecución. ¡Ahora es tiempo de hacer cosas de Socket.io en el servidor!

Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor

Recuerda que cuando emitimos un evento joinroom desde el cliente? Bueno, pronto vamos a estar escuchar ese evento en el servidor y agregar el usuario a una sala del socket.

Pero primero, necesitamos escuchar cuando un cliente se conecte al servidor a través de socket.io-client.

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Agrega esto

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app); // Agrega esto

// Agrega esto
// Crea un servidor io y permite CORS desde http://localhost:3000 con metodos GET y POST
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Agrega esto
// Escucha cuando el cliente se conecta a traves de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Podemos escribir nuestro our socket event listeners in here...
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora, cuando el cliente se conecta desde el frontend, el backend captura el evento de la conexión, y registrará User connected con el id único del socket para ese cliente particular.

Probemos si el servidor ahora está captrando el evento de la conección desde el cliente. Ve a tu aplicación de React en http://localhost:3000/ y refresca la página.

Deberías ver el siguiente registro en tu consola de terminal del servidor:

Genial, nuestro cliente se ha conectado a nuestro servidor a través de socket.io. Nuestro cliente y servidor ahora se pueden comunicar en, ¡tiempo real!

Cómo funcionan las Salas en Socket.io

Desde la documentación de Socket.io (no está disponible en español todavía):

"Una sala es un canal arbitrario al que sockets se puede unir (join) y abandonar (leave). Puede ser usado para emitir eventos a un subconjunto de clientes."

Así que, podemos unir el usuario a una sala, y luego el servidor puede enviar mensajes a todos los usuarios en esa sala – permitiendo a los usuarios enviarse mensajes en tiempo real. ¡Genial!

Cómo unir el usuario a una sala de Socket.io

Una vez que el usuario se ha conectado a través de Socket.io, podemos agregar nuestros escuchas de eventos del socket en el servidor para escuchar eventos emitidos desde el cliente. También, podemos emitir eventos en el servidor, y esucharlos en el cliente.

Ahora escuchemos por el evento joinroom, que capture los datos (nombre de usuario y sala), y agregue al usuario a una sala de socket:

// server/index.js

// Escuchar cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega esto
  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket
  });
});

Cómo enviar un mensaje a los usuarios en una sala

Ahora enviemos un mensaje a todos los usuarios en la sala, aparte del usuario que se acaba de unir, para notificarlos que un nuevo usuario se ha unido:

// server/index.js

const CHAT_BOT = 'ChatBot'; // Agrega esto
// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket

    // Agrega esto
    let __createdtime__ = Date.now(); // Marcas de tiempo actuales
    // Envía un mensaje a todos los usuario en la sala, aparte del usuario que se acaba de unir
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Arriba, estamos emitiendo un evento receive_message a todos los clientes en la sala en el que el usuario se acaba de unir, juntamente con algo de dato: el mensaje, el nombre de usuario quien envió el mensaje, y el tiempo en que el mensaje fue enviado.

Agregaremos un escucha de evento en nuestra aplicación de React un poco después para capturar este evento, y muestra el mensaje en la pantalla.

También enviemos un mensaje de bienvenida al nuevo usuario recién unido:

// server/index.js

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

    // Agrega esto
    // Envía el msg de bienvenida al usuario que se acaba de unir
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Cuando agregamos un usuario a una sala de Socket.io, Socket.io solamente almacena los ids de los sockets para cada usuario. Pero necesitaremos los nombres de usuario de todos en la sala, así también como el nombre de sala. Así que, almacenemos esos datos en variables en el servidor:

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Agrega esto
let chatRoom = ''; // Ej. javascript, node,...
let allUsers = []; // Todos los usuarios en la sala de chat actual

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
    // ...

    // Agrega esto
    // Guarda el nuevo usuario a la sala
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

Arriba, también estamos enviando un arreglo de todo el chatRoomUsers de nuevo al cliente a través del evento chatroomusers, así que podemos listar todos los nombres de usuario en el frontend.

Antes que agreguemos cualquier otro código a nuestro servidor, volvamos a nuestro frontend y creamos la página Chat – así podemos probar si estamos recibiendo los eventos receivemessage.

Cómo construir la Página Chat

En tu carpeta cliente, crea dos nuevos archivos:

src/pages/chat/index.js
src/pages/chat/styles.module.css

Agreguemos algunos estilos que usaremos en nuestra página Chat y componentes:

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

Ahora, veamos cómo terminará luciendo nuestra página Chat:

Agregando todo el código y lógica para esta página en un archivo podría volverse confuso y difícil de manejar, así que aprovechemos el hecho de que estamos usando un framework de frontend fabuloso (React) y dividir nuestra página en componentes:

Los componentes de la página chat:

A: Contiene el nombre de la sala, una lista de usuarios en esa sala, y un botón "Leave" que quitar al usuario desde la sala.

B: Los mensajes enviados. Al inicio de la renderización, los últimos 100 mensajes enviados en esa sala será solicitado desde la base de datos y mostrado al usuario.

C: Una entrada y botón para escribir y enviar un mensaje.

Primero crearemos el componente B, así podemos mostrar los mensajes al usuario.

Cómo crear el Componente Messages (B)

Crea un nuevo archivo en src/pages/chat/messages.js y agrega el siguiente código:

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Se ejecuta cuando sea que un evento del socket es recibido desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita la escucha del evento al desmontar el componente
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

Ahora, tenemos un hook useEffect que se ejecuta cuando sea que el evento del socket se recibe. Luego recibimos los datos del mensaje en el escucha del evento receivemessage. Desde ahí, ponemos el estado messagesReceived, el cual es un arreglo de objetos de mensaje conteniendo el mensaje, nombre de usuario del emisor, y la fecha del mensaje que fue enviado.

Importemos nuestro nuevo componentes de mensajes en la página Chat, y luego creemos una ruta para la página Chat en App.js:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    
      
        
      
    
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    
      
        
          
            }
          />
          {/* Add this */}
          }
          />
        
      
    
  );
}

export default App;

Probemos esto, ve a la página principal y únete a una sala:

Deberíamos ser llevados a la página Chat, y recibir un mensaje de bienvenida del ChatBot:

Los usuarios ahora pueden ver los mensajes que reciben. ¡Genial!

Próximo: configurar nuestra base de datos así podemos guardar los mensajes permanentemente.

Cómo crear un Esquema y una Tabla en HarperDB

Vuelve a tu dashboard de HarperDB, y haz clic en "browser". Luego crea un nuevo esquemos llamado "realtime_chat_app". Un esquema es simplemente un grupo de tablas.

Dentro de ese esquema, crea una tabla llamada "messages", con un atributo hash de "id".

Ahora tenemos necestiamos donde almacenar los mensajes, así que creemos el componente SendMessage.

Cómo crear el componente Send Message (C)

Crea el archivo src/pages/chat/send-message.js y agrega el siguiente código:

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Envia un mensaje al servidor. No podemos especificar a quien enviamos el mensaje desde el frontend. Solamente podemos enviar al servidor. El servidor por lo tanto puede enviar un mensaje al resto de los usuarios en la sala
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    
       setMessage(e.target.value)}
        value={message}
      />
      
    
  );
};

export default SendMessage;

Arriba, cuando el usuario hace clic en el botón "Send Message", un evento del socket send_message se emite al servidor, junto con un objeto de mensaje. Manejaremos este evento en el servidor dentro de poco.

Importa SendMessage en nuestra página Chat:

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    
      
        
        
      
    
  );
};

export default Chat;

La página Chat ahora luce así:

Luego necesitamos configurar nuestras variables de entorno de HarperDB así podemos comenzar a interactuar con la base de datos.

Cómo configurar las Variables de Entorno de HarperDB

Para que seas capaz de guardar los mensajes en HarperDB, necesitarás tu URL de instancia de HarperDB, y tu contraseña API.

En tu dashboard de HarperDB, haz clic en tu instancia, luego ve a "config". Encontrarás tu URL de instancia, y la cabecera de Autenticación de API de tu instancia – eso es, tu contraseña "super_user" que te permite realizar cualquier solicitud a la base de datos – ¡PARA TUS OJOS SOLAMENTE!

Guardaremos estas variables en un archivo .env. Advertencia: ¡No empujes el archivo .env a Github! Este archivo no debería ser visible públicamente. Las variables se cargan a través del servidor por detrás.

Crea los siguientes archivos y agrega tu URL y contraseña de HarperDB:

// server/.env

HARPERDB_URL=""
HARPERDB_PW="Basic "

También crearemos un archivo .gitignore para evitar que el .env se suba a Github, juntamente con la carpeta node_modules:

// server/.gitignore

.env
node_modules

Nota: ser bueno en Git y Github es 100% imprescindible para todos los desarrolladores. Revisa mi artículo de los flujos de trabajo de Git si necesitas mejorar tu juego de Git.

O si constantemente te encuentras revisando los mismos comandos de Git, y quieres una forma rápida de verlos, y copiar/pegar los comandos – revisa mi hoja de trucos de los comandos de Git en PDF y mi póster de hoja de trucos de Git físico.

Finalmente, carguemos nuestras variables de entorno en nuestro servidor al agregar este código en la parte superior de nuestro archivo main:

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // quita esto despues que hayas visto que funcionó
const express = require('express');
// ...

Cómo permitir a los Usuarios que se envíen mensajes con Socket.io

En el servidor, escucharemos el evento sendmessage, luego enviaremos el mensaje a todos los usuarios dentro de la sala:

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Agrega esto

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Envia a todos los usuarios en la sala, incluyendo al emisor
    harperSaveMessage(message, username, room, __createdtime__) // Guarda el mensaje en la bd
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función harperSaveMessage. Crea un nuevo archivo en server/services/harper-save-message.js, y agrega lo siguiente:

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

Arriba, guardar los datos podria tomar un poco de tiempo, así que devolvemos una promesa el cual será resuelto si los datos se guardan satisfactoriamente, o rechazada si no se guardan.

Si te estás preguntando donde obtuve el código de arriba, HarperDB provee una sección increíble de "ejemplos de código" en su dashboard studio, el cual nos facilita la vida:

¡Tiempo de descanso! Únete a una sala como un usuario, luego envía un mensaje. Luego ve a HarperDB y haz clic en "browse", luego haz clic en la tabla "messages". Deberías ver tú mensaje en la base de datos:

Genial 😎. Así que, ¿ahora qué? Bueno, sería bueno si los últimos 100 mensajes enviados en la sala fueran cargados cuando un usuario se una a una sala, ¿no?

Cómo obtener los mensajes desde HarperDB

En el servidor, creemos una función que solicite los últimos 100 mensajes enviados en una sala particular (fíjate cómo HarperDB también nos permite usar solicitudes de SQL 👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

Llamaremos a esta función cuando sea que un usuario se una a una sala:

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {

    // ...

    // Agrega esto
    // Obtiene los últimos 100 mensajes enviados en la sala chat
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('ultimos mensajes', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

Arriba, si los mensajes se solicitan de forma exitosa, emitimos un evento de Socket.io llamado last_100_messages. Ahora escucharemos este evento en el frontend.

Cómo mostrar los últimos 100 mensajes en el Cliente

Abajo, agregamos un hook useEffect que contiene un escucha de evento de Socket.io para el evento last_100_messages. Desde ahí, los mensajes son ordenados en orden de fecha, con el más reciente al final, y el estado messagesReceived se actualiza.

Cuando messagesReceived se actualiza, un useEffect se ejecuta para desplazar el div messageColumn al mensaje más reciente. Esto mejora la experiencia de usuario de nuestra aplicación 👍.

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Se ejecuta cuando sea que un evento del socket se reciba desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita el escucha de eventos al desmontarse el componente 
    return () => socket.off('receive_message');
  }, [socket]);

  // Agrega esto
  useEffect(() => {
    // Ultimos 100 mensajes enviados en la sala chat (solicitados desde la bd en el backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Ordena estos mensajes por __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Agrega esto
  // Se desplaza al mensaje más reciente
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Agrega esto
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Agrega ref a este div
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

Cómo mostrar la Sala y los Usuarios (A)

Hemos hecho los componentes B y C, así que terminemos todo al hacer A.

En el servidor, cuando un usario se une a una sala, emitimos un evento chatroomusers que envía todos los usuarios de la sala a todos los clientes en esa sala. Escuchemos ese evento en un componente llamado RoomAndUsers.

Abajo, también hay un botón "Leave" que, cuando se presiona, hace la emisión de un evento leaveroom al servidor. Luego redirecciona el usuario devuelta a la página principal.

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirecciona a la pagina principal
    navigate('/', { replace: true });
  };

  return (
    
      {room}

      
        {roomUsers.length > 0 && Users:}
        
          {roomUsers.map((user) => (
            
              {user.username}
            
          ))}
        
      

      
    
  );
};

export default RoomAndUsers;

Importemos este componente en la página Chat:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    
      {/* Agrega esto */}
      

      
        
        
      
    
  );
};

export default Chat;

Cómo quitar a un Usuarío de una sala de Socket.io

Socket.io provee un método leave() que puedes usar para quitar a un usuario de una sala de Socket.io. También estamos manteniendo un registro de nuestros usuarios en un arreglo en la memoria del servidor, así que quitaremos al usuario de ese arreglo también:

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Quita a un usuario de la memoria
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función leaveRoom():

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

¿Por qué poner esta función corta en una carpeta utils aparte, te preguntas? Porque lo estaremos usando luego y no queremos repetirnos (mantenemos nuestro código DRY).

Probémoslo, abre dos ventanas lado a lado, y únete a ambos chats:

Luego haz clic en el botón leave en la ventana 2:

El usuario se quita del chat, y un mensaje se envía a los otros usuarios – notificándolos que se ha ido. ¡Bien!

Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué pasa si el usuario de alguna manera se desconecta del servidor, como si su internet se cayera? Socket.io provee un escucha de evento adjunto disconnects para esto. Agreguémosle a nuestro servidor para quitar a un usuario de la memoria cuando se desconecta:

// server/index.js

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('disconnect', () => {
    console.log('El usuario se desconectó del chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} se ha desconectado del chat.`,
      });
    }
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Y ahí lo tienes – haz construido una aplicación de chat de tiempo real fullstack con un frontend de React, un backend de Node/Express, y una base de datos de HarperDB. ¡Buen trabajo!

Para la próxima, planeo en revisar nuestras Funciones Personalizadas de HarperDB, el cual permite a los usuarios definir sus propios endpoints de API dentro de HarperDB. Esto significa que podemos construir nuestra aplicación completa, ¡en un sólo lugar! Mira un ejemplo de cómo HarperDB está colapsando el stack en este artículo.

Un desafío para ti 💪

Si refrescas la página Chat, el nombre de usuario del usuario y la sala desaparecerán. Mira si puedes prevenir que esta información se pierda cuando el usuario refresque la página. Pista: ¡el local storage podría ser útil!

¡Gracias por leer!

Si te pareció útil este artículo, puedes:

Suscribirte a mi canal de YouTube. Estaré subiendo tutoriales en profunidad y vídeos de proyectos sobre React/NextJS/Node/Express.
Sígueme en Twitter donde comparto tweets sobre mi jornada de freelancing, proyectos propios, y aprendizajes actuales.
Revisa mi almacén de Gumroad donde hago hojas de trucos y pósteres útiles y populares (8000 descargas al tiempo de escribir).
Revisa mi blog

Curso API CRUD - Node.js, Express, MongoDB y Autenticación

Estefania Cassingena Navone — Tue, 05 Nov 2024 04:00:00 +0000

Las operaciones CRUD son la base del desarrollo web backend. CRUD significa Crear, Leer, Actualizar y Eliminar. Son operaciones esenciales para el desarrollo web moderno ya que son utilizadas para gestionar datos en la mayoría de las aplicaciones web.

Acabamos de publicar un curso en el canal de YouTube en español de freeCodeCamp.org que te enseñará a implementar APIs REST con Node.js, Express y MongoDB. Aprenderás a diseñar rutas, manejar solicitudes HTTP, interactuar con bases de datos NoSQL y proteger tus endpoints con autenticación basada en JSON Web Tokens.

El curso fue creado por Leonardo José Castillo Lacruz. Leonardo es desarrollador de software y creador de contenido a quien le encanta enseñar programación y compartir sus conocimientos.

APIs y bases de datos no relacionales

Veamos algunos conceptos importantes para el curso.

API significa “Application Programming Interface” en inglés. En español, podemos traducir este acrónimo como “Interfaz de programación de aplicaciones".

Una API es un conjunto de reglas y especificaciones que permiten que distintas aplicaciones se comuniquen entre sí. Las APIs permiten que el proceso de integración de sistemas y servicios sea mucho más fácil, permitiendo la creación de aplicaciones web más complejas.

En el mundo del desarrollo web, puedes considerar a las APIs como el puente entre el front-end y el back-end porque permiten que haya un intercambio fluido de datos entre ambas partes de la aplicación.

Las APIs y las bases de datos están muy relacionadas porque a menudo trabajan juntas. Una API puede interactuar con una base de datos para recuperar, almacenar y modificar datos.

Por ejemplo, una aplicación web puede usar una API para obtener o actualizar información de un usuario en una base de datos.

Durante el curso trabajarás con MongoDB, una base de datos no relacional. Este tipo de base de datos también es llamada NoSQL.

Las bases de datos no relacionales son un tipo de base de datos que no almacenan datos en tablas con filas y columnas. En cambio, tienen formas más flexibles de estructurar y almacenar los datos.

MongoDB los almacena en documentos similares al formato JSON, lo cual permite a los desarrolladores seguir un modelo más dinámico y adaptable.

Esto es ideal para aplicaciones que manejan grandes volúmenes de datos no estructurados o semi-estructurados.

Para modelar estos datos, también aprenderás a trabajar con una biblioteca de Node.js llamada Mongoose, que te ayuda a definir el esquema de una base de datos para simplificar la interacción entre Node.js y MongoDB.

Todas estas interacciones deberían tener algún tipo de autenticación para asegurarte de que sólo los usuarios adecuados puedan realizan operaciones en la base de datos a través de la API. Para ello, usarás JSON Web Tokens, una forma estandarizada de transmitir información de forma segura en formato JSON.

Curso de CRUD

Genial. Ahora que sabes más sobre estos conceptos, veamos lo que aprenderás durante el curso:

Introducción a MongoDB
Instalar y configurar MongoDB
MongoDB Atlas
Conexión con MongoDB Shell
Cómo estructurar una API
Rutas y controladores
Conexión con MongoDB
Implementación del CRUD
Introducción de Mongoose
Ajustar el modelo de datos
Validar los datos y probar la API
Rutas públicas, privadas y de autenticación
Modelo de usuarios
JSON Web Tokens
Verificar los tokens
Y más...

Durante el curso, crearás una API RESTful para un sistema de adopción de mascotas. 🐾

Captura de pantalla del curso. Implementando las rutas.

Captura de pantalla del curso. Implementando el CRUD.

Te invitamos a ver el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Leonardo José Castillo Lacruz.

Un vistazo rápido a Bun 1.0 - Una alternativa a Node.js

Cristian Fernando Villca Gutierrez — Wed, 14 Feb 2024 19:00:00 +0000

Un hombre sabio me dijo una vez: "Cuando empieces a comer Bun (panecillo), Node.js se sentirá insípido".

Pero ¿por qué es eso relevante? JavaScript se volvió mucho más rápido con un nuevo entorno de ejecución de JavaScript llamado Bun, que ahora está listo para producción con su versión 1.0.

¿Cómo y por qué es más rápido que Node.js? Me vienen a la mente muchas preguntas.

Responderé algunas de esas preguntas en este artículo. Y lo haré rápidamente, ya que ahora soy más rápido, al igual que JavaScript, que se prepara con Bun 1.0.

Bun es un conjunto de herramientas rápidas todo en uno para ejecutar, crear, probar y depurar JavaScript y TypeScript, desde un único archivo hasta una aplicación full-stack.

A continuación algunas cosas que podemos hacer con Bun:

Ejecuta tu código más rápido con Bun

Ahora no necesitamos herramientas como npm, pnpm o yarn porque Bun es 17 veces mas rápido. Eche un vistazo a los datos mostrados a continuación:

Comparación de velocidades entre Bun, pnpm, npm y yarn

Bun tarda solo 0,36 segundos en compilar su código, mientras que tarda unos 6,44 segundos en el caso de pnpm, 10,58 segundos con npm y 12,08 segundos con yarn.

Bun soporta hot reloading

Bun soporta hot reloading (recarga en caliente) desde el primer momento, por lo que no necesita herramientas como Nodemon. Actualizará automáticamente el servidor cuando se ejecute JavaScript o TypeScript.

Puede reemplazar el comando npm run con bun run para ahorrar más de 150 ms milisegundos cada vez que ejecuta un comando.

Aquí un gráfico completo:

Promedio de tiempos de hot realoding usando diferentes paquetes

Según el cuadro anterior, el uso de npm tarda unos 176 ms en ejecutarse, yarn tarda unos 131 ms. En el caso de pnpm, se necesitan 259 ms. Sin embargo, en el caso de Bun, se necesitan unos 7 ms. Eso es rápido, ¿no?

Bun es un empaquetador JavaScript

Bun también es un empaquetador de JavaScript con el mejor rendimiento de su clase y una API compatible con ESBuild, por lo que no necesitamos cosas como:

ESBuild
Webpack
Parcel, .parcelrc
Rollup, rollup.config.js

Bun ahora soporta Next.js, Remix, Nuxt, Astro, SvelteKit, Nest, SolidStart y Vite.

Bun es compatible con ESM y CommonJS

Otra gran característica de Bun es que podemos usar módulos ES6 y CommonJs juntos en el mismo archivo, lo que no era posible en Node.js.

Puedes usar import y require() en el mismo archivo:

import lodash from "lodash";
const _ = require("underscore");

ESM y CommonJs en el mismo archivo

Aparte de eso, Bun tiene soporte integrado para las API estándar web que están disponibles en los navegadores, como fetch, junto con la propia API de Bun como Bun.file() para leer un archivo de forma diferida y Bun.Write() para escribir un archivo al sistema de archivos local, que es mucho más simple que Node.js.

Ejemplo `Bun.file()`

const archivo = Bun.file("package.json");
const contenido = await archivo.text();

Leemos archivos del sistema de archivos con Bun

El código anterior leerá el contenido de un archivo package.json y transferirá su contenido a una nueva variable llamada contenido.

Ejemplo `Bun.write()`

await Bun.write("index.html", "");
await Bun.write("index.html", Buffer.from(""));
await Bun.write("index.html", Bun.file("home.html"));
await Bun.write("index.html", 
await fetch("https://ejemplo.com/"));

Escribimos archivos en el sistema de archivos

En el código anterior, Bun.write() escribirá la cadena "", o copiará el contenido del archivo home.html en el archivo index.html. Si tenemos que recuperar datos, obtendrá los resultados de una API web externa y escribirá el contenido en un archivo index.html.

¿Por que Bun es tan rápido?

Bun es rápido porque usa el motor JavaScriptCore, mientras que Node.js usa el motor JavaScript V8. El primero se ha optimizado para un tiempo de inicio más rápido.

Bun usa JavaScriptCore | Node usa V8

Si deseas hacer las cosas más rápido, debería considerar reemplazar Node.js con Bun.

¿Cómo empezar a usar Bun?

Puedes instalar Bun en sistemas MacOS y Linux usando npm:

npm install -g bun

Comando para instalar Bun en MacOs y distribuciones Linux

Ahora ya está todo listo. Para instalar un paquete npm, haz esto:

bun install

Comando para instalar paquetes usando Bun

Para iniciar una aplicación, haz esto:

bun run dev

Ejecutar una app Next.js

Para todo lo que pueda necesitar solo reemplace npm con bun.

Sin embargo, Bun sólo está listo para producción en los sistemas operativos MacOS y Linux. La versión de Windows aún es experimental. Por el momento, solo se admite el entorno de ejecución de JavaScript para Windows, y no el administrador de paquetes, el empaquetador ni el entorno de pruebas. Puedes leer más al respecto aquí.

Conclusión

Este artículo muestra cómo puedes utilizar Bun como alternativa a Node.js y acelerar su tiempo de desarrollo.

También puedes ver mi vídeo sobre El asesino de Node.js está aquí — Primer vistazo a Bun 1.0 (en inglés).

Gracias por leer.

Cómo instalar Node.js en MacOS, Linux o Windows usando NVM

Jamer José — Mon, 05 Feb 2024 02:22:21 +0000

Artículo original: How to Install Node on a MacOS, Linux, or Windows Machine Using NVM

Antes de empezar a crear aplicaciones asombrosas con Node.js, debes instalarlo. Afortunadamente, instalar Node.js es supersimple.

En este tutorial, vamos a cubrir cómo instalar NodeJS y NPM en:

macO / Linux
Windows

Una vez hayas instalado NVM, puedes gestionar fácilmente tu versión de Node con un solo comando. El siguiente videotutorial muestra como puedes descargar y ejecutar NVM en tu máquina:

Guía de instalación para Mac OS y Linux

Entra a una nueva terminal y ejecuta el siguiente comando, este bajará la versión más reciente de NVM y paso seguido, ejecutará el script de instalación:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Reinicia tu terminal para que se apliquen los cambios (o abre una nueva) y ejecuta el siguiente comando:

nvm ls

Verás una salida como esta:

            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Ahora podemos instalar cualquier versión con el siguiente comando, por ejemplo, para instalar la 12.18.1:

nvm install 12.18.1

Una vez se instale, ya está lista para ser usada. Para utilizar la versión, solo debes ejecutar el siguiente comando:

nvm use 12.18.1

Para verificar el procedimiento puedes ejecutar el siguiente comando que mostrará la versión de Node.js actual:

node --v

Esto mostrará "v12.18.1" (la cuál es la versión de Node que acabamos de instalar)

Y eso es todo - has terminado. Pásala bien :P

Ahora, si por alguna razón futura deseas desinstalar NVM, simplemente abre la terminal y ejecuta lo siguiente:

rm -rf $NVM_DIR

Guía de instalación para Windows

Primero, ve la sección de releases en el repositorio de NVM para Windows: https://github.com/coreybutler/nvm-windows/releases.

Una vez ahí seleccionamos la última versión y descargamos el archivo nvm-setup.zip

Una vez hayas descargado el instalador, dale a ejecutar y sigue los pasos que se presentan, si has descargado el archivo zip, debes extraerlo primero, puedes usar 7zip que es totalmente gratis y de código libre.

Para verificar que nvm se ha instalado correctamente, abre una nueva terminal y ejecuta el comando nvm. Una vez verificado, puedes pasar al siguiente paso.

Para instalar una versión de Node.js usando nvm lo hacemos de esta manera:

nvm install  // vamos a asumir que queremos la 12.18.1

La versión puede ser una específica (ejemplo 18.7.1) o puedes utilizar también la palabra latest para descargar la última versión LTS.

Para usar una versión en específico simplemente utilizamos el comando nvm use:

nvm use 12.18.1

Puedes verificar la versión de node ejecutando node -v en tu terminal, esto debería mostrarte v12.18.1.

Ya con estos pasos deberías tener una versión de Node.js corriendo en tu máquina. Mucha suerte con tu código compañero. :)

Déjame saber si encontraste esta guía útil. Déjame un mensaje en twitter (twitter.com/adeelibr).

Node.js Streams: Todo lo que necesitas saber

Luis E. Alvarado — Thu, 02 Mar 2023 20:23:56 +0000

Artículo original: Node.js Streams: Everything you need to know

Actualización: Este artículo es ahora parte de mi libro "Node.js Beyond The Basics".

Lee la versión actualizada de este contenido y más sobre Node en jscomplete.com/node-beyond-basics.

Los flujos de Node.js (streams)tienen la reputación de ser difíciles de trabajar, y aún más difíciles de entender. Bueno, tengo buenas noticias para ti - ese ya no es el caso.

A lo largo de los años, los desarrolladores han creado montones de paquetes con el único propósito de facilitar el trabajo con flujos. Pero en este artículo, voy a centrarme en la API nativa de flujos de Node.js.

“Los flujos son la mejor y más incomprendida idea de Node.”

— Dominic Tarr

¿Qué son exactamente los flujos?

Los flujos son colecciones de datos, como las matrices o las cadenas de texto. La diferencia es que estos pueden no estar disponibles todos a la vez y no tienen por qué caber en la memoria. Esto hace que sean realmente potentes cuando se trabaja con grandes cantidades de datos, o con datos que vienen de una fuente externa de uno en uno.

Sin embargo, los flujos no sólo sirven para trabajar con grandes cantidades de datos. También nos ofrecen la posibilidad de componer nuestro código. Al igual que podemos componer poderosos comandos de Linux mediante la canalización de otros comandos más pequeños, podemos hacer exactamente lo mismo en Node con los flujos.

Compatibilidad con comandos Linux

const grep = ... // Un flujo para la salida de grep
const wc = ... // A stream for the wc input

grep.pipe(wc)

Muchos de los módulos incorporados en Node implementan la interfaz de streaming:

La lista anterior tiene algunos ejemplos de objetos nativos de Node.js que también son flujos legibles y escribibles. Algunos de estos objetos son flujos tanto legibles como escribibles, como los sockets TCP, zlib y flujos crypto.

Observa que los objetos también están estrechamente relacionados. Mientras que una respuesta HTTP es un flujo legible en el cliente, es un flujo escribible en el servidor. Esto se debe a que en el caso HTTP, básicamente leemos de un objeto (http.IncomingMessage) y escribimos en el otro (http.ServerResponse).

Observe también cómo los flujos stdio ( stdin, stdout, stderr) tienen los tipos de flujo inversos cuando se trata de procesos hijo. Esto permite una manera realmente fácil de canalizar hacia y desde estos flujos desde los flujos stdio del proceso principal.

Un ejemplo práctico de flujos

La teoría está muy bien, pero a menudo no convence al 100%. Veamos un ejemplo que demuestra la diferencia que pueden marcar los flujos en el código en lo que respecta al consumo de memoria.

Primero vamos a crear un archivo grande:

const fs = require('fs');
const archivo = fs.createWriteStream('./big.file');

for(let i=0; i<= 1e6; i++) {
  file.write('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n');
}

file.end();

Mira lo que usé para crear ese gran archivo. ¡Un stream escribible!

El módulo fs se puede utilizar para leer y escribir en archivos utilizando una interfaz de flujo. En el ejemplo anterior, estamos escribiendo en ese big.file a través de un flujo escribible de 1 millón de líneas con un bucle.

Ejecutando el script de arriba se genera un archivo de unos ~400 MB.

Aquí hay un simple servidor web Node diseñado para servir exclusivamente el big.file:

const fs = require('fs');
const servidor = require('http').createServer();

servidor.on('request', (peticion, respuesta) => {
  fs.readFile('./big.file', (error, data) => {
    if (error) throw error;
  
    respuesta.end(data);
  });
});

servidor.listen(8000);

Cuando el servidor reciba una petición, servirá el archivo grande usando el método asíncrono, fs.readFile. Pero bueno, no es que estemos bloqueando el bucle de eventos ni nada. Todo va genial, ¿verdad? ¿Verdad?

Bueno, veamos qué pasa cuando ejecutamos el servidor, nos conectamos a él, y monitorizamos la memoria mientras lo hacemos.

Cuando ejecuté el servidor, empezó con una cantidad normal de memoria, 8.7 MB:

Luego me conecté al servidor. Observe lo que ocurrió con la memoria consumida:

Vaya, el consumo de memoria ha subido a 434,8 MB.

Básicamente ponemos todo el big.file en memoria antes de escribirlo en el objeto de respuesta. Esto es muy ineficiente.

El objeto de respuesta HTTP (res el objeto de respuesta HTTP) es también un flujo escribible. Esto significa que si tenemos un flujo legible que representa el contenido de big.file, podemos superponerlas y obtener prácticamente el mismo resultado sin consumir ~400 MB de memoria.

El módulo fs de Node puede proporcionarnos un flujo legible para cualquier archivo utilizando el método createReadStream. Podemos enviarlo al objeto de respuesta:

const fs = require('fs');
const servidor = require('http').createServer();

servidor.on('request', (peticion, respuesta) => {
  const src = fs.createReadStream('./big.file');
  src.pipe(respuesta);
});

servidor.listen(8000);

Ahora, cuando te conectas a este servidor, ocurre algo mágico (fíjate en el consumo de memoria):

¿Qué es lo que ocurre?

Cuando un cliente pide un archivo tan grande, lo transmitimos de uno en uno, lo que significa que no lo almacenamos en memoria. El uso de memoria creció unos 25 MB y eso es todo.

Puedes llevar este ejemplo al límite. Regenera el archivo big.file con cinco millones de líneas en lugar de sólo un millón, lo que llevaría el archivo a más de 2 GB, y eso es realmente más grande que el límite de búfer por defecto en Node.

Si intentas servir ese archivo utilizando fs.readFile, simplemente no puedes, por defecto (puedes cambiar los límites). Pero con fs.createReadStream, no hay ningún problema en transmitir 2 GB de datos al solicitante, y lo mejor de todo es que el uso de memoria del proceso será aproximadamente el mismo.

¿Listo para aprender sobre flujos ahora?

Flujos 101

Hay cuatro tipos fundamentales de flujos en Node.js: Lectura, escritura, dúplex, y transformación de flujos.

Un flujo legible es una abstracción de una fuente desde la que se pueden consumir datos. Un ejemplo de ello es el método fs.createReadStream.
Un flujo escribible es una abstracción de un destino en el que se pueden escribir datos. Un ejemplo de ello es el método fs.createWriteStream.
Un flujo dúplex es tanto legible como escribible. Un ejemplo de ello es un socket TCP.
Un flujo de transformación es básicamente un flujo dúplex que puede utilizarse para modificar o transformar los datos a medida que se escriben y se leen. Un ejemplo de ello es el flujo zlib.createGzip para comprimir los datos usando "gzip". Puedes pensar en un flujo de transformación como una función en la que la entrada es la parte del flujo que se puede escribir y la salida es la parte del flujo que se puede leer. También puedes oír referirse a los flujos de transformación como "flujos pasantes".

Todos los flujos son instancias de EventEmitter. Emiten eventos que pueden utilizarse para leer y escribir datos. Sin embargo, podemos consumir los datos en los flujos de una forma más sencilla utilizando el método pipe.

El método "pipe"

Esta es la línea mágica que debes recordar:

fuenteLegible.pipe(destinoEscribible)

En esta simple línea, estamos canalizando la salida de un flujo legible - la fuente de datos, como la entrada de un flujo escribible - el destino. La fuente tiene que ser un flujo legible y el destino uno escribible. Por supuesto, ambos pueden ser también flujos dúplex/transformados. De hecho, si estamos canalizando a un flujo dúplex, podemos encadenar llamadas de canalización como hacemos en Linux:

fuenteLegible
  .pipe(transformarFlujo1)
  .pipe(transformarFlujo2)
  .pipe(destinoEscribibleFinal)

El método pipe retorna el flujo de destino, lo que nos permitió hacer el encadenamiento anterior. Para flujos a (legible), b and c (duplex), and d (escribible), podemos:

a.pipe(b).pipe(c).pipe(d)

# Que es equivalente a:
a.pipe(b)
b.pipe(c)
c.pipe(d)

# Que, en Linux, es equivalente a:
$ a | b | c | d

El método pipe es la forma más sencilla de consumir flujos. Por lo general, se recomienda utilizar el método pipe o consumir flujos con eventos, pero evite mezclar estos dos. Usualmente cuando estás usando el método pipe no es necesario utilizar eventos, pero si necesita consumir los flujos de forma más personalizada, los eventos serían el camino a seguir.

Eventos de flujo

Además de leer de una fuente legible y escribir en un destino escribible, el método pipe gestiona automáticamente algunas cosas por el camino. Por ejemplo, gestiona los errores, el fin de los archivos y los casos en los que un flujo es más lento o más rápido que el otro.

Sin embargo, los flujos también se pueden consumir con eventos directamente. A continuación se muestra el código simplificado equivalente a un evento de lo que el método pipehace principalmente para leer y escribir información:

# legible.pipe(escribible)

legible.on('data', (trozo) => {
  escribible.write(trozo);
});

legible.on('end', () => {
  escribible.end();
});

He aquí una lista de los eventos y funciones importantes que pueden utilizarse con flujos legibles y escribibles:

Node.js avanzado

Los eventos y las funciones están relacionados de algún modo porque suelen utilizarse juntos.

Los eventos más importantes en un flujo legible son:

El evento data, que se emite cada vez que el flujo pasa un trozo de datos al consumidor.
El evento end, que se emite cuando no hay más datos que consumir del flujo.

Los eventos más importantes en un flujo escribible son:

El evento drain, que es una señal de que el flujo escribible puede recibir más datos.
El evento finish, que se emite cuando todos los datos se han vaciado en el sistema subyacente.

Los eventos y las funciones pueden combinarse para hacer un uso personalizado y optimizado de los flujos. Para consumir un flujo legible, podemos utilizar los métodos pipe/unpipe, o los métodos read/unshift/resume. Para consumir un flujo escribible, podemos convertirlo en el destino de pipe/unpipe, o simplemente escribir en él con la función write y llame al método end cuando hayamos terminado.

Modos de pausa y fluyente en flujos legibles

Los flujos legibles tienen dos modos principales que afectan a la forma en que podemos consumirlos:

Puede estar en modo pausa.
O en modo fluido.

Estos modos se denominan a veces "pull" y "push".

Todos los flujos legibles se inician por defecto en el modo pausado, pero pueden cambiarse fácilmente a fluido y de nuevo a pausado cuando sea necesario. A veces, el cambio se produce automáticamente.

Cuando un flujo legible está en modo de pausa, podemos utilizar la función read()para leer del flujo bajo demanda, sin embargo, para un flujo legible en el modo de flujo, los datos fluyen continuamente y tenemos que escuchar los eventos para consumirlos.

En el modo de flujo, los datos pueden perderse si no hay consumidores disponibles para manejarlos. Esta es la razón por la que, cuando tenemos un flujo legible en modo de flujo, necesitamos un manejador de eventos para la data. De hecho, solo añadiendo un manejador de eventos para la data cambia un flujo en pausa al modo de flujo y eliminar el manejador vuelve a poner el flujo en modo pausa. Parte de esto se hace por compatibilidad con la antigua interfaz de flujos de Node.

Para cambiar manualmente entre estos dos modos de flujo, puede utilizar la función resume() y pause().

Node.js avanzado

Al consumir flujos legibles mediante la función pipe, no tenemos que preocuparnos de estos modos ya que pipe los gestiona automáticamente.

Implementando flujos

Cuando hablamos de streams en Node.js, hay dos tareas principales diferentes:

La tarea de implantar los flujos.
La tarea de consumirlos.

Hasta ahora sólo hemos hablado de consumir flujos. ¡Pongamos algunos en práctica!

Los ejecutores de los flujos suelen ser los que requiere el módulo stream.

Implementando un flujo escribible

Para implementar un flujo con capacidad de escritura, necesitamos utilizar la función Writable del módulo de flujo.

const { Escribible } = require('flujo');

Podemos implementar un flujo escribible de muchas maneras. Podemos, por ejemplo, extender el constructor Writable si queremos:

class miFlujoEscribible extends Escribible {
}

Sin embargo, prefiero el enfoque más simple del constructor. Simplemente creamos un objeto a partir del constructor Writable y pasarle una serie de opciones. La única opción obligatoria es la función write que expone el trozo de datos que se va a escribir.

const { Escribible } = require('flujo');

const outStream = new Escribible({
  write(trozo, codificacion, callback) {
    console.log(trozo.toString());
    callback();
  }
});

process.stdin.pipe(outStream);

This write method takes three arguments.

El trozo suele ser un buffer a no ser que configuremos el flujo de otra manera.
El argumento de codificación es necesario en ese caso, pero normalmente podemos ignorarlo.
El callback es una función que necesitamos llamar después de que hayamos terminado de procesar el trozo de datos. Es lo que señala si la escritura fue exitosa o no. Para señalar un fallo, llame a la devolución de llamada con un objeto de error.

En outStream, nosotros simplemente imprimimos con la función console.log el trozo como una cadena y llamar a la devolución de llamada después de que sin un error para indicar el éxito. Este es un flujo de eco muy simple y probablemente no tan útil. Se hará eco de todo lo que reciba.

Para consumir este flujo, podemos utilizarlo simplemente con process.stdin, que es un flujo legible, por lo que podemos simplemente canalizar process.stdin hacia nuestro outStream.

Cuando ejecutamos el código anterior, cualquier cosa que escribamos en process.stdin se devolverá utilizando el método outStream console.log.

No es un flujo muy útil de implementar porque en realidad ya está implementado e incorporado. Esto es muy equivalente a process.stdout. Podemos canalizar stdin hacia stdout y obtendremos exactamente la misma función de eco con esta única línea:

process.stdin.pipe(process.stdout);

Implementa un flujo legible

Para implementar un flujo legible, necesitamos la interfaz Readable, y construir un objeto a partir de él, e implementar un método read() en el parámetro de configuración del flujo:

const { Legible } = require('flujo');

const enFlujo = new Legible({
  read() {}
});

Hay una forma sencilla de implementar flujos legibles. Podemos utilizar directamente push para insertar los datos que queremos que consuman los consumidores.

const { Legible } = require('flujo'); 

const enFlujo = new Legible({
  read() {}
});

enFlujo.push('ABCDEFGHIJKLM');
enFlujo.push('NOPQRSTUVWXYZ');

enFlujo.push(null); // No más datos

enFlujo.pipe(process.stdout);

Cuando usamos push en un objeto null, que significa que queremos señalar que el flujo no tiene más datos.

Para consumir este simple flujo de lectura, podemos simplemente canalizarlo en el flujo de escritura process.stdout.

Cuando ejecutemos el código anterior, estaremos leyendo todos los datos de enFlujo y enviarlo a la salida estándar. Muy sencillo, pero también poco eficiente.

Básicamente estamos empujando todos los datos en el flujo antes de canalizarlos a process.stdout. La mejor manera de hacerlo es enviar los datos a petición del consumidor. Podemos hacerlo implementando la función read()en el objeto de configuración:

const enFlujo = new Legible({
  read(tamaño) {
    // hay una demanda de datos... alguien desea leerlos.
  }
});

Cuando se llama al método de lectura en un flujo legible, la implementación puede enviar datos parciales a la cola. Por ejemplo, podemos empujar una letra a la vez, comenzando con el código de carácter 65 (que representa A), y el aumento que en cada empuje:

const enFlujo = new Legible({
  read(tamaño) {
    this.push(String.fromCharCode(this.currentCharCode++));
    if (this.currentCharCode > 90) {
      this.push(null);
    }
  }
});

enFlujo.currentCharCode = 65;

enFlujo.pipe(process.stdout);

Mientras el consumidor está leyendo un flujo legible, el método read continuará disparándose, y empujaremos más letras. Tenemos que detener este ciclo en algún lugar, y es por eso que una sentencia if para empujar null cuando el currentCharCode (código de carácter actual) es mayor que 90 (que representa Z).

Este código es equivalente al más simple con el que empezamos, pero ahora estamos empujando los datos bajo demanda cuando el consumidor lo pide. Usted siempre debe hacer eso.

Implementando flujos Dúplex/Transformación

Con los flujos dúplex, podemos implementar tanto flujos de lectura como de escritura con el mismo objeto. Es como si heredáramos de ambas interfaces.

A continuación se muestra un ejemplo de flujo dúplex que combina los dos ejemplos de escritura y lectura implementados anteriormente:

const { Duplex } = require('flujo');

const inoutStream = new Duplex({
  write(trozo, codificacion, callback) {
    console.log(trozo.toString());
    callback();
  },

  read(tamaño) {
    this.push(String.fromCharCode(this.currentCharCode++));
    if (this.currentCharCode > 90) {
      this.push(null);
    }
  }
});

inoutStream.currentCharCode = 65;

process.stdin.pipe(inoutStream).pipe(process.stdout);

Combinando los métodos, podemos utilizar este flujo dúplex para leer las letras de la A a la Z y también podemos utilizarlo por su función de eco. Canalizamos el flujo legible stdin en este flujo dúplex para utilizar la función de eco y canalizamos el propio flujo dúplex en el archivo escribible stdout para ver las letras de la A a la Z.

Es importante entender que los lados legible y grabable de un flujo dúplex funcionan de forma completamente independiente el uno del otro. Se trata simplemente de una agrupación de dos características en un objeto.

Un flujo de transformación es el flujo dúplex más interesante porque su salida se calcula a partir de su entrada.

Para un flujo de transformación, no tenemos que implementar la función read o write, sólo necesitamos implementar un método transform, que combina ambos. Tiene la firma del método write y podemos utilizarlo para insertar con push los datos también.

Aquí tienes un simple flujo de transformación que devuelve cualquier cosa que escribas en él después de transformarla a formato de mayúsculas:

const { Transform } = require('flujo');

const aMayuscula = new Transform({
  transform(trozo, codificacion, callback) {
    this.push(trozo.toString().toUpperCase());
    callback();
  }
});

process.stdin.pipe(aMayuscula).pipe(process.stdout);

En este flujo de transformación, que estamos consumiendo exactamente igual que en el ejemplo anterior de flujo dúplex, sólo implementamos el método transform(). En ese método, convertimos el trozo en su versión en mayúsculas y, a continuación, se usa el método push en esa versión como la parte legible.

Modo de flujos como objeto

Por defecto, los flujos esperan valores Buffer/String. Hay un marcador objectMode que podemos configurar para que el flujo acepte cualquier objeto JavaScript.

He aquí un ejemplo sencillo para demostrarlo. La siguiente combinación de flujos de transformación permite mapear una cadena de valores separados por comas en un objeto JavaScript. Así “a,b,c,d” se cionvierte a {a: b, c: d}.

const { Transform } = require('flujo');

const separadorDeComa = new Transform({
  modoDeLecturaObjeto: true,
  
  transform(trozo, codificacion, callback) {
    this.push(trozo.toString().trim().split(','));
    callback();
  }
});

const arrayAObjeto = new Transform({
  modoDeLecturaObjeto: true,
  modoDeEscrituraObjeto: true,
  
  transform(trozo, codificacion, callback) {
    const objeto = {};
    for(let i=0; i < trozo.length; i+=2) {
      objeto[trozo[i]] = trozo[i+1];
    }
    this.push(objeto);
    callback();
  }
});

const objetoAString = new Transform({
  modoDeEscrituraObjeto: true,
  
  transform(trozo, codificacion, callback) {
    this.push(JSON.stringify(trozo) + '\n');
    callback();
  }
});

process.stdin
  .pipe(separadorDeComa)
  .pipe(arrayAObjeto)
  .pipe(objetoAString)
  .pipe(process.stdout)

Pasamos la cadena de entrada (por ejemplo, “a,b,c,d”) a través de separadorDeComa que empuja un array como sus datos legibles ([“a”, “b”, “c”, “d”]). Añadir el marcador modoDeEscrituraObjeto en ese flujo es necesario porque estamos empujando un objeto allí, no una cadena.

A continuación, tomamos la matriz y la introducimos en el archivo arrayAObjeto. Necesitamos un marcador modoDeEscrituraObjetopara hacer que ese flujo acepte un objeto. También empujará un objeto (el array de entrada mapeado en un objeto) y por eso también necesitábamos el marcador modoDeLecturaObjeto ahí también. El último flujo objetoAString acepta un objeto pero expulsa una cadena, y por eso sólo necesitábamos un botón modoDeEscrituraObjeto ahí. La parte legible es una cadena normal (el objeto que se convirtió a string).

Uso del ejemplo anterior

Los flujos de transformación incorporados en Node.js

Node tiene algunos flujos de transformación incorporados muy útiles. A saber, los flujos "zlib" y "crypto".

He aquí un ejemplo que utiliza la función zlib.createGzip() combinados con los flujos fs que se pueden leer y escribir para crear un código para comprimir archivos:

const fs = require('fs');
const zlib = require('zlib');
const archivo = process.argv[2];

fs.crearFlujoDeLectura(archivo)
  .pipe(zlib.crearGzip())
  .pipe(fs.crearFlujoDeEscritura(archivo + '.gz'));

Puedes usar este script para comprimir cualquier archivo que pases como argumento. Estamos canalizando un flujo legible para ese archivo en el flujo de transformación incorporado en "zlib" y luego en un flujo de escritura para el nuevo archivo comprimido. Simple.

Lo bueno de usar tuberías es que podemos combinarlas con eventos si lo necesitamos. Digamos, por ejemplo, que quiero que el usuario vea un indicador de progreso mientras el script está trabajando y un mensaje de "Hecho" cuando el script haya terminado. Ya que el método pipe devuelve el flujo de destino, podemos encadenar también el registro de manejadores de eventos:

const fs = require('fs');
const zlib = require('zlib');
const archivo = process.argv[2];

fs.crearFlujoDeLectura(archivo)
  .pipe(zlib.crearGzip())
  .on('data', () => process.stdout.write('.'))
  .pipe(fs.crearFlujoDeEscritura(archivo + '.zz'))
  .on('finish', () => console.log('Hecho'));

Así que con el método pipe, conseguimos consumir flujos fácilmente, pero aún podemos personalizar más nuestra interacción con esos flujos utilizando eventos cuando sea necesario.

Lo que es genial del método pipe es que podemos utilizarlo para componer nuestro programa pieza a pieza, de una forma mucho más legible. Por ejemplo, en lugar de escuchar el evento data más arriba, podemos simplemente crear un flujo de transformación para informar del progreso, y reemplazar el método .on() con otra invocación del método .pipe():

const fs = require('fs');
const zlib = require('zlib');
const archivo = process.argv[2];

const { Transform } = require('flujo');

const reportarProgreso = new Transform({
  transform(trozo, encoding, callback) {
    process.stdout.write('.');
    callback(null, trozo);
  }
});

fs.crearFlujoDeLectura(archivo)
  .pipe(zlib.crearGzip())
  .pipe(reportarProgreso)
  .pipe(fs.crearFlujoDeLectura(archivo + '.zz'))
  .on('finish', () => console.log('Hecho'));

El flujo reportProgress es un simple flujo de paso, pero también informa del progreso a la salida estándar. Fíjate en cómo he utilizado el segundo argumento en el método callback() para empujar los datos dentro del método transform(). Esto equivale a empujar primero los datos.

Las aplicaciones de combinar flujos son infinitas. Por ejemplo, si necesitamos encriptar el archivo antes o después de gziparlo, todo lo que tenemos que hacer es canalizar otro flujo de transformación en ese orden exacto que necesitábamos. Podemos utilizar el módulo crypto de Node para eso:

const crypto = require('crypto');
// ...

fs.crearFluejoDeLectura(archivo)
  .pipe(zlib.crearGzip())
  .pipe(crypto.crearCipher('aes192', 'a_secret'))
  .pipe(reportarProgreso)
  .pipe(fs.crearFlujoDeEscritura(archivo + '.zz'))
  .on('finish', () => console.log('Hecho'));

El script anterior comprime y luego encripta el archivo pasado y sólo aquellos que tienen el secreto pueden utilizar el archivo de salida. No podemos descomprimir este archivo con las utilidades normales de descompresión porque está cifrado.

Para poder descomprimir cualquier cosa comprimida con el script anterior, necesitamos utilizar los flujos opuestos para "crypto" y "zlib" en orden inverso, lo cual es sencillo:

fs.crearFlujoDeLectura(archivo)
  .pipe(crypto.crearDecifrador('aes192', 'a_secret'))
  .pipe(zlib.crearGunzip())
  .pipe(reportarProgreso)
  .pipe(fs.crearFlujoDeLectura(archivo.slice(0, -3)))
  .on('finish', () => console.log('Hecho'));

Asumiendo que el archivo pasado es la versión comprimida, el código anterior creará un flujo de lectura a partir de él, lo canalizará en el flujo de "crypto" createDecipher() (utilizando el mismo secreto), canalice la salida de éste archivo en el flujo "fzlib" createGunzip(), y luego escribir las cosas de nuevo a un archivo sin la parte de la extensión.

Eso es todo lo que tengo para este tema. Gracias por leernos. Hasta la próxima.

Cómo Construir una Aplicación de Chat en Tiempo Real en Node.js Usando Express, Mongoose y Socket.io

Vanessa Pineiro Morales — Tue, 24 Jan 2023 02:46:39 +0000

Artículo original: How to build a real time chat application in Node.js using Express, Mongoose and Socket.io

En este tutorial, utilizaremos la plataforma Node.js para crear una aplicación de chat en tiempo real que envíe y muestre mensajes a un destinatario al instante sin actualizar la página. Usaremos el framework de JavaScript Express.js y las bibliotecas Mongoose y Socket.io para lograr esto.

Antes de comenzar, echemos un vistazo rápido a los conceptos básicos de Node.js

Node.js

Node.js es un entorno de tiempo de ejecución de JavaScript, de código abierto y multiplataforma que ejecuta código JavaScript fuera del navegador. La ventaja más importante de usar Node es que podemos usar JavaScript como lenguaje tanto de front-end como de back-end.

Como sabemos, JavaScript se usó principalmente para secuencias de comandos del lado del cliente, en las que las secuencias de comandos se incrustaron en el HTML de una página web y se ejecutaron en el lado del cliente mediante un motor de JavaScript en el navegador web del usuario.

Node.js permite a los desarrolladores usar JavaScript para escribir herramientas de línea de comandos y para secuencias de comandos del lado del servidor —ejecutando secuencias de comandos del lado del servidor para producir contenido de página web dinámico antes de que la página se envíe al navegador web del usuario.

Para instalar node:

https://nodejs.org/es/download/

Aunque el node tiene un solo subproceso, aún es más rápido usar funciones asíncronas. Por ejemplo, Node puede procesar otras cosas mientras se lee un archivo del disco o mientras se espera que se complete una solicitud HTTP. El comportamiento asincrónico se puede implementar mediante devoluciones de callback. Además, JavaScript funciona bien con bases de datos JSON y No-SQL.

Módulos NPM

Nodejs permite incluir en la aplicación los módulos de las librerías. Estos módulos pueden ser módulos definidos por el usuario o de terceros.

Los módulos de terceros se pueden instalar con el siguiente comando:

npm install nombre_del_módulo

y los módulos instalados se pueden usar usando la función require():

var módulo = require(‘nombre_del_módulo’)

En las aplicaciones de Node, usaremos un archivo package.json para mantener las versiones del módulo. Este archivo se puede crear con este comando:

npm init

y los paquetes deben instalarse de la siguiente manera:

npm install -s nombre_del_módulo

Hay muchos frameworks que se pueden agregar como módulos a nuestra aplicación Node. Estos se explicarán más adelante según sea necesario.

Aplicación de Chat Simple

La aplicación debe permitir que varios usuarios chateen juntos. Los mensajes deben actualizarse sin refrescar la página. Para simplificar, evitaremos la parte de autenticación.

Podemos empezar por crear un nuevo directorio de proyecto y pasar a él. Luego podemos iniciar nuestro proyecto con el siguiente comando:

npm init

Esto nos pedirá que ingresemos detalles sobre nuestro proyecto.

Después de esto, se creará un archivo package.json:

{
 “name”: “test”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1"
 },
 “author”: “”,
 “license”: “ISC”
}

Nuestro directorio de aplicaciones ya está configurado.

Lo primero que necesitamos crear es un servidor. Para crear eso, utilizaremos un framework llamado Express.

Express.js

Express.js, o simplemente Express, es un framework de aplicación web para Node.js. Express ofrece un sólido conjunto de características para aplicaciones web y móviles. Express ofrece una capa delgada de características fundamentales de aplicaciones web, sin encubrir las características de Node.js.

Instalaremos Express.js usando el siguiente comando:

npm install -s express

Dentro del archivo package.json se agregará una nueva línea:

dependencies”: {
 “express”: “⁴.16.3”
 }

A continuación, crearemos un archivo server.js.

En este archivo necesitamos requerir Express y crear una referencia a una variable desde una instancia de Express. Los contenidos estáticos como HTML, CSS o JavaScript se pueden servir usando express.js:

var express = require(‘express’);

var app = express();

y podemos comenzar a escuchar un puerto usando el código:

var servidor = app.listen(3000, () => {
 console.log(‘el servidor se está ejecutando en el puerto’, servidor.address().port);
});

Ahora necesitamos crear un archivo HTML index.html que muestre nuestra interfaz de usuario. He agregado bootstrap y JQuery cdn.

//index.html




 


 

 
 Enviar mensaje

Tenga en cuenta que la etiqueta vacía

Ahora necesitamos crear una acción de emisión cuando se crea un mensaje en server.js. Así que la ruta de publicación se convierte en esto:

app.post('/mensajes', (req, res) => {
  var mensaje = new Mensaje(req.body);
  mensaje.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('mensaje', req.body);
    res.sendStatus(200);
  })
})

Y en la etiqueta del script del lado del cliente en index.html, agregue el siguiente código:

var socket = io();

socket.on(‘mensaje’, agregarMensajes)

Entonces, cada vez que se publica un mensaje, el servidor actualizará los mensajes en el div de mensajes.

¡¡Gran!!

Esta es una aplicación muy básica que podemos crear en Node.js. Hay muchas posibilidades de mejora. El código terminado se puede encontrar en https://github.com/amkurian/simple-chat

server.js

var express = require('express');
var bodyParser = require('body-parser')
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mongoose = require('mongoose');

app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))

var Mensaje = mongoose.model('Mensaje',{
  nombre : String,
  mensaje : String
})

var dbUrl = 'mongodb://username:password@ds257981.mlab.com:57981/simple-chat'

app.get('/mensajes', (req, res) => {
  Mensaje.find({},(err, mensajes)=> {
    res.send(mensajes);
  })
})

app.get('/mensajes', (req, res) => {
  Mensaje.find({},(err, mensajes)=> {
    res.send(mensajes);
  })
})

app.post('/mensajes', (req, res) => {
  var mensaje = new Mensaje(req.body);
  mensaje.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('mensaje', req.body);
    res.sendStatus(200);
  })
})

io.on('connection', () =>{
  console.log('Un usuario esta conectado')
})

mongoose.connect(dbUrl ,{useMongoClient : true} ,(err) => {
  console.log('Mongodb conectado',err);
})

var servidor = http.listen(3001, () => {
 console.log(‘el servidor se está ejecutando en el puerto’, servidor.address().port);
});

Espero que esto haya sido útil para comprender algunos conceptos básicos.

Algunos enlaces útiles

Socket.IO
SOCKET.IO 2.0 IS HERE FEATURING THE FASTEST AND MOST RELIABLE REAL-TIME ENGINE ~/Projects/tweets/index.js var io =…socket.io

Express - Node.js web application framework
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com

http://mongoosejs.com/

Aprende Node.js y Express - Curso desde cero

Estefania Cassingena Navone — Sun, 07 Aug 2022 21:00:00 +0000

¡Hola! Si quieres aprender Node.js y Express, estás en el lugar correcto.
En este artículo encontrarás una breve introducción al desarrollo web back-end, Node.js y Express. Aprenderás por qué son herramientas muy poderosas para desarrollar servidores y por qué deberías aprenderlos si tu meta es adentrarte en el mundo del desarrollo web back-end.
Luego, encontrarás un curso de 8.5 horas de Node.js y Express en el canal de YouTube de freeCodeCamp en español donde puedes aprender los fundamentos en español y construir un proyecto paso a paso.
¡Comencemos! ✨
🔸 ¿Qué es el desarrollo web back-end?
El desarrollo web ha transformado nuestro mundo. Cada día accedemos a internet para encontrar información, aprender, comprar productos, compartir opiniones y comunicarnos con familiares y amigos.
Básicamente, nuestras vidas no serían lo mismo sin los sitios web.
¿Estás de acuerdo? 🙂
Si estás de acuerdo, entonces aprendiendo desarrollo web puedes desarrollarte en una carrera muy gratificante y puedes impactar las vidas de miles o millones de usuarios desarrollando aplicaciones web.
Hablemos sobre las distintas áreas del desarrollo web.
Desarrollo web front-end vs. desarrollo web back-end
Los desarrolladores que crean estas aplicaciones web asombrosas son llamados desarrolladores web. Pueden especializarse para desarrollar partes específicas de una aplicación web:
Los desarrolladores web front-end implementan la parte de la aplicación web con la cual los usuarios interactúan directamente. Crean la parte visible de las plataformas asombrosas que usamos cada día. En la analogía de la tienda que puedes ver en la imagen anterior, el front-end estaría representado por la parte de la tienda que los clientes pueden ver.
Los desarrolladores web back-end implementan toda la funcionalidad que los usuarios no ven, tales como los servidores, bases de datos y todas sus interacciones con el front-end de la aplicación.
Los desarrolladores web full-stack se encargan de ambas áreas. Tienen conocimiento extenso sobre desarrollo web front-end y back-end.
Interesante, ¿cierto? ✨
Veamos más detalles sobre el desarrollo web back-end porque esta es una de las principales aplicaciones de Node.js y Express.
El modelo cliente-servidor
El internet está basado en el modelo o la arquitectura cliente-servidor, en la cual dos dispositivos (el cliente y el servidor) se comunican entre sí.
Diagrama del modelo cliente-servidor. Cliente (izquierda). Servidor (derecha).
El cliente
Cuando intentas acceder a una página web en tu navegador, el navegador (cliente) envía una solicitud HTTP al servidor.
El servidor
El servidor es un programa que escucha solicitudes y genera respuestas apropiadas. Estas respuestas incluyen:
Enviar información al cliente.
Ejecutar tareas o procesos.
Trabajar con la información de una base de datos y/o actualizarla.
Por ejemplo, podemos agregar un usuario nuevo a una base de datos al enviar una solicitud al servidor y el servidor debe realizar las actualizaciones correspondientes en la base de datos.
Cliente (izquierda) - Servidor (centro) - Base de datos (derecha)
Desarrollar y mantener servidores es una de las tareas principales de los desarrolladores back-end y esa es precisamente la función principal de Node.js y Express.
🔹 ¿Qué es Node.js?
Node.js es un runtime de JavaScript asíncrono y basado en eventos desarrollado en base al motor V8 de JavaScript de Chrome. Nos da todas las herramientas que necesitamos para ejecutar JavaScript en el terminal sin un navegador web (browser).
💡 Dato: Antes de Node.js, no podíamos ejecutar programas de JavaScript sin un navegador web. Solo los navegadores habían sido diseñados para esta tarea ya que JavaScript es uno de los principales lenguajes de programación de la web.
Lo asombroso de Node.js es que nos permite construir aplicaciones escalables con alto rendimiento.
De acuerdo a su documentación oficial:
Los usuarios de Node.js están libres de preocuparse por el bloqueo del proceso, ya que no existe. Casi ninguna función en Node.js realiza I/O directamente, por lo que el proceso nunca se bloquea. Por ello, es muy propicio desarrollar sistemas escalables en Node.js.
🚩 Es importante resaltar que Node.js no es un:
Lenguaje de programación.
Framework.
Librería (biblioteca).
Es un runtime de JavaScript desarrollado para ejecutar código de JavaScript.
¿Por qué deberías aprender Node.js?
Ahora que ya sabes más sobre Node.js, veamos por qué deberías aprenderlo.
Node.js es una de las tecnologías web más populares entre los desarrolladores, incluyendo principiantes que están aprendiendo a programar y profesionales.
Logo de Node.js
La popularidad de Node.js es asombrosa. De acuerdo a la encuesta 2022 Stack Overflow Developer Survey, es una de las tecnologías web más populares usadas por los que están aprendiendo a programar y por desarrolladores profesionales.
Cuando a los encuestados se les preguntó cuáles frameworks web o tecnologías web habían usado constantemente el año pasado y con cuáles querían trabajar el próximo año, Node.js obtuvo un 47.12% de los votos.
💡 Dato: ¡casi la mitad de las 58,743 respuestas!
Los resultados de la categoría de Web Frameworks and technologies de la encuesta 2022 Stack Overflow Developer Survey. Node.js es el primero con 47.12% de las respuestas.
Ese porcentaje fue incluso mayor entre los encuestados que estaban aprendiendo a programar: 52.86%. Asombroso, ¿verdad? 😁
Los resultados de la categoría de Web Frameworks and technologies de la encuesta 2022 Stack Overflow Developer Survey cuando se selecciona Learning to Code. Node.js es el primero con 52.86% de las respuestas.
Esto demuestra el impacto que Node.js está teniendo en el área del desarrollo web. Al aprender Node.js estarás invirtiendo tu tiempo y recursos sabiamente. Adquirirás habilidades valiosas y altamente demandadas en este campo.
🔸 ¿Qué es Express?
Si tu meta es desarrollar servidores con Node.js, el proceso puede ser mucho más fácil si usas Express, un framework de aplicaciones web específicamente diseñado para Node.js.
Según la documentación oficial de Express:
Express es un framework de aplicaciones web de Node.js mínimo y flexible que provee un conjunto robusto de herramientas para aplicaciones web y móviles.
Original en inglés:
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
💡 Dato: Express incluye muchas herramientas que puedes usar para escribir código más conciso, fácil de leer y fácil de mantener. Confía en mi. Cuando comiences a trabajar con Express, nunca querrás dejarlo.
Express tiene muchos métodos HTTP útiles y middleware que puedes usar para crear APIs robustas (Application Programming Interfaces), las cuales son fundamentales para el desarrollo web back-end y full-stack.
En la encuesta 2022 Stack Overflow Developer Survey, Express fue la cuarta tecnología o framework web más usado con 22.99% de los votos:
Los resultados de la categoría Web Frameworks and technologies de la encuesta 2022 Stack Overflow Developer Survey
¡Genial! Ya sabes por qué deberías aprender Node.js y Express. Te prometo que de verdad merecerá tu tiempo y dedicación. ✨
🔹 Contenido del curso
Ahora veamos lo que aprenderás durante el curso.
💡 Dato: para tomar el curso, debes tener conocimiento previo de JavaScript. Si necesitas repasar este lenguaje de programación en español, te recomiendo tomar el curso de JavaScript en el canal de YouTube de freeCodeCamp en español.
Introducción a Node.js y conceptos básicos
Introducción a Node.js
Conceptos básicos de desarrollo web back-end.
Aplicaciones de Node.js
APIs y para qué se usan.
Ventajas de Node.js.
Descargar e instalar Node.js.
Confirmar que Node.js fue instalado exitosamente.
Verificar tu versión de Node.js.
El REPL de Node.js.
Tu primer proyecto de Node.js y módulos
¿Qué es un módulo? Conceptos y ventajas.
Exportar e importar módulos.
Exportar varios elementos de un módulo de JavaScript.
Ejecutar un archivo JavaScript con el comando node.
Módulos core de Node.js.
El módulo console.
El módulo process.
El módulo os.
El módulo fs.
El módulo timers.
Introducción a npm y JSON
¿Qué es npm?
Conceptos básicos de npm.
Inicializar un paquete con npm init.
El archivo package.json.
Introducción al formato JSON.
Instalar y desinstalar paquetes con npm.
El archivo package-lock.json.
Eventos y operaciones asíncronas
¿Qué es un evento?
Eventos en Node.js.
Eventos y procesos síncronos y asíncronos.
Promesas y funciones callback en JavaScript.
Promesas, .then() y .catch().
Funciones asíncronas con async y await.
Servidores con Node.js y el protocolo HTTP
El modelo cliente-servidor.
Formato de solicitudes y respuestas HTTP.
Métodos o verbos HTTP: GET, POST, PUT, DELETE.
Códigos de estado HTTP.
El módulo http en Node.js.
Crear un servidor en Node.js.
Los objetos req y res.
Estructura de una URL.
Routing (Enrutamiento) en Node.js.
Nodemon
¿Qué es Nodemon?
Cómo instalarlo globalmente.
Cómo usarlo para actualizar aplicaciones de Node.js automáticamente.
Conceptos importantes: CRUD, REST, API.
Express
Cómo instalar Express y cómo crear un proyecto.
Routing en Express.
Express y Nodemon.
Cómo manejar varias rutas.
Parámetros de URL y rutas dinámicas.
Middleware en Express.
Manejar solicitudes GET, POST, PUT y DELETE.
Parámetros query.
Routers en Express.
🔸 Proyecto de Node.js y Express
Durante el curso aprenderás con ejemplos prácticos, así que aplicarás todo lo que aprendas paso a paso.
Proyecto que crearemos con Node.js y Express
Aprenderás cómo trabajar con promesas con un ejemplo de pizza 🍕, cómo trabajar con JavaScript asíncrono, y desarrollarás una API y un servidor básico con Node.js para enviar información sobre cursos de programación y matemáticas al cliente.
Luego, adaptarás este servidor para trabajar con Express. Aplicarás conceptos que has aprendido y aprenderás nuevos conceptos paso a paso para crear un servidor que manejará varias rutas, parámetros y distintos tipos de solicitudes HTTP.
📌 Curso de Node.js y Express en YouTube
Genial. Ahora que ya sabes más sobre Node.js y Express y lo que aprenderás durante el curso, te invito a tomar el curso completo en español:

✍️ Curso creado por Estefania Cassingena Navone (Twitter: @EstefaniaCassN, YouTube: Coding with Estefania).
Sinceramente espero que te guste el curso y que te ayude a tomar tus primeros pasos en el mundo de Node.js, Express y desarrollo web back-end.
También te invitamos a tomar nuestros cursos de programación en español:

Cómo instalar Node.js en Ubuntu y actualizar npm a la última versión

Keiler Guardo Herrera — Wed, 03 Aug 2022 21:33:18 +0000

Artículo original: How to Install Node.js on Ubuntu and Update npm to the Latest Version
Si intentas instalar la última versión de Node usando el gestor de paquetes apt, acabarás con la versión 10.19.0. Esta es la última versión en la tienda de aplicaciones de ubuntu, pero no es la última versión liberada de NodeJS.
Esto se debe a que cuando se publican nuevas versiones de un software, el equipo de Ubuntu puede tardar meses en probarlo y publicarlo en la tienda oficial de Ubuntu. Como resultado, para obtener las últimas versiones de cualquier software, es posible que tengamos que utilizar paquetes privados publicados por los desarrolladores.
En este tutorial, lo que queremos hacer es obtener la v12.18.1 (LTS - con soporte a largo plazo) o la v14.4 de Node. Para obtener las últimas versiones, podemos utilizar nodesource o nvm (node version manager). Te mostraré cómo usar ambos.
Todos los comandos aquí serán ejecutados usando el CLI/terminal de Ubuntu.
Usando NVM - mi método preferido
Me gusta nvm porque me permite usar diferentes versiones de node para diferentes proyectos. A veces, puedes estar colaborando en un proyecto con alguien que usa una versión diferente de node y necesitas cambiar las versiones de node a lo que el proyecto requiere. Para esto, nvm es la mejor herramienta.
Instalar NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
Para comprobar que nvm está instalado, escriba nvm --version. Si obtienes un número de versión como 0.35.3, entonces sabes que nvm fue instalado con éxito.
Reinicia tu terminal para que los cambios surtan efecto.
Instalar NodeJS
A continuación, vamos a instalar la versión 14.4 de Nodejs.
Simplemente, ejecuta nvm install 14.4.0.
Puedes utilizar un comando similar para instalar cualquier versión de node, por ejemplo nvm install 12.18.1.
Este comando instala automáticamente nodejs, así como la última versión de npm que está en v6.14.5.
Si alguna vez necesitas cambiar de la versión de node, puedes simplemente ejecutar nvm use , por ejemplo nvm use v12.18.1.
Para listar las diferentes versiones de node que tiene instaladas con nvm, ejecute nvm ls.
Instalar Nodesource
Ejecuta el siguiente comando para decirle a Ubuntu que queremos instalar el paquete de Nodejs desde nodesource.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Ten en cuenta que v14.4.0 es la última versión de Node, pero actualmente no tiene LTS - soporte a largo plazo proporcionado para ello. Para instalar la última versión de Node con LTS, cambie 14 en el comando anterior por 12.
Es posible que se te pida que introduzcas la contraseña de tu usuario root. Introduce y pulsa enter/return.
Instalar NodeJS
Una vez que hayamos terminado de configurar Nodesource, podemos instalar Nodejs v14.4. Ejecuta sudo apt-get install -y nodejs.
Después que hayamos terminado, podemos comprobar que tenemos la última versión de Node instalada. Simplemente, escribe nodejs -v en tu terminal y debería devolver la v14.4.0.
En este punto deberías tener npm instalado automáticamente. Para comprobar qué versión de npm tienes, ejecuta npm version. Si no obtiene un objeto que incluya la última versión de npm en 6.14.5, {npm: '6.14.5'}, entonces puedes actualizar npm manualmente ejecutando el siguiente comando:
npm install -g npm@latest.
Si te encuentras con algún problema de que npm no se puede actualizar porque no está instalado, puedes instalar npm primero usando sudo apt-get install -y npm, y luego ejecutar el comando anterior para actualizarlo.
Para que ciertos paquetes de npm se ejecuten, también necesitamos ejecutar el comando sudo apt install build-essential.
Y eso es todo.
Ya tienes las últimas versiones de NodeJS y NPM en tu máquina Ubuntu.
Ve a construir grandes productos :)

Node.js - freeCodeCamp.org

Cómo escribir Pruebas usando el Ejecutor de Pruebas de Node.js y mongodb-memory-server

Tabla de Contenidos

Pre-requisitos

El Ejecutor de Pruebas de Node.js

El Servidor en memoria de MongoDB

Cómo escribir las Pruebas

1. Configurar el Proyecto

2. Configurar el Esquema de Mongoose

3. Configurar los Servicios

4. Configurar las Pruebas

5. Escribir Pruebas

6. Pasar las Pruebas

7. Usa TypeScript (Opcional)

Conclusión

Cómo construir una Aplicación de Chat en Tiempo Real con React, Node, Socket.io, y HarperDB

Tabla de Contenidos

¿Qué es Socket.io?

Configuración del Proyecto

1. Cómo configurar nuestras carpetas

2. Cómo instalar nuestras dependencias de client

3. Cómo iniciar la aplicación de React

Cómo configurar HarperDB

Cómo construir la Página "Join a Room"

1. Cómo crear el formulario HTML y agregar estilos

{`<>DevRooms`}

2. Cómo agregar funcionalidad al formulario Join Room

Cómo configurar el Servidor

1. Cómo instalar las dependencias del servidor

2. Cómo iniciar nuestro servidor

Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor

Cómo funcionan las Salas en Socket.io

Cómo unir el usuario a una sala de Socket.io

Cómo enviar un mensaje a los usuarios en una sala

Cómo construir la Página Chat

Los componentes de la página chat:

Cómo crear el Componente Messages (B)

Cómo crear un Esquema y una Tabla en HarperDB

Cómo crear el componente Send Message (C)

Cómo configurar las Variables de Entorno de HarperDB

Cómo permitir a los Usuarios que se envíen mensajes con Socket.io

Cómo obtener los mensajes desde HarperDB

Cómo mostrar los últimos 100 mensajes en el Cliente

Cómo mostrar la Sala y los Usuarios (A)

{room}

Users:

Cómo quitar a un Usuarío de una sala de Socket.io

Cómo agregar el Escucha de Evento Disconnect de Socket.io

Un desafío para ti 💪

¡Gracias por leer!

Curso API CRUD - Node.js, Express, MongoDB y Autenticación

APIs y bases de datos no relacionales

Curso de CRUD

Un vistazo rápido a Bun 1.0 - Una alternativa a Node.js

Un hombre sabio me dijo una vez: "Cuando empieces a comer Bun (panecillo), Node.js se sentirá insípido".

Ejecuta tu código más rápido con Bun

Bun soporta hot reloading

Bun es un empaquetador JavaScript

Bun es compatible con ESM y CommonJS

Ejemplo Bun.file()

Ejemplo Bun.write()

¿Por que Bun es tan rápido?

¿Cómo empezar a usar Bun?

Conclusión

Cómo instalar Node.js en MacOS, Linux o Windows usando NVM

Guía de instalación para Mac OS y Linux

Guía de instalación para Windows

Node.js Streams: Todo lo que necesitas saber

¿Qué son exactamente los flujos?

Un ejemplo práctico de flujos

Flujos 101

El método "pipe"

Eventos de flujo

Modos de pausa y fluyente en flujos legibles

Implementando flujos

Implementando un flujo escribible

Implementa un flujo legible

Implementando flujos Dúplex/Transformación

Modo de flujos como objeto

Los flujos de transformación incorporados en Node.js

Ejemplo `Bun.file()`

Ejemplo `Bun.write()`