Flask Websocket Example: A Step-by-Step Guide to Building Real-Time Applications

Websockets have revolutionized the way we build real-time applications. They allow for bi-directional communication between the client and server, enabling real-time updates without the need for constant polling. Flask, a popular Python web framework, has excellent support for websockets through the Flask-SocketIO extension. In this article, we’ll go through a step-by-step guide to building a Flask websocket example. By the end of this guide, you’ll have a solid understanding of how to build real-time applications using Flask and websockets.

Table of Contents show

What are Websockets?

Websockets are a protocol for bi-directional, real-time communication between the client and server. Unlike HTTP, which only allows the client to initiate requests, websockets enable the server to push data to the client at any time. This makes them ideal for real-time applications such as chat applications, stock tickers, and multiplayer games.

Websockets use a persistent connection between the client and server, which means that once the connection is established, data can be sent and received in real-time without the need for constant polling. This makes websockets more efficient and responsive than traditional HTTP-based approaches.

What is Flask?

Flask is a micro web framework written in Python. It is designed to be lightweight and modular, allowing developers to build web applications quickly and easily. Flask is known for its simplicity, flexibility, and ease of use. It is a popular choice for building web applications and APIs in Python.

What is Flask-SocketIO?

Flask-SocketIO is a Flask extension that provides support for websockets. It is built on top of the Socket.IO library, which is a popular choice for building real-time applications. Flask-SocketIO makes it easy to integrate websockets into your Flask application, allowing you to build real-time applications with ease.

Setting up a Flask Application

The first step in building a Flask websocket example is to set up a Flask application. If you’re new to Flask, you can follow these steps to set up a basic Flask application:

Create a new directory for your Flask application.
Create a new file called app.py in the directory.
Open app.py in your favorite text editor and add the following code:

from flask import Flaskapp = Flask(__name__)
@app.route("/")def index():return "Hello, World!"
if __name__ == "__main__":app.run()

This code creates a new Flask application and defines a single route that returns the string “Hello, World!” when the root URL is accessed. To run the application, you can execute the following command in your terminal:

$ python app.py

This will start the Flask development server on port 5000. You can access the application by navigating to http://localhost:5000 in your web browser.

Adding Flask-SocketIO to Your Application

Now that you have a basic Flask application set up, the next step is to add Flask-SocketIO to your application. You can do this by installing Flask-SocketIO using pip:

$ pip install flask-socketio

Once Flask-SocketIO is installed, you can add it to your Flask application by importing the SocketIO class and creating a new instance:

from flask import Flaskfrom flask_socketio import SocketIOapp = Flask(__name__)socketio = SocketIO(app)
@app.route("/")def index():return "Hello, World!"
if __name__ == "__main__":socketio.run(app)

This code creates a new instance of the SocketIO class and passes in the Flask application instance. This sets up Flask-SocketIO to work with your Flask application.

Handling Websocket Events

Now that Flask-SocketIO is set up, you can start handling websocket events. Websocket events are triggered when the client sends a message to the server or when the server sends a message to the client. To handle websocket events, you can use the @socketio.on() decorator:

@socketio.on("my_event")def handle_my_event(data):print("received message: " + data)

This code defines a new event handler that listens for the “my_event” event. When this event is triggered, the handle_my_event() function is called with the data that was sent by the client. In this case, the function simply prints the data to the console.

Sending Messages to the Client

You can also send messages from the server to the client using websockets. To send a message to the client, you can use the emit() function:

@socketio.on("my_event")def handle_my_event(data):socketio.emit("my_response", "server response")

This code sends a message to the client with the “my_response” event and the message “server response”. The client can then handle this message using a similar event handler:

socket.on("my_response", function(data) {console.log("received message: " + data);});

This code listens for the “my_response” event and logs the data to the console when it is received.

Combining Flask-SocketIO with Other Flask Features

Flask-SocketIO can be combined with other Flask features to build powerful web applications. For example, you can use Flask-SocketIO to build a real-time chat application:

from flask import Flask, render_templatefrom flask_socketio import SocketIO, emitapp = 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(data):emit("message", data, broadcast=True)
if __name__ == "__main__":socketio.run(app)

This code defines a new route that renders an HTML template, and a websocket event handler that listens for the “message” event and broadcasts the message to all connected clients.

The HTML template can include a form for sending messages:

<form id="form" action="#"><input id="input" type="text" placeholder="Enter message"><button id="submit" type="submit">Send</button></form>

The Javascript code can handle the form submission and send the message to the server:

var form = document.getElementById("form");var input = document.getElementById("input");form.onsubmit = function(event) {event.preventDefault();socket.emit("message", input.value);input.value = "";};

This code listens for the form submission and sends the message to the server using the “message” event.

Conclusion

In this article, we’ve gone through a step-by-step guide to building a Flask websocket example. We’ve covered the basics of websockets, Flask, and Flask-SocketIO, and shown how to handle websocket events and send messages between the client and server. With this knowledge, you can start building your own real-time applications using Flask and websockets.

FAQ

What is Flask?

Flask is a micro web framework written in Python. It is designed to be lightweight and modular, allowing developers to build web applications quickly and easily.

What is Flask-SocketIO?

Flask-SocketIO is a Flask extension that provides support for websockets. It is built on top of the Socket.IO library, which is a popular choice for building real-time applications.

What are Websockets?

Websockets are a protocol for bi-directional, real-time communication between the client and server. They allow for real-time updates without the need for constant polling.