网站整站html,网站建设喀什,麻涌做网站,公司在线起名免费网应用所需环境#xff1a;
python 3.11.11
其他 只需要通过这个命令即可
pip install flask3.1.0 Flask-SocketIO5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
最好是用conda创建一个新的虚拟环境来验证
完整的pip list如下
Package Version
----…应用所需环境
python 3.11.11
其他 只需要通过这个命令即可
pip install flask3.1.0 Flask-SocketIO5.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# import eventlet
# eventlet.monkey_patch()app Flask(chatWare, static_folderstatic, template_foldertemplates)
app.config[SECRET_KEY] bruh
socketio SocketIO(app)app.route(/)
def main():return render_template(index.html)
# 监听的可能是前端的socket.send这个方法
socketio.on(message)
def handleMessage(msg):print(收到: msg)# send(msg, broadcastTrue) # 这个发回去了但是前端没有定义方法进行接收 所以是不是可以不用发#
socketio.event #加一个socketio.event 表明他是个方法被装饰的方法可以被前端用socket.emit(sendMsg这种方式发送给后端。 message就是前端用emit的第二个参数
def sendMsg(message):print(message)# 下边这个emit中的“SendtoAll”是 前端socket.on(SendtoAll的监听对象 tomessage[room] 表示给房间里的所有人都发送消息 如果不写则表示个自己一个人回消息# request.sid貌似是每对socket连接都会不一样但是没断开的应该是一样的emit(SendtoAll, {msg:message[msg], user:request.sid}, tomessage[room])socketio.event
def joinRoom(message):# global Room # 没有被用到吧应该没啥用# print(message)join_room(message[room]) #加入房间有专门的函数不用我们管emit(roomJoined, {user : request.sid,room : message[room]}, tomessage[room])socketio.event
def leaveRoom(message):print(message)emit(roomLeftPersonal, {room: message[room], user: request.sid}) # 这个没写tomessage[room] 表示给自己一个人回消息leave_room(message[room]) # 可神奇他咋知道那个人离开了可能是socket连接所以知道emit(roomLeft, {room:message[room], user:request.sid}, tomessage[room])if __name__ __main__:app.run(host0.0.0.0, port5000, debugTrue, threadedTrue)socketio.run(app)index.html中的内容如下
!DOCTYPE html
html langenheadtitleflask socketio通信/title
!-- flask-socketio--script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js integritysha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZofjqhx/qtq/1itJ0C2ejDxltZVFg crossoriginanonymous/script!-- Jquery--!-- script srchttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js/script --script typetext/javascript src//cdn.bootcss.com/socket.io/3.1.2/socket.io.min.js/scriptscript typetext/javascript src{{url_for(static, filenamejs/index.js)}}/script/headbodyh3Join Room/h3form idjoinRoom methodPOST action#labelRoom Number/labelinput typetext idroomNum requiredinput typesubmit idsubmitRoomNum/formbutton idleave_roomLeave/buttonh1Hello World/h1ul idchatContentliText/li/ulform idSubmitForm methodPOST action#h3发送文字/h3textarea placeholder输入文字 namemsg idchatMsg required/textareabutton typesubmit发送/button/form/body
/htmlindex.js中的内容如下
$(document).ready(function(){// 1 一般的执行步骤 123....var socket io();// 连接socketsocket.on(connect, function (){socket.send(Client Connected)});// 4$(form#SubmitForm).submit(function (event){// 发送给后端的sendMsg方法socket.emit(sendMsg, {msg:$(#chatMsg).val(),room:$(#roomNum).val()});$(#chatMsg).val();return false});// 2 $(form#joinRoom).submit(function (event){socket.emit(joinRoom, {room:$(#roomNum).val()})return false});// 6$(#leave_room).on(click, function (){socket.emit(leaveRoom, {room:$(#roomNum).val()})console.log(sent)});// 3socket.on(roomJoined, function (msg, cb) {$(#chatContent).append(li msg.user has joined room msg.room /li)});// 8 socket.on(roomLeft, function (msg, cb) {$(#chatContent).append(li msg.user has left room msg.room /li)});// 7socket.on(roomLeftPersonal, function (msg, cb) {$(#chatContent).append(li you have left room msg.room /li)});// 5 监听后端的SendtoAll方法socket.on(SendtoAll, function (msg, cb) {$(#chatContent).append(li msg.user : msg.msg /li)});
})在终端中输入python app.py 并回车然后打开两个网页分别输入http://127.0.0.1:5000并回车即可进行聊天
