flask使用socketio的后端与前端（网页）实时交互

holiey

已于 2023-06-12 15:38:05 修改

阅读量1.6k

点赞数

分类专栏： python #flask 文章标签： flask 前端 python 后端

于 2023-06-12 15:33:49 首次发布

本文链接：https://blog.csdn.net/holiey/article/details/131169550

版权

python 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

#flask

1 篇文章 0 订阅

订阅专栏

工程原因需要后端实时推送数据到前端，并在前端进行相应的显示响应

项目架构

static存放css、js、images等静态数据

templates存放html网页文件

实现

后端main.py

from flask_socketio import SocketIO
from flask import Flask, render_template, request
from threading import Lock

thread = None
thread_lock = Lock()
app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins='*')
connected_sids = set()  # 存放已连接的客户端

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

@socketio.on('connect')
def on_connect():
    connected_sids.add(request.sid)
    print(f'{request.sid} 已连接')
    global thread
    with thread_lock:
        print(thread)
        if thread is None:
            # 如果socket连接，则开启一个线程，专门给前端发送消息
            thread = socketio.start_background_task(target=background_thread)


@socketio.on('disconnect')
def on_disconnect():
    connected_sids.remove(request.sid)
    print(f'{request.sid} 已断开')


@socketio.on('message')
def handle_message(message):
    """收消息"""
    data = message['data']
    print(f'{request.sid} {data}')

#后端程序
def background_thread():
    """
    该线程专门用来给前端发送消息
    :return:
    """
    num = 0
    while True:
        socketio.emit('server_response',{'data': num%16+1})
        socketio.sleep(2)
        num+=1

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

前端index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/socket.io/4.5.2/socket.io.min.js"></script>
    <link href="../static/css/locationGrid.css" rel="stylesheet">
</head>
<h2 id ="nowloc">当前:</h2>
<body>
<div class="container">
  <div id="loc1">1</div>
  <div id="loc2">2</div>
  <div id="loc3">3</div>
  <div id="loc4">4</div>
  <div id="loc5">5</div>
  <div id="loc6">6</div>
  <div id="loc7">7</div>
  <div id="loc8">8</div>
  <div id="loc9">9</div>
  <div id="loc10">10</div>
  <div id="loc11">11</div>
  <div id="loc12">12</div>
  <div id="loc13">13</div>
  <div id="loc14">14</div>
  <div id="loc15">15</div>
  <div id="loc16">16</div>
</div>
<script>
    var socket = io();
    //记录上一次显示位置
    var lastloc = null;
    socket.on("connect", function () {
        
    });
    
    socket.on("server_response", function (msg) {
       	//接收到后端发送过来的消息
        var t = msg.data;
        $("#nowloc").text("当前位置:"+t);
        //恢复上一次显示位置为正常颜色
        $("#loc"+lastloc).css("background-color", "#b5f1f7");
        $("#loc"+t).css("background-color", "red");
        lastloc = t;
    });

</script>
</body>
</html>

css文件

* {
  margin: 0px;
}
.container {
  /* 设置为网格布局，并且占据页面一整行 */
  display: grid;
  /* 设置网格列数 这里设置为4行4列，每格长宽为100px */
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
  /* 容器中间对齐网格 */
  justify-content: center;
  align-content: center;
  /* 设置网格项目间间隙 */
  gap: 1px 1px;
  padding: 10px;
  /* 网格内单元格垂直位置 */
  /*align-items:center;*/
}

.container > div {
  border: 1px solid white;
  text-align: center;
  align-items: center;
  font-size: 20px;
  background-color: #b5f1f7;
}

部分运行结果