El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Construcción de una Aplicación de Chat

Siguiente ►
►

En este módulo, vamos a construir una aplicación de chat en tiempo real utilizando Node.js y Socket.io. Este proyecto te permitirá aplicar muchos de los conceptos que has aprendido a lo largo del curso, como la creación de servidores HTTP, el manejo de eventos y la comunicación en tiempo real.

Objetivos del Módulo

  • Crear un servidor HTTP con Node.js.
  • Configurar Socket.io para la comunicación en tiempo real.
  • Implementar la lógica del servidor para manejar conexiones y mensajes de chat.
  • Crear una interfaz de usuario simple para el chat utilizando HTML y JavaScript.
  • Integrar la interfaz de usuario con el servidor para enviar y recibir mensajes.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalados Node.js y NPM en tu máquina. También necesitarás conocimientos básicos de HTML y JavaScript.

Paso 1: Configuración del Proyecto

1.1 Crear el Directorio del Proyecto

Primero, crea un nuevo directorio para tu proyecto y navega a él desde la terminal:

mkdir chat-app
cd chat-app

1.2 Inicializar un Proyecto Node.js

Inicializa un nuevo proyecto Node.js ejecutando el siguiente comando:

npm init -y

Esto creará un archivo package.json con la configuración predeterminada.

1.3 Instalar Dependencias

Instala las dependencias necesarias para el proyecto:

npm install express socket.io

Paso 2: Crear el Servidor

2.1 Configurar el Servidor HTTP

Crea un archivo llamado server.js en el directorio raíz del proyecto y agrega el siguiente código:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const PORT = process.env.PORT || 3000;

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('New user connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Explicación del Código

  • Express: Utilizamos Express para servir archivos estáticos.
  • http: Creamos un servidor HTTP utilizando el módulo http de Node.js.
  • socket.io: Configuramos Socket.io para manejar la comunicación en tiempo real.
  • io.on('connection'): Escuchamos nuevas conexiones de clientes.
  • socket.on('disconnect'): Manejamos la desconexión de clientes.
  • socket.on('chat message'): Escuchamos mensajes de chat y los retransmitimos a todos los clientes conectados.

Paso 3: Crear la Interfaz de Usuario

3.1 Estructura de Archivos

Crea un directorio llamado public en el directorio raíz del proyecto. Dentro de public, crea un archivo llamado index.html y un directorio llamado js.

3.2 Crear el Archivo HTML

En public/index.html, agrega el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chat-container">
    <ul id="messages"></ul>
    <form id="chat-form">
      <input id="message-input" autocomplete="off" placeholder="Type a message..." />
      <button>Send</button>
    </form>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

3.3 Crear el Archivo JavaScript

En public/js/main.js, agrega el siguiente código:

const socket = io();

const form = document.getElementById('chat-form');
const input = document.getElementById('message-input');
const messages = document.getElementById('messages');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

socket.on('chat message', (msg) => {
  const item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

Explicación del Código

  • socket.emit('chat message'): Envía el mensaje de chat al servidor.
  • socket.on('chat message'): Escucha los mensajes de chat del servidor y los agrega a la lista de mensajes.

Paso 4: Ejecutar la Aplicación

Para ejecutar la aplicación, simplemente ejecuta el siguiente comando en la terminal:

node server.js

Abre tu navegador y navega a http://localhost:3000. Deberías ver la interfaz de chat y poder enviar mensajes.

Ejercicio Práctico

Ejercicio 1: Añadir Nombres de Usuario

Modifica la aplicación para que los usuarios puedan ingresar su nombre antes de unirse al chat. Muestra el nombre del usuario junto con cada mensaje.

Solución

  1. Modifica public/index.html para incluir un campo de nombre de usuario:
<div id="username-container">
  <input id="username-input" placeholder="Enter your name..." />
  <button id="join-chat">Join Chat</button>
</div>
<div id="chat-container" style="display: none;">
  <!-- existing chat elements -->
</div>
  1. Modifica public/js/main.js para manejar el nombre de usuario:
const usernameInput = document.getElementById('username-input');
const joinChatButton = document.getElementById('join-chat');
const usernameContainer = document.getElementById('username-container');
const chatContainer = document.getElementById('chat-container');

let username = '';

joinChatButton.addEventListener('click', () => {
  username = usernameInput.value.trim();
  if (username) {
    usernameContainer.style.display = 'none';
    chatContainer.style.display = 'block';
  }
});

form.addEventListener('submit', (event) => {
  event.preventDefault();
  if (input.value && username) {
    socket.emit('chat message', { username, message: input.value });
    input.value = '';
  }
});

socket.on('chat message', (data) => {
  const item = document.createElement('li');
  item.textContent = `${data.username}: ${data.message}`;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});
  1. Modifica server.js para manejar los datos del mensaje:
socket.on('chat message', (data) => {
  io.emit('chat message', data);
});

Conclusión

En este módulo, has aprendido a construir una aplicación de chat en tiempo real utilizando Node.js y Socket.io. Has configurado un servidor HTTP, manejado conexiones y mensajes de chat, y creado una interfaz de usuario simple. Este proyecto te ha permitido aplicar muchos de los conceptos que has aprendido a lo largo del curso y te ha proporcionado una base sólida para construir aplicaciones en tiempo real más complejas.

En el siguiente módulo, exploraremos cómo crear una API de comercio electrónico, lo que te permitirá profundizar en la creación de aplicaciones web robustas y escalables.

◄ Anterior
◄
Siguiente ►
►

Curso de Node.js

Módulo 1: Introducción a Node.js

Módulo 2: Conceptos Básicos

Módulo 3: Sistema de Archivos y E/S

Módulo 4: HTTP y Servidores Web

Módulo 5: NPM y Gestión de Paquetes

Módulo 6: Framework Express.js

Módulo 7: Bases de Datos y ORMs

Módulo 8: Autenticación y Autorización

Módulo 9: Pruebas y Depuración

Módulo 10: Temas Avanzados

Módulo 11: Despliegue y DevOps

Módulo 12: Proyectos del Mundo Real

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados