Cómo crear una aplicación de chat con Node.js y Socket.IO

Introducción

Este tutorial lo guiará a través de la creación de una aplicación de chat simple con Node.js y Socket.IO.

requisitos previos

Para seguir este tutorial, necesitarás:

Node.js y npm instalados en su computadora. Puedes descargar ambos desde aquí.
Un editor de código, como Visual Studio Code.
Una comprensión básica de JavaScript y HTML.

Instalación de dependencias

Abra la terminal o el símbolo del sistema y navegue hasta la carpeta donde desea crear su proyecto. Una vez allí, ejecute el siguiente comando para inicializar un nuevo proyecto de Node.js:

npm init -y

Luego, instale express y socket.io usando npm:

npm install express socket.io

Creando el servidor

Cree un nuevo archivo llamado server.js e inserte 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);

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

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

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

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

 server.listen(3000, () => {
 console.log('Listening on port 3000');
 });

Este código inicializa un servidor express y Socket.IO y configura la aplicación para servir archivos estáticos desde la carpeta public. También escucha los eventos de conexión y desconexión de socket y el evento message para reenviar los mensajes recibidos a todos los clientes conectados.

Creando el cliente

Cree una nueva carpeta llamada public y dentro de ella, cree un nuevo archivo llamado index.html con 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>
 </head>
 <body>
 <ul id="messages"></ul>
 <form id="form">
 <input id="input" autocomplete="off" /><button>Send</button>
 </form>
 <script src="/socket.io/socket.io.js"></script>
 <script>
 const socket = io();
 const form = document.getElementById('form');
 const input = document.getElementById('input');

 form.addEventListener('submit', function(e) {
 e.preventDefault();
 if (input.value) {
 socket.emit('message', input.value);
 input.value = '';
 }
 });

 socket.on('message', function(message) {
 const item = document.createElement('li');
 item.textContent = message;
 document.getElementById('messages').appendChild(item);
 window.scrollTo(0, document.body.scrollHeight);
 });
 </script>
 </body>
 </html>

Este código HTML contiene un formulario de entrada simple y un elemento <ul> para mostrar mensajes. El código JavaScript maneja la conexión Socket.IO, envía mensajes al servidor cuando el usuario envía el formulario y agrega nuevos mensajes a la lista cuando recibe un mensaje del servidor.

Lanzamiento de la aplicación

Ahora puede iniciar el servidor con el siguiente comando:

node server.js

Abra su navegador y vaya a http://localhost:3000. Deberías ver tu aplicación de chat simple. Puede abrir varias pestañas o ventanas del navegador para simular varios usuarios y ver cómo se transmiten los mensajes a todos los clientes.

Conclusión

¡Felicidades! Acaba de crear una aplicación de chat simple usando Node.js y Socket.IO. Desde aquí, puede agregar más funciones, como soporte para nombres de usuario, salas de chat privadas, mensajes directos y más.