Image for post Aprende a usar WebSockets en Python con Flask para aplicaciones en tiempo real

Aprende a usar WebSockets en Python con Flask para aplicaciones en tiempo real

Escrito por Sergio Márquez

En un mundo cada vez más conectado, las aplicaciones en tiempo real se han vuelto cruciales para brindar una experiencia de usuario fluida y interactiva. Los WebSockets son una tecnología que permite una comunicación bidireccional entre el cliente y el servidor a través de una conexión persistente. En este artículo, exploraremos cómo implementar WebSockets usando Flask, un marco popular de Python.

¿Qué son los WebSockets?

Los WebSockets son un protocolo que establece una conexión persistente entre un cliente y un servidor. A diferencia de HTTP, que es orientado a petición/respuesta, los WebSockets permiten la comunicación continua y en tiempo real. Esto es ideal para aplicaciones como chats en línea, juegos multijugador y notificaciones en tiempo real.

Configurando el entorno

Antes de empezar, asegúrate de tener instalada la siguiente versión de Python y Flask:

  • Python 3.x
  • Flask
  • Flask-SocketIO (Extensión de Flask para soporte de WebSocket)

Puedes instalar Flask y Flask-SocketIO utilizando pip:

pip install Flask Flask-SocketIO

Creando una aplicación básica con Flask y WebSockets

A continuación, crearemos una aplicación simple de chat utilizando Flask y WebSockets:

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

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('Received message: ' + msg)
    emit('message', msg, broadcast=True)

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

Explicación del código

  • Flask y SocketIO: Inicializamos Flask y configuramos SocketIO para manejar las conexiones WebSocket.
  • Ruta base: Creamos una ruta que renderiza un template HTML llamado index.html.
  • Evento de mensaje: Manejamos el evento 'message' y lo broadcast para todos los clientes conectados.

Creando la interfaz de usuario

Ahora, crearemos el archivo HTML index.html que servirá como interfaz de nuestro chat:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat en Tiempo Real</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
    <ul id="messages"></ul>
    <input id="message_input" autocomplete="off" />
    <button onclick="sendMessage()">Enviar</button>
    <script>
        const socket = io();

        function sendMessage() {
            const input = document.getElementById('message_input');
            socket.emit('message', input.value);
            input.value = '';
        }

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

Descripción de la interfaz

  • La página HTML incluye un campo de texto y un botón para enviar mensajes.
  • Cuando se envía un mensaje, se emite a través del socket y se muestra en la lista.

Poniendo en marcha la aplicación

Para ejecutar la aplicación, guarda el código en un archivo llamado app.py y el HTML en una carpeta llamada templates. Luego, ejecuta:

python app.py

A la vez, abre tu navegador y accede a http://localhost:5000. Abre varias pestañas para ver cómo la comunicación en tiempo real funciona entre clientes.

Conclusión

Los WebSockets son una herramienta poderosa para el desarrollo de aplicaciones en tiempo real y, con Flask-SocketIO, su implementación en Python se torna sencilla y efectiva. Desde chat en línea hasta notificaciones, las posibilidades son infinitas. ¡Experimenta y construye tu propia aplicación en tiempo real!

Volver al blog