
Flask WebSocket Basics
Today, we’re diving into a powerful feature that enables real-time communication between your users and your Flask application: WebSockets. If you've ever wanted to build a chat app, live notifications, or even a real-time dashboard, this is the tool for you. Let's get started.
WebSockets allow a persistent, two-way connection between a client (like a web browser) and a server. Unlike traditional HTTP, which is request-response based, WebSockets let the server push data to the client at any time. This makes them perfect for applications that require instant updates.
To use WebSockets in Flask, we’ll rely on the Flask-SocketIO extension. It’s easy to set up and integrates beautifully with your existing Flask apps. First, make sure you install it:
pip install flask-socketio
Now, let’s set up a basic Flask app with WebSocket support.
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html')
@socketio.on('connect')
def handle_connect():
print('Client connected')
@socketio.on('disconnect')
def handle_disconnect():
print('Client disconnected')
if __name__ == '__main__':
socketio.run(app)
This code does a few important things. It initializes the SocketIO object with your Flask app. The connect
and disconnect
events are built-in—they fire automatically when a client connects or disconnects.
On the client side, you’ll need to include the SocketIO client library. Here’s a simple index.html
:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
</head>
<body>
<h1>Welcome to WebSockets!</h1>
<script>
var socket = io();
socket.on('connect', function() {
console.log('Connected to server');
});
</script>
</body>
</html>
When you run the app and open the page, you’ll see messages in your server console and browser console confirming the connection.
Now, let’s send some data. You can define custom events. For example, let’s make a simple chat where the client sends a message and the server broadcasts it to everyone.
Server-side:
@socketio.on('message')
def handle_message(data):
print('Received message: ' + data)
emit('message', data, broadcast=True)
Client-side HTML/JS:
<input id="message" type="text">
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script>
var socket = io();
socket.on('message', function(data) {
var li = document.createElement('li');
li.textContent = data;
document.getElementById('messages').appendChild(li);
});
function sendMessage() {
var message = document.getElementById('message').value;
socket.emit('message', message);
}
</script>
When you type a message and hit send, it goes to the server, which then broadcasts it to all connected clients. Each client appends the message to their list.
Key points to remember: - WebSockets provide full-duplex communication. - They are ideal for real-time features. - Flask-SocketIO makes implementation straightforward.
Let’s compare some common real-time techniques:
Method | Use Case | Complexity |
---|---|---|
Polling | Simple updates, low frequency | Low |
Long Polling | Better than polling, still delayed | Medium |
WebSockets | Real-time, bidirectional | High |
Server-Sent Events | Server to client only | Medium |
As you can see, WebSockets offer the most capabilities for true real-time interaction.
Here’s a quick checklist for getting started with Flask-SocketIO:
- Install the package via pip.
- Initialize SocketIO with your Flask app.
- Define event handlers for
connect
,disconnect
, and custom events. - Use
emit
to send data to clients. - Include the client library in your HTML.
You can also send JSON data, not just strings. This is useful for structured information.
Server:
@socketio.on('json')
def handle_json(json_data):
print('Received JSON: ' + str(json_data))
emit('json_response', {'status': 'OK'})
Client:
socket.emit('json', {name: 'John', age: 30});
socket.on('json_response', function(data) {
console.log(data.status);
});
Handling namespaces and rooms is another powerful feature. Namespaces let you split the communication into channels, and rooms allow you to group users for targeted messaging.
For example, to join a room:
@socketio.on('join')
def on_join(data):
username = data['username']
room = data['room']
join_room(room)
emit('message', username + ' has entered the room.', room=room)
This is just the beginning. WebSockets open up a world of possibilities for interactive web applications. Whether you're building a multiplayer game, a collaborative tool, or a live data feed, you now have the foundation.
Always remember to handle errors and disconnections gracefully. You might also want to look into authentication for your WebSocket connections to ensure security.
Finally, when deploying, note that Flask-SocketIO supports multiple backends like eventlet and gevent for production use. Here’s how you might run it with eventlet:
pip install eventlet
socketio.run(app, debug=True, use_reloader=False)
And that’s a wrap on the basics! You’re now equipped to add real-time features to your Flask apps. Go ahead, try building something—it’s the best way to learn.