首页 > 其他分享 >Flask 学习99-Flask-SocketIO 开发websocket接口

Flask 学习99-Flask-SocketIO 开发websocket接口

时间:2024-02-19 23:00:47浏览次数:39  
标签:__ websocket socket socketio Flask app 99 flask

前言

flask-socketio 为flask应用提供了一个客户端与服务器之间低延迟的双向通讯
官网地址:https://flask-socketio.readthedocs.io/en/latest/intro.html

环境准备

先安装flask-socketio

pip install flask-socketio

说明Flask-SocketIO 与 js版本客户端不匹配,二者不能正常通信。兼容版本说明:https://flask-socketio.readthedocs.io/en/latest/intro.html

我安装的5.x的版本

那么前端socket.io.js应该选4.x版本

快速开始

以下是Flask-SocketIO 结合到 Flask 应用简单示例

from flask import Flask, render_template
from flask_socketio import SocketIO

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

if __name__ == '__main__':
    socketio.run(app)

前端简单代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
    var socket = io();
    socket.on('connect', function() {
        socket.emit('my event', {data: 'I\'m connected!'});
    });
</script>

前后端交互实例

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>web</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>

<body>
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
        const namespace = '/ws'
        // 连上服务器
        const socket = io.connect("http://" + document.domain + ":" + location.port + namespace);

        // 发送message 消息
        socket.emit("message",{"data":"hello world!"});

        // 收到数据后,执行输出
        socket.on('response', function(recv) {
            console.log('hello: ' + recv.data)
        });
    });
</script>
</body>
</html>

flask 后端代码

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



app = Flask(import_name=__name__,
            static_url_path='/static',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

app.config['SECRET_KEY'] = "abcdef"
socketio = SocketIO(app)


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


# 出现消息后,率先执行此处
@socketio.on("message", namespace="/ws")
def socket(message):
    print(f"接收到消息: {message['data']}")
    for i in range(1, 10):
        socketio.sleep(1)
        socketio.emit("response",           # 绑定通信
                      {"data": i},           # 返回socket数据
                      namespace="/ws")


# 当websocket连接成功时,自动触发connect默认方法
@socketio.on("connect", namespace="/ws")
def connect():
    print("链接建立成功..")


# 当websocket连接失败时,自动触发disconnect默认方法
@socketio.on("disconnect", namespace="/ws")
def disconnect():
    print("链接建立失败..")


if __name__ == '__main__':
    socketio.run(
        app,
        debug=True,
        host="0.0.0.0",
        port=8000,
        allow_unsafe_werkzeug=True
    )

在console看到输出1-9 ,说明前后端交互成功

更多使用方法参考官网教程:https://flask-socketio.readthedocs.io/en/latest/getting_started.html

标签:__,websocket,socket,socketio,Flask,app,99,flask
From: https://www.cnblogs.com/yoyoketang/p/18022139

相关文章

  • P9997 [Ynoi2000] pmpkmp
    我永远喜欢数据结构。lxl大毒瘤!开写到AC耗时\(5\)天的大毒瘤题,期间学习了神仙@云浅知处的思路。他修改部分的代码也帮助我找到锅AC,膜拜云浅!本题是CF1045JMoonwalkchallenge的加强版,码量超过\(6\text{KB}\),作为一名对读者负责人的笔者,我在此必须郑重警告:\[\color{re......
  • 洛谷题单指南-递推与递归-P1990 覆盖墙壁
    原题链接:https://www.luogu.com.cn/problem/P1990题意解读:用两种可旋转的形状铺满N*2的区域,求方案数,可以使用递推。解题思路:步骤1、设f[i]表示铺满i*2的区域的方案数根据要求,i*2区域最后一列有4种可能的铺法:如果采用图1铺法,则有f[i]=f[i-1]如果采用图2铺法,则有f[i]=f......
  • P1012 [NOIP1998 提高组] 拼数
    题目 源代码一、错误示范1//去比较最高位数字的大小,大的在前面(ASCII比较)2//使用字符串存储多个数字3#include<iostream>4#include<algorithm>5usingnamespacestd;6structstu7{8strings;9}student[25];10boolcmp(stua,stub)11{......
  • P3799 妖梦拼木棒
    妖梦拼木棒题目背景上道题中,妖梦斩了一地的木棒,现在她想要将木棒拼起来。题目描述有\(n\)根木棒,现在从中选\(4\)根,想要组成一个正三角形,问有几种选法?答案对\(10^9+7\)取模。输入格式第一行一个整数\(n\)。第二行往下\(n\)行,每行\(1\)个整数,第\(i\)个整数\(a......
  • 记录--你还在使用websocket实现实时消息推送吗?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如数据大屏的实时数据,比如消息中心的未读消息,比如聊天功能等等。本文主要介绍SSE的使用场景和如何使用SSE。服务端向客户端推送......
  • English99
    书写生命的传奇bio---->biography:传奇JohnDryden(1631-1700)autobiography:传记。其中bio:代表:life.graphy:代表:writing.biocytobiology:细胞生物学bioscience:生物科学bioengineering:生物工程bionic:仿生学的biorhythm:生物节律molecularbiology:分子生物学......
  • 力扣 深度优先搜索 199. 二叉树的右视图
    /** *Definitionforabinarytreenode. *publicclassTreeNode{ *  intval; *  TreeNodeleft; *  TreeNoderight; *  TreeNode(){} *  TreeNode(intval){this.val=val;} *  TreeNode(intval,TreeNodeleft,Tr......
  • P1011 [NOIP1998 提高组] 车站
    题目描述火车从始发站(称为第11站)开出,在始发站上车的人数为aa,然后到达第22站,在第22站有人上、下车,但上、下车的人数相同,因此在第22站开出时(即在到达第33站之前)车上的人数保持为aa人。从第33站起(包括第33站)上、下车的人数有一定规律:上车的人数都是前两站上车人数......
  • 配置springcloud 网关gateway 转发websocket请求
    网关是整个项目的统一入口这是直接访问消息服务的请求路径端口号是20007WebSocketService.init("ws://127.0.0.1:20007/ws/"+用户id)显然这样是不符合微服务的方案,所有请求必须经过网关处理,转发到各个服务之中所以我们需要在网关中的yml或者nacos中添加以下配置spring:......
  • 酷睿i5-12450H+16GB内存!神舟战神Mini电脑1899元到手
    神舟战神Minii5迷你台式电脑正在参与京东年货节大促,搭载酷睿第12代i5-12450H处理器,另外还有16GBDDR4内存和512GBPCIe4.0SSD,整机到手价1899元,应该是目前为止相同配置售价最低的品牌迷你主机。酷睿第12代i5-12450H处理器其实是用于笔记本的型号,拥有超低的功耗但是性能却不低......