Python使用flask框架与前端建立websocket链接,并进行数据交互

本文介绍了如何使用Python的Flask框架与前端建立WebSocket连接,进行数据交互。首先,详细讲述了如何编写Flask后端服务,包括设置WebSocket实例和相关接口。接着,展示了如何完善HTML文件,利用Vue.js进行前端交互。然后,启动服务并测试WebSocket链接。最后,解释了Flask中emit()方法用于数据推送的关键参数,如事件名称和命名空间。在实践中,需要注意HTML文件的编码问题,以避免编译错误。

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

Python使用flask框架与前端建立websocket链接,并进行数据交互

后端采用的框架为flask,前端用的flask自带的html编写,实现的功能为:前后端建立websocket链接并进行数据交互

一、编写一个flask后端服务

常规创建方式就可以,创建一个flask服务。声明一个websocket实例,以websocket的方式启动这个服务。

  1. 安装相关依赖:
pip install flask
pip install flask_socketio
  1. 声明应用和websocket实例
from flask import Flask, request, render_template
from flask_socketio import SocketIO, emit

# 声明应用
app = Flask(__name__)

# 为通讯添加一个密钥
app.config['SECRET_KEY'] = 'secret_key'

# 创建websocket实例
my_socket = SocketIO(app)

  1. 项目目录下新建temlpates文件夹,然后文件夹里新建index.html文件,内容信息,我们稍后补充,先有这个东西就行。
    在这里插入图片描述
  2. 编写接口信息。编写接口信息的时候要添加websocket通讯的相关方法。

# 声明访问页面信息
@app.route('/')
def index():
	# 这里是进行了flask前端模板的渲染,文件就是我们上面建的那个,只写文件名称就可以,框架内部是默认访问temlpates目录的
    return render_template('index.html')

新建一个websocket推送接口,使用 emit() 方法推送信息到到前端。然后声明几个websocket建立过程中用到的方法。关于 emit() 的使用,后面讲。

# 数据推送接口,后面调这个接口模拟数据发送
@app.route('/send_msg', methods=['post'])
def receive_source():
    """
    推送数据
    :return:
    """
    try:
        my_socket.emit('date', request.json, namespace='/')
        return 'success'
    except Exception as e:
        log.error(f'数据处理错误:{
     str(e)}')
        return 'failed'

# 当websocket链接建立的时候,会调用这个
@my_socket.on('connect')
def handle_connect():
    print('WebSocket 链接已经建立')

# 关闭用
@my_socket.on('disconnect')
def handle_disconnect():
    print('WebSocket 链接已经关闭')

# 发送信息用
@my_socket.on('message')
def handle_message(data):
    emit('msg', data, namespace='/')

  1. 以websocket的方式启动服务(填写完后面的html代码后启动)
if __name__ 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值