Ejemplo de Conexión y Chat con Python Flask y Socketio

Posted by


En este tutorial, aprenderemos a utilizar Python Flask y SocketIO para crear una aplicación web que permita a los usuarios chatear en tiempo real. SocketIO es una librería que nos permite establecer conexiones bidireccionales en tiempo real entre el cliente y el servidor, lo que es ideal para aplicaciones de chat en tiempo real.

Para empezar, necesitaremos tener instalado Python en nuestro sistema. Si no lo tienes instalado, puedes descargarlo desde el sitio web oficial de Python. También necesitaremos instalar Flask y Flask-SocketIO, que son las librerías que utilizaremos para crear nuestra aplicación. Puedes instalarlas ejecutando los siguientes comandos en tu terminal:

pip install Flask
pip install Flask-SocketIO

Una vez que tengamos Python y las librerías instaladas, estaremos listos para empezar a escribir nuestro código.

Primero, crearemos un archivo llamado app.py donde escribiremos nuestro código:

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

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

En este código, estamos importando las librerías necesarias y creando una instancia de la aplicación Flask y del objeto SocketIO. Luego, definimos una ruta raíz que renderiza nuestro archivo HTML index.html. También definimos una función handle_message que se activará cuando el servidor reciba un mensaje del cliente. Esta función imprimirá el mensaje en la consola y luego emitirá el mensaje a todos los clientes conectados.

A continuación, crearemos un archivo llamado index.html en la carpeta templates dentro de nuestro directorio de trabajo:

<!DOCTYPE html>
<html>
<head>
    <title>Chat en tiempo real</title>
</head>
<body>
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">Enviar</button>
    <ul id="messages"></ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
    <script>
        var socket = io();
        socket.on('message', function(msg) {
            var li = document.createElement('li');
            li.innerHTML = msg;
            document.getElementById('messages').appendChild(li);
        });

        function sendMessage() {
            var message = document.getElementById('messageInput').value;
            socket.emit('message', message);
        }
    </script>
</body>
</html>

En este archivo HTML, creamos un cuadro de entrada de texto donde el usuario podrá escribir mensajes y un botón para enviar los mensajes al servidor. También tenemos una lista desordenada donde se mostrarán los mensajes enviados por los usuarios. Utilizamos la librería Socket.IO para establecer una conexión entre el cliente y el servidor y para manejar los mensajes entrantes y salientes.

Para ejecutar nuestra aplicación, simplemente debemos correr el archivo app.py desde la terminal:

python app.py

Una vez que la aplicación esté en funcionamiento, puedes abrir tu navegador y navegar a http://localhost:5000 para ver la página de inicio de la aplicación. Puedes probar la funcionalidad de chat enviando mensajes desde diferentes pestañas del navegador y viendo cómo se muestran en tiempo real en todas las pestañas.

¡Y eso es todo! Ahora tienes una aplicación de chat en tiempo real construida con Python Flask y SocketIO. Puedes personalizar y expandir esta aplicación según tus necesidades, como agregar autenticación de usuarios, guardar el historial de mensajes, o implementar salas de chat separadas. ¡Diviértete explorando las posibilidades de SocketIO y Flask!

0 0 votes
Article Rating

Leave a Reply

29 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@clasesutnfrc8699
21 days ago

07:53 Enviar y recibir mensajes

@Mr78javi
21 days ago

¿Hay alguna forma de hacer q el socket se ejecute mediante hilos?

@faviosergio
21 days ago

Si quisiera enviar audio del clirnte al servidor …. ¿cómo sería el código? Saludos.

@eliezerfuentes9770
21 days ago

Alguien me puede ayudar por favor hice un proyecto Flask con Socketio igual que el vídeo pero ahora que a lo termine tengo problemas para subirlo al servidor, estoy subiendo el proyecto con un cPanel y he tenido demasiados problemas por favor alguien que me pueda ayudar con este problema, alguien que me pudiera explicar los pasos para subir un sitio web con flask y Socketio

@emanuellemos5818
21 days ago

te hago otra pegunta ya que estoy y que tal vez la sabes responder, no se que merda toque pero se me conecta como varias veces , osea en la terminal me aparece muchisimas veces " – [20/Jun/2021 10:34:02] "GET /socket.io/?EIO=4&transport=polling&t=Nefe6uR&sid=FNFwr8rgnLAzGpnjAAAE HTTP/1.1" 200 – – – [20/Jun/2021 10:34:02] "POST /socket.io/?EIO=4&transport=polling&t=NefeC_W&sid=FNFwr8rgnLAzGpnjAAAE HTTP/1.1" 200 -" y asi se repite y se repite … Yo me acuerdo cuando habia hecho un socket en su tiempo con Node funcionaba perfecto solo me aparecia una vez conectado , luego creo que instale no se que mierda el "dotenv" y empezo tambien a desconectarse y conectarse … a que se debe esto ? estoy con linux

@emanuellemos5818
21 days ago

sabes lo que estaria piola ? que hagas un video , tipo socket io con flask y agregarlo a un chat de flutter (creo que ese video pegaria bastante, ya que son algunas combinaciones que no se ven en youtube) . Por otro lado algo que tampoco veo son videos tipo "como migrar de tal lenguaje a tal lenguaje" . Por ejemplo de Python a Dart , diciendo "una clase se escribe asi y aca asi " y asi para todos los puntos .
saludos genio tus videos siempre (para mi) fueron uno de los mas nutritivos de youtube.

@jburgos2023
21 days ago

Por que al realizar las líneas de programación, en la línea número 1 la primera palabra flask me aparece subrayada (como error), y por lo cual no se ejecuta el programa?

@sayavedra_sh4075
21 days ago

Hola, este video ya esta viejito asi que para los nuevos que vengan recuerden que en python las funciones se escriben diferente a JavaScript, todo en minusculas y separado pofr guion bajo
en este caso seria
def handle_message

@ethilab582
21 days ago

Como podria utilizar este codigo y mandar a internet el html?

@JoseHernandez-im7mg
21 days ago

hola, tengo un problema y es que no me pinta los mensajes del lado del cliente me pueden ayudar, gracias

comparto los archivos en drive: https://drive.google.com/drive/folders/1yrhM5Z6kOZhG8ZZCvz93KixMzyINpNug?usp=sharing

@jar386
21 days ago

Muy interesante. Y en el caso de que se necesitara enviar los mensajes a un cliente específico? Cual podria ser el camino

@fersilent3884
21 days ago

Gracias Fazt

@TheJosefo14
21 days ago

Hola, una pregunta, sí quisiera acceder de manera remota a traves de otros equipos conectados a la misma red a mi app de flask, que deberia configurar en el servidor o como deberia guardar el proyecto? podrías darme algún consejo?

@imesiquiel7772
21 days ago

Hay alguna forma de poder abrir el localhost desde tu movil?

@Joshuaf26
21 days ago

@Fazt hola, tengo una duda, como puedo utilizar SocketIO para tomar un archivo de la base de datos y gargar en el html sin que este se actualice?

@the1egendmusic853
21 days ago

El servidor no me quiere abrir

@ivanrico1995
21 days ago

Muchas gracias

@RDDroid1
21 days ago

Gracias por el aporte, Tengo una pregunta habra alguna manera de que todas las imagenes que tengo en una carpeta las pueda importar de manera randon en un slide usando flask?

@diegocamilopenaramirez6101
21 days ago

Muchas gracias

@sabejifyurasu3043
21 days ago

Genial. Me gustó esto. <3 Gracias.

29
0
Would love your thoughts, please comment.x
()
x