Create a Simple Chat Application Using Socket.IO in Python
A detailed guide on how to create a simple chat application using Python with Socket.IO and Flask, allowing users to send and receive messages in real-time.
This article will guide you step by step to build a simple chat application using Flask and Socket.IO. We will set up a server to handle connections and communication between clients and the server.
Python Code
# app.py
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
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)
HTML Code
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
<style>
#messages { list-style-type: none; }
#messages li { padding: 5px; }
</style>
</head>
<body>
<ul id="messages"></ul>
<input id="message-input" autocomplete="off"/><button id="send-button">Send</button>
<script>
const socket = io();
$('#send-button').click(function() {
const msg = $('#message-input').val();
socket.emit('message', msg);
$('#message-input').val('');
});
socket.on('message', function(msg) {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
Detailed explanation:
-
app.py:
-
from flask import Flask, render_template: Import necessary libraries from Flask. -
from flask_socketio import SocketIO, emit: Import Socket.IO for real-time communication. -
app = Flask(__name__): Initialize the Flask application. -
socketio = SocketIO(app): Create a Socket.IO object for the app. -
@app.route('/'): Define a route for the main page. -
def index(): Function that returns the HTML template. -
@socketio.on('message'): Listen for the 'message' event from the client. -
emit('message', msg, broadcast=True): Broadcast the message to all clients. -
if __name__ == '__main__': socketio.run(app): Run the server.
-
-
index.html:
- Create a basic interface with an input field for users to type messages and a send button.
- Use jQuery to handle the click event and send messages to the server via Socket.IO.
- Listen for the 'message' event to update the message list on the interface.
System Requirements:
- Python 3.x
- Flask
- Flask-SocketIO
How to install the libraries needed to run the Python code above:
You can install the required libraries using pip:
pip install Flask Flask-SocketIO
Tips:
- Experiment with more features, such as storing messages in a database or adding users to the application.
- Make sure the server is running in an accessible environment to test with multiple clients.