flask-socketio初步使用！！！亲测可用

最新推荐文章于 2025-04-15 19:26:12 发布

HaLo120706

最新推荐文章于 2025-04-15 19:26:12 发布

阅读量1.4k

点赞数 2

文章标签： flask python 后端

本文链接：https://blog.csdn.net/weixin_41227756/article/details/126281148

版权

本文介绍如何使用 Flask-SocketIO 和 socket.io.js 实现简单的实时通信应用，包括环境配置、前后端代码示例及运行说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章存粹用来记录flask-socketio的使用

环境

python 3.7.2（之前一直用3.10，但无法运行成功，用3.7.2可以运行成功，其他版本应该也可以，只要不高于3.10）

所需依赖包（这些版本下是可运行）

bidict==0.22.0
click==8.1.3
dnspython==2.2.1
eventlet==0.33.1
Flask==2.2.2
Flask-SocketIO==5.2.0
greenlet==1.1.2
importlib-metadata==4.12.0
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.1
python-engineio==4.3.4
python-socketio==5.7.1
six==1.16.0
typing_extensions==4.3.0
Werkzeug==2.2.2
zipp==3.8.1

后端

app.py

# _*_ coding:utf-8 _*_
from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'D20fndvfMK27^313787-AQl131'

socketio = SocketIO()

socketio.init_app(app)

name_space = '/abcd'


@app.route('/abc')
def get_abc():
    """demo page"""
    return render_template('index.html')


@app.route('/push')
def push_once():
    """broadcast event generator"""
    event_name = 'abcde'
    broadcasted_data = {'data': "pushed once!"}
    socketio.emit(event_name, broadcasted_data, broadcast=True, namespace=name_space)
    return 'done!'


@socketio.on('connect', namespace=name_space)
def connected_msg():
    """socket client event - connected"""
    print('client connected!')


@socketio.on('disconnect', namespace=name_space)
def disconnect_msg():
    """socket client event - disconnected"""
    print('client disconnected!')


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

前端

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket Demo</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script crossorigin="anonymous" integrity="sha512-2RDFHqfLZW8IhPRvQYmK9bTLfj/hddxGXQAred2wNZGkrKQkLGj8RCkXfRJPHlDerdHHIzTFaahq4s/P4V6Qig==" src="https://lib.baomitu.com/socket.io/3.1.3/socket.io.js"></script>
</head>
<body>

<h2>Demo of Socket BroadCast</h2>
<div id="t"></div>
<script>
$(document).ready(function () {
    namespace = '/abcd';
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
    socket.on('abcde', function (res) {
        var t = res.data;
        if (t) {
            $("#t").append(t).append('<br/>');
        }

    });
});
</script>
</body>
</html>