Home > Article > Backend Development > How to use Flask-SocketIO to implement real-time communication applications

How to use Flask-SocketIO to implement real-time communication applications

王林Original: 2023-08-03 21:57:221356browse

Introduction:
In Web applications, real-time communication is a very important function, which allows users to exchange information in real time, or in real time Receive data pushed by the server. Flask-SocketIO is a plug-in based on the Flask framework, which provides the ability to use WebSocket to achieve real-time communication. This article will introduce how to use Flask-SocketIO to implement a simple real-time communication application.

Preparation work:
First, we need to install the Flask-SocketIO plug-in. It can be installed through the following command:

pip install flask-socketio

In addition, we also need to install the Socket.IO JavaScript library for real-time communication on the front end. It can be installed through the following command:

npm install socket.io-client

When these preparations are completed, we can start writing code.

Code example:
The following is a simple Flask-SocketIO real-time communication application code example:

Introduce the necessary libraries and modules

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

Create Flask application and configure

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

Define routing and event handling functions

@app.route('/')
def index():
 return render_template('index.html')

@socketio.on('message')
def handle_message(message):
 print('received message: ' + message)
 emit('response', {'data': 'Server response'})

@socketio.on('connect')
def handle_connect():
 print('client connected')

@socketio.on('disconnect')
def handle_disconnect():
 print('client disconnected')

Create front-end HTML file
Create a file named index.html in the project root directory and add the following code:

<!DOCTYPE html>
<html>
<head>
 <title>Real-time Communication</title>
 <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
</head>
<body>
 <h1>Real-time Communication</h1>
 <input id="message-input" type="text" placeholder="Enter message">
 <button id="send-button">Send</button>
 <div id="response-div"></div>

 <script type="text/javascript">
     var socket = io.connect();

     $('#send-button').click(function() {
         var message = $('#message-input').val();
         socket.emit('message', message);
     });

     socket.on('response', function(data) {
         $('#response-div').text(data.data);
     });
 </script>
</body>
</html>

Start the application
Add the following code to the application's entry file to start the application ：
```
if __name__ == '__main__':
 socketio.run(app, debug=True)
```

After running the application, visit http://localhost:5000 in the browser, and you will see a simple real-time communication application interface. Enter a message in the message input box and click the send button to realize the function of sending and receiving messages in real time.

Summary:
This article introduces how to use Flask-SocketIO to implement real-time communication applications. Through the Flask-SocketIO plug-in, we can easily and quickly build a real-time communication application to realize real-time message transmission between the server and the client. I hope this article can help you understand how to use Flask-SocketIO to implement real-time communication applications.

The above is the detailed content of How to use Flask-SocketIO to implement real-time communication applications. For more information, please follow other related articles on the PHP Chinese website!

JavaScript flask html 事件 http websocket

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to build high-performance web applications using DjangoNext article：How to build high-performance web applications using Django

See more

How to use Flask-SocketIO to implement real-time communication applications

Related articles