Real-Time Features with Flask-SocketIO

Introduction

Real-time features, such as WebSockets, allow applications to send and receive data instantly without refreshing the page. Flask-SocketIO makes it easy to integrate WebSocket communication into a Flask application, enabling live notifications and updates.

This article explains how to build real-time features using Flask-SocketIO, with practical examples for notifications and live updates.

Step 1: Install Flask-SocketIO and Dependencies

Install Flask-SocketIO and its WebSocket dependency:

            pip install flask-socketio eventlet

Step 2: Set Up Flask-SocketIO

Update your Flask application to include Flask-SocketIO:

  from flask import Flask, render_template
   from flask_socketio import SocketIO

   app = Flask(__name__)
   socketio = SocketIO(app)

   @app.route('/')
  def index():
      return '''
      
      
       
           
Real-Time Updates

          

          
          
          
      
      
      '''

  @socketio.on('new_message')
  def handle_message(data):
      print(f"Received message: {data}")
      socketio.emit('update', f"Server received: {data}")

Step 3: Start the Application

Run the Flask application with Flask-SocketIO:

            socketio.run(app, debug=True)

Access the app in your browser. Clicking "Send Message" sends a WebSocket message to the server, which broadcasts an update to all clients.

Step 4: Adding Notifications

Add a notification example to your application:

  @socketio.on('notify')
   def handle_notification(data):
      print(f"Notification: {data}")
      socketio.emit('notification', f"New notification: {data}")

Update the JavaScript in the template to handle notifications:

    socket.on('notification', function(data) {
        alert(data);
     });

     function sendNotification() {
        socket.emit('notify', 'You have a new notification!');
    }

Add a button in the HTML:

            <button onclick="sendNotification()">Send Notification</button>

Step 5: Broadcasting Live Updates

Implement live updates, such as a live chat or dashboard updates:

  @app.route('/broadcast')
  def broadcast():
      socketio.emit('update', 'This is a broadcast update!')
      return "Broadcast sent!"

Access /broadcast in your browser to send a broadcast message to all connected clients.

Conclusion

By integrating Flask-SocketIO, you can easily add real-time features to your Flask application, such as WebSocket-based communication, live notifications, and updates. This improves user interaction and application responsiveness.




Advertisement