flask_socketio 以继承 Namespace方式实现一个网页聊天应用

news2025/1/24 2:26:21

点击进入上一篇,可作为参考

实验环境

python 用的是3.11.11
其他环境可以通过这种方式一键安装:
pip install flask==3.1.0 Flask-SocketIO==5.4.1 gevent-websocket==0.10.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
pip list 详情如下:
Package          Version
---------------- -------
bidict           0.23.1
blinker          1.9.0
click            8.1.7
Flask            3.1.0
Flask-SocketIO   5.4.1
gevent           24.11.1
gevent-websocket 0.10.1
greenlet         3.1.1
h11              0.14.0
itsdangerous     2.2.0
Jinja2           3.1.4
MarkupSafe       3.0.2
pip              24.2
python-engineio  4.11.1
python-socketio  5.11.4
setuptools       75.1.0
simple-websocket 1.1.0
Werkzeug         3.1.3
wheel            0.44.0
wsproto          1.2.0
zope.event       5.0
zope.interface   7.2

先看效果:

在这里插入图片描述

目录结构:

在这里插入图片描述

app2.py中的内容如下:

from flask import Flask, render_template, request 
from flask_socketio import SocketIO, Namespace, join_room, leave_room  

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

def create_application(name, config=None, timeout=60, proxy=None):
    app = Flask(name)
    @app.route("/", methods=["GET", "POST"])
    def main():
        return render_template("index.html")
    return app

class MyNamespace(Namespace):  
    def on_connect(self):  
        print("Client connected")  


    # def on_message(self, message):  
    #     print(f"Received message: {message}")  
    #     # socket_io.emit('response', {'data': 'Message received'}, namespace="/my_room") # 下边这种方式和本行这个方式都可以(在没有to传递参数时,self方式不能传递to这个参数)
    #     self.emit('response', {'data': 'Message received'}, namespace="/my_room")
    
    def on_joinRoom(self, message):
        # global Room  # 没有被用到吧,应该没啥用
        # print(message)
        join_room(message['room'])  #加入房间有专门的函数,不用我们管

        # socket_io.emit("room_joined", {
        socket_io.emit("roomJoined", {
            "user" : request.sid,
            "room" : message['room']
        },to=message['room'], namespace="/my_room")  # !!!这个namespace="/my_room"一定要写
    
    def on_sendMsg(self,message):
        print(message)
        # 下边这个emit中的“SendtoAll”是 前端socket.on('SendtoAll')的监听对象   to=message['room'] 表示给房间里的所有人都发送消息  如果不写则表示个自己一个人回消息
        # request.sid貌似是每对socket连接都会不一样,但是没断开的应该是一样的
        
        # self.emit 这个不能传递, to=message["room"] 不然会报错
        # self.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")
        socket_io.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")
    
    def on_leaveRoom(self,message):
        print(message)
        socket_io.emit('roomLeftPersonal', {"room": message['room'], "user": request.sid}, namespace="/my_room")  # 这个没写to=message['room'] 表示给自己一个人回消息
        leave_room(message['room'])  # 可神奇,他咋知道那个人离开了,可能是socket连接所以知道
        socket_io.emit('roomLeft', {"room":message['room'], "user":request.sid}, to=message['room'], namespace="/my_room")

        
app = create_application("pipeagent_service", config=None)
socket_io = SocketIO(app, processes=True, cors_allowed_origins="*", async_mode='gevent')
socket_io.on_namespace(MyNamespace('/my_room'))
if __name__ == "__main__":
    socket_io.run(app=app, host="0.0.0.0", debug=False, log_output=True)

index.html中的内容如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>flask socketio通信</title>
<!--        flask-socketio-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<!--        Jquery-->
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
        <script type="text/javascript" src="//cdn.bootcss.com/socket.io/3.1.2/socket.io.min.js"></script>
        <script type="text/javascript" src="{{url_for('static', filename='js/index.js')}}"></script>
    </head>
    <body>

        <h3>Join Room</h3>
        <form id="joinRoom" method="POST" action="#">
            <label>Room Number</label>
            <input type="text" id="roomNum" required>
            <input type="submit" id="submitRoomNum">

        </form>
        <button id="leave_room">Leave</button>

        <h1>Hello World</h1>
    <ul id="chatContent">
        <li>Text</li>
    </ul>
    <form id="SubmitForm" method="POST" action="#">
        <h3>发送文字</h3>
        <textarea placeholder="输入文字" name="msg" id="chatMsg" required></textarea>

        <button type="submit">发送</button>
    </form>
    </body>
</html>

index.js中的内容如下:

$(document).ready(function(){
    // 这个 my_room对应后端中的Namespace 即命名空间
    var socket = io.connect('http://localhost:5000/my_room');  
    socket.on('connect', function() { 
        socket.send('Client Connected') 
        // console.log("Connected to server");  
    }); 
    
    $('form#joinRoom').submit(function (event){
        socket.emit('joinRoom', {room:$('#roomNum').val()})
        return false
    });
    // 3
    socket.on('roomJoined', function (msg, cb) {
        $('#chatContent').append('<li>' + msg.user + 'has joined room'+ msg.room +' </li>')
    });
    // 4
    $('form#SubmitForm').submit(function (event){
        // 发送给后端的sendMsg方法
        socket.emit('sendMsg', {
            msg:$('#chatMsg').val(),
            room:$('#roomNum').val()
        });
        $('#chatMsg').val("");
        return false
    });

    // 5 监听后端的SendtoAll方法
    socket.on('SendtoAll', function (msg, cb) {
        $('#chatContent').append('<li>' + msg.user + ': ' + msg.msg + '</li>')
    });
    // 6
    $('#leave_room').on('click', function (){
        socket.emit('leaveRoom', {room:$('#roomNum').val()})
        console.log("sent")
    });
    // 7
    socket.on('roomLeftPersonal', function (msg, cb) {
        $('#chatContent').append('<li>' + 'you have left room'+ msg.room +' </li>')

    });
    // 8 
    socket.on('roomLeft', function (msg, cb) {
        $('#chatContent').append('<li>' + msg.user + 'has left room'+ msg.room +' </li>')

    });
    // socket.on('response', function(data) {  
    //     console.log(data.data);  
    // });  
    // socket.on('disconnect', function() {  
    //     console.log('Disconnected');  
    // });  
    // socket.emit('message', 'Hello, server!');



    // 1  一般的执行步骤 1,2,3....
    // var socket = io();
    //  连接socket
    // socket.on('connect', function (){
    //     socket.send('Client Connected')
    // });
})

运行:即 python app2.py 然后打开两个网页,并分别输入http://127.0.0.1:5000/ 开启愉快的自我交流吧

另可参考点击进入

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2263332.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis 7.x如何安装与配置?保姆级教程

大家好&#xff0c;我是袁庭新。最新写了一套最新版的Redis 7.x企业级开发教程&#xff0c;今天先给大家介绍下Redis 7.x如何在Linux系统上安装和配置。 1 Redis下载与安装 使用非关系型数据库Redis必须先进行安装配置并开启Redis服务&#xff0c;然后使用对应客户端连接使用…

如何编辑调试gradle,打印日志

在build.gradle.kts中输入 println("testxwg1 ") logger.lifecycle("testxwg2") logger.log(LogLevel.ERROR,"testxwg5") 点刷新就能看到打印日志了

electron-vite【实战系列教程】

创建项目 https://blog.csdn.net/weixin_41192489/article/details/144442262 安装必要的插件 UI 库 element-plus npm install element-plus --save安装 element-plus 图标 npm install element-plus/icons-vue安装插件 – 自动注册组件 vs 自动导入框架方法 npm install -…

【开源项目】数字孪生轨道~经典开源项目数字孪生智慧轨道——开源工程及源码

飞渡科技数字孪生轨道可视化平台&#xff0c;基于国产数字孪生引擎&#xff0c;结合物联网IOT、大数据、激光雷达等技术&#xff0c;对交通轨道进行超远距、高精度、全天侯的监测&#xff0c;集成轨道交通运营数据&#xff0c;快速准确感知目标&#xff0c;筑牢轨交运营生命线。…

Rstudio安装

Rstudio提供了良好的R语言代码编辑环境&#xff0c;R程序调试环境&#xff0c;图形可视化环境以及方便的R工作空间和工作目录管理。 下载网址&#xff1a;https://posit.co/products/open-source/rstudio/ 进入网址&#xff1a; 下滑找到&#xff0c;点击进入 找到Dsektop&am…

Chrome 浏览器原生功能截长屏

我偶尔需要截取一些网页内容作为素材&#xff0c;但偶尔内容很长无法截全&#xff0c;需要多次截屏再拼接&#xff0c;过于麻烦。所以记录下这个通过浏览器原生功能截长屏的方案。 注意 这种方案并不是百分百完美&#xff0c;如果涉及到一些需要滚动加载的数据或者悬浮区块&am…

【工具】通过js获取chrome浏览器扩展程序列表id及名称等

【工具】通过js获取chrome浏览器扩展程序列表id及名称等 第一步 打开扩展程序页面 chrome://extensions/ 第二部 注入js获取 let 扩展字典 {} document.querySelector("body > extensions-manager").shadowRoot.querySelector("#items-list").shadow…

基于LSB最低有效位的音频水印嵌入提取算法FPGA实现,包含testbench和MATLAB对比

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视…

Midjourney参数大全

基本参数​ 纵横比&#xff0c;宽高比​ --aspect&#xff0c;或--ar更改生成的纵横比。 混乱​ --chaos <number 0–100>改变结果的变化程度。更高的数值会产生更多不寻常和意想不到的结果。 图像权重​ --iw <0–2>设置相对于原始图像相识度。默认值为 1&a…

虚拟机VMware的安装问题ip错误,虚拟网卡

要么没有虚拟网卡、有网卡远程连不上等 一般出现在win11 家庭版 1、是否IP错误 ip addr 2、 重置虚拟网卡 3、查看是否有虚拟网卡 4、如果以上检查都解决不了问题 如果你之前有vmware 后来卸载了&#xff0c;又重新安装&#xff0c;一般都会有问题 卸载重装vmware: 第一…

Loki 微服务模式组件介绍

目录 一、简介 二、架构图 三、组件介绍 Distributor&#xff08;分发器&#xff09; Ingester&#xff08;存储器&#xff09; Querier&#xff08;查询器&#xff09; Query Frontend&#xff08;查询前端&#xff09; Index Gateway&#xff08;索引网关&#xff09…

EMQX V5 使用API 密钥将客户端踢下线

在我们选用开源的EMQX作为mqtt broker&#xff0c;我们可能会考虑先让客户端连接mqtt broker成功&#xff0c;再去校验客户端的有效性&#xff0c;当该客户端认证失败&#xff0c;再将其踢下线。例如&#xff1a;物联网设备连接云平台时&#xff0c;我们会将PK、PS提前烧录到设…

Python中所有子图标签Legend显示详解

在数据可视化中&#xff0c;图例&#xff08;legend&#xff09;是一个非常重要的元素&#xff0c;它能够帮助读者理解图表中不同元素的含义。特别是在使用Python进行可视化时&#xff0c;matplotlib库是一个非常强大的工具&#xff0c;能够轻松创建包含多个子图的图表&#xf…

TCP套接字通信与守护进程

目录 TCP socket API 详解 代码实现TCP通讯 服务端 客户端 Task 守护进程 守护进程 前台与后台 Linux进程间关系 ​编辑 设置为独立会话setsid daemon接口 为什么需要设置umask 会话ID与组ID TCP的相关机制 下图是基于TCP协议的客户端/服务器程序的一般流程: 数…

单点登录平台Casdoor搭建与使用,集成gitlab同步创建删除账号

一&#xff0c;简介 一般来说&#xff0c;公司有很多系统使用&#xff0c;为了实现统一的用户名管理和登录所有系统&#xff08;如 GitLab、Harbor 等&#xff09;&#xff0c;并在员工离职时只需删除一个主账号即可实现权限清除&#xff0c;可以采用 单点登录 (SSO) 和 集中式…

OCR:文字识别

使用场景: 远程身份认证 自动识别录入用户身份/企业资质信息&#xff0c;应用于金融、政务、保险、电商、直播等场景&#xff0c;对用户、商家、主播进行实名身份认证&#xff0c;有效降低用户输入成本&#xff0c;控制业务风险 文档电子化 识别提取各类办公文档、合同文件、企…

亚信安全春节14天双倍假期通告

亚信安全14天双倍假期来袭 “网安福利王”再次实至名归 2024年 8773小时&#xff0c;31582680秒 亚信安全一直驰骋于云网安世界 奋战在“安全 数智化”的壮阔征途上 如今&#xff0c;新春的脚步渐近 长达14天的春节长假 能让我们暂且放下忙碌的工作 去除班味&#xff0c…

使用Python打开资源管理器并选择文件

from PySide6.QtWidgets import QFileDialogdef openSelectFile(Path):filename, _ QFileDialog.getOpenFileName(Path, "打开文件", "", "所有文件 (*)")if filename:print(f"选择的文件: {filename}")return filename 代码解释 &a…

uniapp blob格式转换为video .mp4文件使用ffmpeg工具

前言 介绍一下这三种对象使用场景 您前端一旦涉及到文件或图片上传Q到服务器&#xff0c;就势必离不了 Blob/File /base64 三种主流的类型它们之间 互转 也成了常态 Blob - FileBlob -Base64Base64 - BlobFile-Base64Base64 _ File uniapp 上传文件 现在已获取到了blob格式的…

五、windows上vscode构建c/c++环境

1、安装vscode 官网下载界面&#xff1a;https://code.visualstudio.com/Download 请根据电脑系统安装所需版本点击下载链接&#xff08;一般情况下点击windows按钮即可&#xff09;鼠标左键双击&#xff0c;即可运行安装程序&#xff0c;点击【确认】&#xff1b;选择安装路径…