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
3 hours ago

07:53 Enviar y recibir mensajes

@Mr78javi
3 hours ago

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

@faviosergio
3 hours ago

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

@eliezerfuentes9770
3 hours 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
3 hours 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
3 hours 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
3 hours 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
3 hours 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
3 hours ago

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

@JoseHernandez-im7mg
3 hours 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
3 hours 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
3 hours ago

Gracias Fazt

@TheJosefo14
3 hours 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
3 hours ago

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

@Joshuaf26
3 hours 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
3 hours ago

El servidor no me quiere abrir

@ivanrico1995
3 hours ago

Muchas gracias

@RDDroid1
3 hours 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
3 hours ago

Muchas gracias

@sabejifyurasu3043
3 hours ago

Genial. Me gustó esto. <3 Gracias.

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