【快速开始】一个简单的Flask-SocketIO应用,完成后端推送消息接收与关闭

这篇具有很好参考价值的文章主要介绍了【快速开始】一个简单的Flask-SocketIO应用,完成后端推送消息接收与关闭。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

先看运行效果图 OK,下面开始。

安装环境

本人使用环境及版本:
Anaconda:

虚拟环境:
Python版本:3.8.13
安装包及版本:
Flask-SocketIO:5.3.4
eventlet:0.33.3

快速开始

后端代码

创建app.py文件(文件名随意,不过要与后面的运行脚本中指定的文件保持一致)

import time
from flask import Flask, render_template, jsonify
from flask_socketio import SocketIO

service_state = 0
app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

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

@app.route("/start_service")
def start_service():
    global service_state
    service_state = 0
    while service_state == 0:
        time_text = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(int(time.time())))
        print(">>>>>>", time_text)
        json_data = {"no": 1, "time": time_text, "msg": "......"}
        socketio.emit("service_msg", json_data)
        socketio.sleep(2)
    return jsonify({"start": True})


@app.route("/stop_service")
def stop_service():
    global service_state
    service_state = 9
    return jsonify({"stop": True})


if __name__ == "__main__":
    socketio.run(app, host="0.0.0.0", port=5200, debug=True, log_output=True)

前端代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>HCI Application</title>
        <link rel="apple-touch-icon" sizes="76x76" href="{{url_for('static', filename='img/favicon.ico')}}">
        <link rel="icon" type="image/png" href="{{url_for('static', filename='img/favicon.ico')}}">
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
        <!-- Font Awesome Icons -->
        <link rel="stylesheet" href="{{url_for('static', filename='fontawesome/css/all.css')}}">
        <!-- Main CSS -->
        <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}"/>
        <!-- Animation CSS -->
        <link rel="stylesheet" href="{{url_for('static', filename='css/vendor/aos.css')}}"/>
    </head>
    <body> 
        <!---------- NAVBAR ---------->
        <nav class="navbar navbar-expand-lg navbar-dark bg-purple fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><i class="fas fa-robot mr-2"></i><strong>HCI</strong> Application</a>
                <div class="navbar-collapse collapse" id="navbarColor02">
                    <ul class="navbar-nav ml-auto d-flex align-items-center">
                        <li class="nav-item">
                            <input type="hidden" id="running_state" value="0">
                            <button type="button" 
                                    class="btn btn-block btn-primary btn-round mb-1"
                                    id="btn_running_state"
                                    onclick="run_serivce()">
                                <i class="fas fa-play" id="i_running_state_icon"></i>
                                <b id="b_running_state_text">启动服务</b>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
        <main class="container-fluid">
            <div class="position-relative">
                <div class="container-fluid text-dark mt-5 pt-5">
                    <!-- table -->
                    <table class="table table-left table-hover" id="tbl_log">
                        <thead class="bg-primary text-white">
                            <tr align="left">
                                <th scope="col" style="width:120px;">#</th>
                                <th scope="col" style="width:300px;">Time</th>
                                <th scope="col">消息内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center" class="text-black">
                                <th scope="row" colspan="3">等待启动 ...</th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
        <!------------ JAVASCRIPTS ---------------->    
        <script src="{{url_for('static', filename='js/vendor/jquery.min.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/vendor/popper.min.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/vendor/bootstrap.min.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/vendor/share.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/functions.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/vendor/aos.js')}}" type="text/javascript"></script>
        <script src="{{url_for('static', filename='js/socket.io.js')}}" type="text/javascript"></script>
        <noscript>
            <style>
                *[data-aos] {
                    display: block !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                }
            </style>
        </noscript>
        <script>
            AOS.init({
                duration: 700,
                disable: function () {
                    var maxWidth = 1200;
                    return window.innerWidth < maxWidth;
                }
            });

            /*
            开启服务,获取分类运行结果
            */
            var line_number = 1;
            var socket = io();

            // 专门接收后端推送消息
            socket.on('service_msg', function(data) {
                var row = "<tr>" +
                                "<th scope=\"row\">" +  line_number + "</th>" +
                                "<td align=\"left\">" + data.time + "</td>" +
                                "<td align=\"left\">" + data.msg  + "</td>" +
                            "</tr>";                                
                line_number++;
                //添加数据到 table 第一行
                $("#tbl_log tbody").prepend(row);
            });
            
            /*
            运行服务,开始接收推送消息
            */
            function run_serivce() {
                $("#btn_running_state").attr("onclick", "pause_service()");
                $("#i_running_state_icon").attr("class", "fas fa-pause");
                $("#b_running_state_text").html("暂停服务");
                var row = "<tr align=\"center\" class=\"text-success\"><th scope=\"row\" colspan=\"3\">启动成功,开始接收数据 ...</th></tr>"
                $("#tbl_log tbody").prepend(row);
                $.ajax({
                    type: "get",          // 请求方式
                    url: "start_service", // 请求路径
                    async: true,          // 异步请求
                    dataType: "json",     // 预期返回一个 json 类型数据
                    success: function (data) {   // data是形参名,代表返回的数据
                        console.log(data);
                    }
                });
            }

            /*
            暂停服务
            */
            function pause_service() {
                $("#btn_running_state").attr("onclick", "run_serivce()");
                $("#i_running_state_icon").attr("class", "fas fa-play");
                $("#b_running_state_text").html("启动服务");
                var row = "<tr align=\"center\" class=\"text-secondary\"><th scope=\"row\" colspan=\"3\">服务暂停,等待开启 ...</th></tr>"
                $("#tbl_log tbody").prepend(row);
                $.ajax({
                    type: "get",          // 请求方式
                    url: "stop_service",  // 请求路径
                    async: true,          // 异步请求
                    dataType: "json",     // 预期返回一个 json 类型数据
                    success: function (data) {   // data是形参名,代表返回的数据
                        console.log(data);
                    }
                });
            }
        </script>
    </body>
</html>

运行步骤

cmd 或者 linux控制台运行即可

python app.py

此时能看到如下图所示
【快速开始】一个简单的Flask-SocketIO应用,完成后端推送消息接收与关闭,技术笔记,flask,python,后端,推送,消息推送,SocketIO,Flask-SocketIO
此时访问http://0.0.0.0:5200(0.0.0.0 替换成对应IP或者127.0.0.1或localhost即可看到图1-3效果)


代码理解

在python代码中,首先通过SocketIO封装flask app

socketio = SocketIO(app, cors_allowed_origins="*")

通过cors_allowed_origins="*"来指定支持跨域访问限制问题

另外设定全局变量service_state = 0用来控制服务运行状态,从而根据结果是否要向前端发送数据。

最后就是在启动接口/start_service上增加状态判断死循环,只要service_state = 0,就会不断向前端发送数据(我这加了2秒间歇),具体方法调用前面定义的socketio变量的emit函数即可,如下所示:

socketio.emit("service_msg", json_data)

而要停止推送服务的话,那只需要调用/stop_service改变全局变量service_state的值即可。

代码下载

【GitCode地址:flask_socketio_quickstart】文章来源地址https://www.toymoban.com/news/detail-542470.html

到了这里,关于【快速开始】一个简单的Flask-SocketIO应用,完成后端推送消息接收与关闭的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从零开始学Flask: 3分钟用Python快速构建Web应用

    什么是Flask?Flask 是一个轻量级的 Python Web 应用框架,因其简单易用、灵活性高等特点,可以帮助开发者快速构建小型应用和个人项目,被广泛用于开发各种 Web 应用,包括博客、社交网络、电子商务网站等。Flask 框架具有以下优点: 简单易用。Flask 框架的设计目标是保持简

    2024年02月15日
    浏览(55)
  • html写一个向flask_socketio发送消息和接收消息并显示在页面上

    以下是一个简单的HTML页面,它包含一个输入框、一个发送按钮和一个显示区域。用户可以在输入框中输入消息,点击发送按钮,然后这个消息会被发送到 Flask-SocketIO 服务器。当服务器回应消息时,它会在页面的显示区域显示出来。 此外,Flask-SocketIO 服务器端代码可以处理客

    2024年02月11日
    浏览(36)
  • 使用flask开启一个简单的应用

    Flask是非常流行的 Python Web框架,它能如此流行,原因主要有如下几点: 。有非常齐全的官方文档,上手非常方便。 。有非常好的扩展机制和第三方扩展环境,.工作中常见的软件都会有对应的扩展。自己动手实现扩展也很容易。 。社区活跃度非常高。 。微框架的形式给开发者

    2024年02月16日
    浏览(44)
  • python创建一个简单的flask应用

    下面用python在本地和服务器上分别创建一个简单的flask应用: 1.在pc本地 1)pip flask后创建一个简单的脚本flask_demo.py win+R进入命令行,切换到flask_demo.py的路径,执行 启动应用 如果显示启动失败,可能的原因是: 设置FLASK_APP环境变量:在命令行中输入以下命令,将FLASK_APP环境

    2024年02月05日
    浏览(37)
  • 【简单】使用ChatGPT和QT从零开始构建一个计算器应用

    在这篇博文中,我将向大家展示如何使用ChatGPT和Qt来构建一个完整的计算器应用。我们将从零开始,逐步引导您完成整个项目,包括需求分析、软件设计、代码编写等环节。该项目代码全部由GPT编写,10分钟完成。 本项目旨在使用ChatGPT和Qt技术构建一个功能完备的计算器应用。

    2024年02月11日
    浏览(69)
  • Websocket 之flask_socketio和Python socketio

    前端 后端 前端 后端 client server client Flask server 版本问题参考:https://blog.csdn.net/weixin_44986037/article/details/131504760

    2024年02月12日
    浏览(39)
  • Flask SocketIO 实现动态绘图

    Flask-SocketIO 是基于 Flask 的一个扩展,用于简化在 Flask 应用中集成 WebSocket 功能。WebSocket 是一种在客户端和服务器之间实现实时双向通信的协议,常用于实现实时性要求较高的应用,如聊天应用、实时通知等,使得开发者可以更轻松地构建实时性要求较高的应用。通过定义事

    2024年02月05日
    浏览(37)
  • flask socketio 实时传值至html上【需补充实例】

    跨域问题网上的普通方法无法解决。 参考这篇文章解决 Flask教程(十九)SocketIO - 迷途小书童的Note迷途小书童的Note (xugaoxiang.com) 如果用了eventlet,在while true中,emit数据不在前端web页面显示,可参考这篇文章的解决方案,加定时器。 javascript - Flask-websocket Emit主动发送消息失败

    2024年02月07日
    浏览(43)
  • flask框架-[实现websocket]:将socketio处理函数部分集中管理,使用类的方式来管理,集中管理socketio处理函数

    注意:在flask2.x版本依赖,不再支持flask_script了 flask2.x版本会自动注册 flask run 和flask db 两个命令行命令 1、启动项目 flask run --host 0.0.0.0 --port 9000 2、数据库迁移命令 flask db init flask db migrate flask db upgrade apps         __init__.py  : 创建app应用,各种注册         websocket   

    2024年02月07日
    浏览(49)
  • 通过ChatGPT实现的ChatPDF,简单的应用落地,让你的文档变成一个智能助手,通过对话的方式快速学习文档内容

    目录 先看效果 实现原理 环境安装 应用场景 首先,找到一篇论文先,我这里随便找了一篇pdf格式的论文 那么,我现在让他担任一个研究论文的智能助手,当然大家可以自定义自己的prompt  开始问答 可以看到效果很强 提取 pdf 文本,以便后续处理。 由于 OpenAI API 对 Token 数量

    2023年04月08日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包