Crear un chat usando Socket.io y Javascript

por
Tiempo de lectura: 2 minutos

Hola, hoy os voy a enseñar, cómo crear un chat usando Socket.io y Javascript:

Para empezar, necesitarás tener instalado Node.js y npm (https://nodejs.org/en/) en tu computadora. Luego, sigue estos pasos:

  1. Crea un nuevo directorio para tu proyecto y abre una consola de comandos en ese directorio.
  2. Ejecuta el comando npm init para inicializar tu proyecto. Sigue las instrucciones para configurar el nombre, la versión y la descripción de tu proyecto.
  3. Ejecuta el comando npm install express socket.io para instalar las dependencias de tu proyecto. Esto instalará Express, un framework de servidor para Node.js, y Socket.io, una librería de comunicación en tiempo real para JavaScript.
  4. Crea un archivo llamado server.js y escribe el siguiente código:
const express = require('express');
const socketio = require('socket.io');

const app = express();
const server = app.listen(3000, () => console.log('Listening on port 3000'));

const io = socketio(server);

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

  socket.on('disconnect', () => console.log('A user has disconnected'));
});

Este código inicializa un servidor utilizando Express y luego inicializa Socket.io en el servidor. Luego, agrega un evento de conexión y desconexión para mostrar un mensaje en la consola cada vez que un usuario se conecte o desconecte del chat.

  1. Crea un archivo llamado index.html y escribe el siguiente código:
<!doctype html>
<html>
  <head>
    <title>Chat App</title>
  </head>
  <body>
    <div id="chat">
      <form id="send-message">
        <input type="text" placeholder="Type a message" />
        <button>Send</button>
      </form>
      <ul id="messages"></ul>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
    </script>
  </body>
</html>

Este código crea una página HTML básica con un formulario para enviar mensajes y una lista para mostrar los mensajes enviados. También incluye el archivo socket.io.js, que es necesario para utilizar Socket.io en el cliente.

  1. Modifica el código de server.js para manejar el evento de envío de mensajes y enviar el mensaje a todos los usuarios conectados:
io.on('connection', (socket) => {
  console.log('A user has connected');

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

  socket.on('disconnect', () => console.log('A user has disconnected'));
});
  1. Modifica el código de index.html para manejar el evento de nuevo mensaje y mostrar el mensaje en la lista:
<!doctype html>
    <html>
        <head>
            <title>Chat App</title>
        </head>
        <body>
            <div id="chat">
                <form id="send-message">
                    <input type="text" placeholder="Type a message" />
                    <button>Send</button>
                </form>
                <ul id="messages"></ul>
            </div>
            <script src="/socket.io/socket.io.js"></script>
            <script>
                const socket = io();
                const form = document.getElementById('send-message');
                const messages = document.getElementById('messages');

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

socket.on('new message', (message) => {
const li = document.createElement('li');
                li.innerText = message;
                messages.appendChild(li);
});
            </script>
        </body>
    </html>

Ejecuta el servidor utilizando el comando node server.js y abre el archivo index.html en tu navegador. Deberías ver una página con un formulario para enviar mensajes y una lista vacía. Abre varias pestañas del navegador o utiliza diferentes navegadores para simular varios usuarios conectados al chat. Cada vez que envíes un mensaje, debería aparecer en la lista de todos los usuarios conectados.

¡Eso es todo! Ahora tienes una aplicación de chat básica utilizando JavaScript y Socket.io.

Puedes agregar más funcionalidades, como la opción de enviar mensajes privados o cambiar el diseño de la página utilizando CSS.

Post Views: 7

Deja un comentario