克隆网站模板,千助网站公司,淮南网云小镇最新消息,免费发布招工的平台点击进入上一篇#xff0c;可作为参考
实验环境
python 用的是3.11.11
其他环境可以通过这种方式一键安装#xff1a;
pip install flask3.1.0 Flask-SocketIO5.4.1 gevent-websocket0.10.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
pip list 详情如下可作为参考
实验环境
python 用的是3.11.11
其他环境可以通过这种方式一键安装
pip install flask3.1.0 Flask-SocketIO5.4.1 gevent-websocket0.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, configNone, timeout60, proxyNone):app Flask(name)app.route(/, methods[GET, POST])def main():return render_template(index.html)return appclass MyNamespace(Namespace): def on_connect(self): print(Client connected) # def on_message(self, message): # print(fReceived 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]},tomessage[room], namespace/my_room) # 这个namespace/my_room一定要写def on_sendMsg(self,message):print(message)# 下边这个emit中的“SendtoAll”是 前端socket.on(SendtoAll的监听对象 tomessage[room] 表示给房间里的所有人都发送消息 如果不写则表示个自己一个人回消息# request.sid貌似是每对socket连接都会不一样但是没断开的应该是一样的# self.emit 这个不能传递, tomessage[room] 不然会报错# self.emit(SendtoAll, {msg:message[msg], user:request.sid}, tomessage[room], namespace/my_room)socket_io.emit(SendtoAll, {msg:message[msg], user:request.sid}, tomessage[room], namespace/my_room)def on_leaveRoom(self,message):print(message)socket_io.emit(roomLeftPersonal, {room: message[room], user: request.sid}, namespace/my_room) # 这个没写tomessage[room] 表示给自己一个人回消息leave_room(message[room]) # 可神奇他咋知道那个人离开了可能是socket连接所以知道socket_io.emit(roomLeft, {room:message[room], user:request.sid}, tomessage[room], namespace/my_room)app create_application(pipeagent_service, configNone)
socket_io SocketIO(app, processesTrue, cors_allowed_origins*, async_modegevent)
socket_io.on_namespace(MyNamespace(/my_room))
if __name__ __main__:socket_io.run(appapp, host0.0.0.0, debugFalse, log_outputTrue)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(){// 这个 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});// 3socket.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)});// 7socket.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 一般的执行步骤 123....// var socket io();// 连接socket// socket.on(connect, function (){// socket.send(Client Connected)// });
})运行即 python app2.py 然后打开两个网页并分别输入http://127.0.0.1:5000/ 开启愉快的自我交流吧
另可参考点击进入
