El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Construir una Aplicació de Xat

Següent ►
►

En aquest tema, aprendrem a construir una aplicació de xat en temps real utilitzant Node.js i Socket.io. Aquesta aplicació permetrà als usuaris enviar i rebre missatges en temps real, i serà una excel·lent oportunitat per aplicar molts dels conceptes que hem après al llarg del curs.

Objectius

  • Configurar un servidor Node.js amb Express.
  • Integrar Socket.io per a la comunicació en temps real.
  • Crear una interfície d'usuari bàsica amb HTML i JavaScript.
  • Gestionar la connexió i desconnexió dels usuaris.
  • Enviar i rebre missatges en temps real.

Requisits Previs

  • Coneixements bàsics de Node.js i Express.
  • Familiaritat amb HTML i JavaScript.
  • Comprensió dels conceptes de programació asíncrona i esdeveniments.

Passos per Construir l'Aplicació de Xat

  1. Configuració del Projecte

1.1. Crear el Directori del Projecte

mkdir chat-app
cd chat-app

1.2. Inicialitzar el Projecte amb npm

npm init -y

1.3. Instal·lar les Dependències Necessàries

npm install express socket.io

  1. Configuració del Servidor

2.1. Crear el Fitxer server.js

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('chatMessage', (msg) => {
        io.emit('chatMessage', msg);
    });
});

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

  1. Crear la Interfície d'Usuari

3.1. Crear el Directori public i el Fitxer index.html

<!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>
    <style>
        body { font-family: Arial, sans-serif; }
        #chat { margin: 20px; }
        #messages { list-style-type: none; padding: 0; }
        #messages li { padding: 8px; margin-bottom: 10px; background: #f4f4f4; border-radius: 5px; }
    </style>
</head>
<body>
    <div id="chat">
        <ul id="messages"></ul>
        <form id="messageForm">
            <input id="messageInput" autocomplete="off" placeholder="Type a message..." /><button>Send</button>
        </form>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        const form = document.getElementById('messageForm');
        const input = document.getElementById('messageInput');
        const messages = document.getElementById('messages');

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

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

  1. Provar l'Aplicació

4.1. Executar el Servidor

node server.js

4.2. Obrir el Navegador i Accedir a http://localhost:3000

  1. Millores i Funcionalitats Addicionals

5.1. Mostrar Missatges de Connexió i Desconnexió

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

    socket.on('disconnect', () => {
        console.log('User disconnected');
        io.emit('chatMessage', 'A user has disconnected');
    });

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

5.2. Afegir Suport per a Noms d'Usuari

io.on('connection', (socket) => {
    let username = 'Anonymous';

    socket.on('setUsername', (name) => {
        username = name;
    });

    socket.on('disconnect', () => {
        io.emit('chatMessage', `${username} has disconnected`);
    });

    socket.on('chatMessage', (msg) => {
        io.emit('chatMessage', `${username}: ${msg}`);
    });
});

Exercicis Pràctics

  1. Afegir Suport per a Noms d'Usuari:

    • Modifica el codi per permetre als usuaris establir un nom d'usuari abans d'enviar missatges.
    • Mostra el nom d'usuari al costat de cada missatge.

  2. Historial de Missatges:

    • Emmagatzema els missatges en una llista al servidor.
    • Envia l'historial de missatges als nous usuaris quan es connecten.

  3. Estilització Avançada:

    • Millora l'estil de la interfície d'usuari amb CSS.
    • Afegeix notificacions visuals per a connexions i desconnexions d'usuaris.

Solucions als Exercicis

Solució 1: Afegir Suport per a Noms d'Usuari

<!-- Afegir un camp per al nom d'usuari a index.html -->
<form id="usernameForm">
    <input id="usernameInput" autocomplete="off" placeholder="Enter your username..." /><button>Set Username</button>
</form>
// Modificar el codi JavaScript per gestionar noms d'usuari
const usernameForm = document.getElementById('usernameForm');
const usernameInput = document.getElementById('usernameInput');

usernameForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if (usernameInput.value) {
        socket.emit('setUsername', usernameInput.value);
        usernameForm.style.display = 'none';
        messageForm.style.display = 'block';
    }
});

Solució 2: Historial de Missatges

// Emmagatzemar missatges al servidor
let messages = [];

io.on('connection', (socket) => {
    socket.emit('chatHistory', messages);

    socket.on('chatMessage', (msg) => {
        messages.push(msg);
        io.emit('chatMessage', msg);
    });
});
// Rebre l'historial de missatges al client
socket.on('chatHistory', (msgs) => {
    msgs.forEach((msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
    });
});

Conclusió

En aquest tema, hem construït una aplicació de xat en temps real utilitzant Node.js i Socket.io. Hem après a configurar un servidor, crear una interfície d'usuari bàsica i gestionar la comunicació en temps real entre els usuaris. També hem explorat millores i funcionalitats addicionals per enriquir l'experiència de l'usuari. Aquest projecte és una excel·lent manera de consolidar els coneixements adquirits i preparar-se per a projectes més complexos en el futur.

◄ Anterior
◄
Següent ►
►

Curs de Node.js

Mòdul 1: Introducció a Node.js

Mòdul 2: Conceptes Bàsics

Mòdul 3: Sistema de Fitxers i I/O

Mòdul 4: HTTP i Servidors Web

Mòdul 5: NPM i Gestió de Paquets

Mòdul 6: Framework Express.js

Mòdul 7: Bases de Dades i ORMs

Mòdul 8: Autenticació i Autorització

Mòdul 9: Proves i Depuració

Mòdul 10: Temes Avançats

Mòdul 11: Desplegament i DevOps

Mòdul 12: Projectes del Món Real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats