The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Using Flask-SocketIO for WebSockets

End!

In this section, we will explore how to use Flask-SocketIO to add real-time capabilities to your Flask applications. Flask-SocketIO is an extension that enables WebSocket communication, allowing for real-time, bidirectional communication between clients and the server.

Key Concepts

  1. WebSockets: A protocol providing full-duplex communication channels over a single TCP connection.
  2. Flask-SocketIO: An extension for Flask that integrates Socket.IO, enabling real-time communication.
  3. Events: Named messages that can be sent and received by both the client and server.

Setting Up Flask-SocketIO

Installation

First, you need to install Flask-SocketIO and its dependencies:

pip install flask-socketio

Basic Setup

Create a basic Flask application and integrate Flask-SocketIO:

from flask import Flask, render_template
from flask_socketio import SocketIO, send, 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('message')
def handle_message(msg):
    print('Message: ' + msg)
    send(msg, broadcast=True)

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

Explanation

  • Flask and Flask-SocketIO Initialization: We initialize a Flask app and then wrap it with SocketIO.
  • Route Definition: We define a route for the root URL that renders an HTML template.
  • Event Handling: We define an event handler for the message event. When a message is received, it is printed to the console and broadcasted to all connected clients.

Creating the Client-Side Code

Create an index.html file to handle the client-side WebSocket connection:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask-SocketIO Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', (event) => {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('connect', function() {
                socket.send('User has connected!');
            });
            socket.on('message', function(msg) {
                var p = document.createElement('p');
                p.innerHTML = msg;
                document.body.appendChild(p);
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Example</h1>
</body>
</html>

Explanation

  • Socket.IO Client Library: We include the Socket.IO client library.
  • WebSocket Connection: We establish a connection to the server using io.connect.
  • Event Handlers: We define handlers for the connect and message events. When connected, a message is sent to the server. When a message is received, it is displayed on the web page.

Practical Exercise

Task

  1. Modify the server-side code to handle a custom event named my_event.
  2. Modify the client-side code to emit my_event with a custom message when a button is clicked.
  3. Display the received message on the web page.

Solution

Server-Side Code

from flask import Flask, render_template
from flask_socketio import SocketIO, send, 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('my_event')
def handle_my_custom_event(json):
    print('Received my_event: ' + str(json))
    emit('my_response', json, broadcast=True)

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

Client-Side Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask-SocketIO Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', (event) => {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('connect', function() {
                socket.send('User has connected!');
            });
            socket.on('my_response', function(msg) {
                var p = document.createElement('p');
                p.innerHTML = msg.data;
                document.body.appendChild(p);
            });
            document.getElementById('sendButton').addEventListener('click', function() {
                socket.emit('my_event', {data: 'This is a custom event message!'});
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Example</h1>
    <button id="sendButton">Send Custom Event</button>
</body>
</html>

Explanation

  • Custom Event Handling: The server now listens for my_event and emits my_response with the received data.
  • Client-Side Event Emission: The client emits my_event with a custom message when the button is clicked and listens for my_response to display the message.

Summary

In this section, you learned how to integrate Flask-SocketIO into your Flask application to enable real-time communication using WebSockets. You created a basic setup, handled custom events, and implemented client-side code to interact with the server. This knowledge allows you to build more interactive and dynamic web applications.

Next, you can explore more advanced features of Flask-SocketIO, such as namespaces, rooms, and broadcasting to specific clients.

◄ Previous
◄
End!
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved