应用所需环境:
python 3.11.11
其他 只需要通过这个命令即可
pip install flask==3.1.0 Flask-SocketIO==5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
最好是用conda创建一个新的虚拟环境来验证
完整的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
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
应用的结构目录
app.py中的内容:
from flask import Flask, render_template, request
from flask_socketio import SocketIO, send, emit, join_room, leave_room
app = Flask( "chatWare" , static_folder= "static" , template_folder= "templates" )
app. config[ 'SECRET_KEY' ] = "bruh"
socketio = SocketIO( app) @app. route ( "/" )
def main ( ) : return render_template( "index.html" )
@socketio. on ( 'message' )
def handleMessage ( msg) : print ( "收到: " + msg)
@socketio. event
def sendMsg ( message) : print ( message) emit( 'SendtoAll' , { "msg" : message[ "msg" ] , "user" : request. sid} , to= message[ "room" ] ) @socketio. event
def joinRoom ( message) : join_room( message[ 'room' ] ) emit( "roomJoined" , { "user" : request. sid, "room" : message[ 'room' ] } , to= message[ 'room' ] ) @socketio. event
def leaveRoom ( message) : print ( message) emit( 'roomLeftPersonal' , { "room" : message[ 'room' ] , "user" : request. sid} ) leave_room( message[ 'room' ] ) emit( 'roomLeft' , { "room" : message[ 'room' ] , "user" : request. sid} , to= message[ 'room' ] ) if __name__ == "__main__" : app. run( host= "0.0.0.0" , port= 5000 , debug= True , threaded= True ) socketio. run( app)
index.html中的内容如下:
<! DOCTYPE html >
< html lang = " en" > < head> < title> flask socketio通信</ title>
< script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity = " sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin = " anonymous" > </ 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 ( ) { var socket = io ( ) ; socket. on ( 'connect' , function ( ) { socket. send ( 'Client Connected' ) } ) ; $ ( 'form#SubmitForm' ) . submit ( function ( event ) { socket. emit ( 'sendMsg' , { msg : $ ( '#chatMsg' ) . val ( ) , room : $ ( '#roomNum' ) . val ( ) } ) ; $ ( '#chatMsg' ) . val ( "" ) ; return false } ) ; $ ( 'form#joinRoom' ) . submit ( function ( event ) { socket. emit ( 'joinRoom' , { room : $ ( '#roomNum' ) . val ( ) } ) return false } ) ; $ ( '#leave_room' ) . on ( 'click' , function ( ) { socket. emit ( 'leaveRoom' , { room : $ ( '#roomNum' ) . val ( ) } ) console. log ( "sent" ) } ) ; socket. on ( 'roomJoined' , function ( msg, cb ) { $ ( '#chatContent' ) . append ( '<li>' + msg. user + 'has joined room' + msg. room + ' </li>' ) } ) ; socket. on ( 'roomLeft' , function ( msg, cb ) { $ ( '#chatContent' ) . append ( '<li>' + msg. user + 'has left room' + msg. room + ' </li>' ) } ) ; socket. on ( 'roomLeftPersonal' , function ( msg, cb ) { $ ( '#chatContent' ) . append ( '<li>' + 'you have left room' + msg. room + ' </li>' ) } ) ; socket. on ( 'SendtoAll' , function ( msg, cb ) { $ ( '#chatContent' ) . append ( '<li>' + msg. user + ': ' + msg. msg + '</li>' ) } ) ;
} )
在终端中输入python app.py 并回车,然后打开两个网页分别输入http://127.0.0.1:5000并回车即可进行聊天