Introducció

Flask-SocketIO és una extensió que permet integrar WebSockets en aplicacions Flask, facilitant la comunicació bidireccional en temps real entre el servidor i els clients. Aquesta funcionalitat és especialment útil per a aplicacions que requereixen actualitzacions en temps real, com ara xats, jocs en línia, o aplicacions de monitorització.

Instal·lació

Abans de començar, necessitem instal·lar Flask-SocketIO. Pots fer-ho utilitzant pip:

pip install flask-socketio

Configuració Bàsica

Creació de l'Aplicació

Comencem creant una aplicació Flask bàsica i integrant Flask-SocketIO:

from flask import Flask, render_template
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('message')
def handle_message(msg):
    print('Message: ' + msg)
    send(msg, broadcast=True)

if __name__ == '__main__':
    socketio.run(app)

Explicació del Codi

Importacions: Importem les llibreries necessàries, incloent Flask, render_template per renderitzar plantilles HTML, i SocketIO i send de Flask-SocketIO.
Configuració de l'Aplicació: Creem una instància de Flask i configurem una clau secreta. Després, inicialitzem SocketIO amb l'aplicació Flask.
Ruta Principal: Definim una ruta principal que renderitza una plantilla HTML (index.html).
Gestió de Missatges: Definim un manejador d'esdeveniments per als missatges. Quan es rep un missatge, es mostra a la consola i es retransmet a tots els clients connectats.

Plantilla HTML

Creem una plantilla HTML (index.html) per a la nostra aplicació:

<!DOCTYPE html>
<html>
<head>
    <title>Flask-SocketIO Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', (event) => {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('connect', function() {
                socket.send('User has connected!');
            });
            socket.on('message', function(msg) {
                var p = document.createElement('p');
                p.innerHTML = msg;
                document.getElementById('messages').appendChild(p);
            });
            document.getElementById('sendbutton').onclick = function() {
                var message = document.getElementById('myMessage').value;
                socket.send(message);
                document.getElementById('myMessage').value = '';
            };
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Chat</h1>
    <div id="messages"></div>
    <input type="text" id="myMessage" placeholder="Enter your message">
    <button id="sendbutton">Send</button>
</body>
</html>

Explicació del Codi HTML

Inclusió de Socket.IO: Incloem la llibreria Socket.IO des d'un CDN.
Connexió al Servidor: Quan el document es carrega, es crea una connexió al servidor Socket.IO.
Gestió de Connexions: Quan un usuari es connecta, s'envia un missatge al servidor.
Recepció de Missatges: Quan es rep un missatge del servidor, es mostra a la pàgina.
Enviament de Missatges: Quan l'usuari fa clic al botó d'enviament, el missatge s'envia al servidor i el camp de text es buida.

Exercici Pràctic

Objectiu

Crea una aplicació de xat en temps real utilitzant Flask-SocketIO. L'aplicació ha de permetre als usuaris enviar i rebre missatges en temps real.

Passos

Instal·la Flask-SocketIO: Assegura't de tenir Flask-SocketIO instal·lat.
Crea l'Aplicació Flask: Configura una aplicació Flask bàsica amb Flask-SocketIO.
Defineix les Rutes: Crea una ruta principal que renderitzi una plantilla HTML.
Implementa la Plantilla HTML: Crea una plantilla HTML que permeti als usuaris enviar i rebre missatges.
Manejament d'Esdeveniments: Defineix els manejadors d'esdeveniments per a la connexió i els missatges.

Solució

# app.py
from flask import Flask, render_template
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('message')
def handle_message(msg):
    print('Message: ' + msg)
    send(msg, broadcast=True)

if __name__ == '__main__':
    socketio.run(app)

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Flask-SocketIO Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', (event) => {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('connect', function() {
                socket.send('User has connected!');
            });
            socket.on('message', function(msg) {
                var p = document.createElement('p');
                p.innerHTML = msg;
                document.getElementById('messages').appendChild(p);
            });
            document.getElementById('sendbutton').onclick = function() {
                var message = document.getElementById('myMessage').value;
                socket.send(message);
                document.getElementById('myMessage').value = '';
            };
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Chat</h1>
    <div id="messages"></div>
    <input type="text" id="myMessage" placeholder="Enter your message">
    <button id="sendbutton">Send</button>
</body>
</html>

Errors Comuns i Consells

Problemes de Connexió: Assegura't que el servidor Flask-SocketIO està en execució i que la URL de connexió és correcta.
Missatges No Enviats: Verifica que el manejador d'esdeveniments send està configurat correctament i que el camp de text no està buit.
Actualitzacions en Temps Real: Si els missatges no es mostren en temps real, assegura't que el codi JavaScript està correctament inclòs i que no hi ha errors a la consola del navegador.

Conclusió

En aquesta secció, hem après com utilitzar Flask-SocketIO per integrar WebSockets en una aplicació Flask. Hem creat una aplicació de xat bàsica que permet la comunicació en temps real entre els usuaris. Aquesta funcionalitat pot ser ampliada per a altres aplicacions que requereixin actualitzacions en temps real.

Ús de Flask-SocketIO per a WebSockets

Introducció

Instal·lació

Configuració Bàsica

Creació de l'Aplicació

Explicació del Codi

Plantilla HTML

Explicació del Codi HTML

Exercici Pràctic

Objectiu

Passos

Solució

Errors Comuns i Consells

Conclusió

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask