Introducció als WebSockets

Els WebSockets són un protocol de comunicació que permet una connexió bidireccional i en temps real entre un client i un servidor. A diferència dels protocols HTTP tradicionals, que són unidireccionals i requereixen que el client iniciï cada sol·licitud, els WebSockets permeten que tant el client com el servidor enviïn dades en qualsevol moment.

Característiques dels WebSockets:

Bidireccionalitat: Permet la comunicació en ambdues direccions sense necessitat de múltiples sol·licituds HTTP.
Persistència: Manté una connexió oberta fins que una de les parts decideixi tancar-la.
Baixa latència: Ideal per aplicacions que requereixen actualitzacions en temps real, com ara jocs en línia, xats, etc.

Configuració del Servei WebSocket

Exemple de Servei WebSocket amb Node.js

Per configurar un servei WebSocket, utilitzarem la llibreria ws per a Node.js. A continuació es mostra com crear un servidor WebSocket bàsic:

Instal·lació de la llibreria ws:
```
npm install ws
```

Creació del servidor WebSocket:

// Importem la llibreria ws
const WebSocket = require('ws');

// Creem un servidor WebSocket
const wss = new WebSocket.Server({ port: 8080 });

// Escoltem les connexions entrants
wss.on('connection', (ws) => {
    console.log('Client connectat');

    // Escoltem els missatges entrants
    ws.on('message', (message) => {
        console.log(`Rebut: ${message}`);
        // Enviem una resposta al client
        ws.send(`Has enviat: ${message}`);
    });

    // Enviem un missatge al client quan es connecta
    ws.send('Benvingut al servidor WebSocket!');
});

console.log('Servidor WebSocket en execució al port 8080');

Connexió del Client WebSocket

Exemple de Client WebSocket en JavaScript

Per connectar-se a un servidor WebSocket des del client, utilitzarem l'objecte WebSocket disponible en JavaScript. A continuació es mostra com crear un client WebSocket bàsic:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Client WebSocket</title>
</head>
<body>
    <h1>Client WebSocket</h1>
    <script>
        // Creem una connexió WebSocket
        const socket = new WebSocket('ws://localhost:8080');

        // Escoltem l'obertura de la connexió
        socket.addEventListener('open', (event) => {
            console.log('Connectat al servidor WebSocket');
            // Enviem un missatge al servidor
            socket.send('Hola, servidor!');
        });

        // Escoltem els missatges del servidor
        socket.addEventListener('message', (event) => {
            console.log(`Missatge rebut del servidor: ${event.data}`);
        });

        // Escoltem el tancament de la connexió
        socket.addEventListener('close', (event) => {
            console.log('Connexió tancada');
        });

        // Escoltem els errors
        socket.addEventListener('error', (event) => {
            console.error('Error en la connexió WebSocket:', event);
        });
    </script>
</body>
</html>

Exercicis Pràctics

Exercici 1: Configurar un Servei WebSocket

Objectiu: Configurar un servidor WebSocket que accepti connexions i enviï un missatge de benvinguda als clients.
Passos:
- Instal·la la llibreria ws.
- Crea un servidor WebSocket que escolti al port 8080.
- Envia un missatge de benvinguda als clients quan es connectin.

Exercici 2: Crear un Client WebSocket

Objectiu: Crear un client WebSocket que es connecti al servidor i enviï un missatge.
Passos:
- Crea un fitxer HTML amb un script JavaScript que es connecti al servidor WebSocket.
- Envia un missatge al servidor quan la connexió s'obri.
- Mostra els missatges rebuts del servidor a la consola.

Solucions

Solució a l'Exercici 1

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connectat');
    ws.send('Benvingut al servidor WebSocket!');
});

Solució a l'Exercici 2

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Client WebSocket</title>
</head>
<body>
    <h1>Client WebSocket</h1>
    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.addEventListener('open', (event) => {
            console.log('Connectat al servidor WebSocket');
            socket.send('Hola, servidor!');
        });

        socket.addEventListener('message', (event) => {
            console.log(`Missatge rebut del servidor: ${event.data}`);
        });

        socket.addEventListener('close', (event) => {
            console.log('Connexió tancada');
        });

        socket.addEventListener('error', (event) => {
            console.error('Error en la connexió WebSocket:', event);
        });
    </script>
</body>
</html>

Resum

En aquesta secció, hem après què són els WebSockets i com configurar un servidor i un client WebSocket bàsics. Els WebSockets són ideals per a aplicacions que requereixen comunicació en temps real, gràcies a la seva capacitat de mantenir una connexió bidireccional persistent amb baixa latència. Hem vist exemples pràctics de com implementar un servidor WebSocket amb Node.js i com connectar-s'hi des d'un client web. A més, hem proporcionat exercicis pràctics per reforçar els conceptes apresos.

WebSockets

Introducció als WebSockets

Característiques dels WebSockets:

Configuració del Servei WebSocket

Exemple de Servei WebSocket amb Node.js

Connexió del Client WebSocket

Exemple de Client WebSocket en JavaScript

Exercicis Pràctics

Exercici 1: Configurar un Servei WebSocket

Exercici 2: Crear un Client WebSocket

Solucions

Solució a l'Exercici 1

Solució a l'Exercici 2

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final