我想做的:我有两个按钮在我的html客户端。我想处理按钮点击事件在服务器端使用两个不同的和独立的事件处理函数。
我将点击任何按钮，点击后，客户端将发送文本消息到服务器，服务器将使用python的print()-函数在控制台上打印它。
我所面临的问题:服务器正在打印第一个连接上的第一条消息。
然而，随后的按钮点击并没有达到预期的结果。我正在点击按钮，服务器没有打印客户端发送的文本。
我怎样才能达到我的目标?我做错了什么?
client_sends_control_content.py
# client sends,
# server receives.
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import logging
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('client_sends_control_content.html')
@socketio.on('my_event1', namespace='/test')
def handle_my_event1(arg1):
try:
print('received_1 : ' + str(arg1['data1']))
except Exception as ex:
logging.exception("")
print(ex)
@socketio.on('my_event2', namespace='/test')
def handle_my_event2(arg2):
try:
print('received_2 : ' + str(arg2['data2']))
except Exception as ex:
logging.exception("")
print(ex)
@socketio.on('my_event3', namespace='/test')
def handle_my_event3(arg3):
try:
print('received_3 : ' + str(arg3['data3']))
except Exception as ex:
logging.exception("")
print(ex)
if __name__ == '__main__':
socketio.run(app)
client_sends_control_content.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script>
let namespace = '/test';
let socket = io(namespace);
//connect to the server on page load
$(function(){
socket.on('connect', function(){
socket.emit('my_event1', {'data1' : 'Hello World!'});
//alert("connected!")
});
$('#button2').click(function(){
socket.on('connect', function(){
let text2 = "2 2 2 2 2 2"
socket.emit('my_event2', {'data2' : text2});
});
//alert('btn2 clicked!')
});
$('#button3').click(function(){
socket.on('connect', function(){
let text3 = "3 3 3 3 3 3"
socket.emit('my_event3', {'data3' : text3});
});
//alert('btn3 clicked!')
});
});
</script>
</head>
<body>
<input id="button2" type="button" value="Button 2">
<input id="button3" type="button" value="Button 3">
</body>
</html>
socket.on('connect',为WebSocket从客户端连接到服务器时注册一个回调。在jQuery中注册一个函数来处理点击事件意味着这个函数只会在你点击它所附加的元素时被调用。当按下按钮时，您的代码为connect事件注册一个新的回调。但是，由于最初的connect事件已经由第一个回调处理，因此注册进一步的回调不会导致任何事情发生。您希望更改按钮单击处理程序中的on('connect1'处理程序注册，以便仅向服务器发送消息。
$('#button2').click(function(){
let text2 = "2 2 2 2 2 2";
socket.emit('my_event2', {'data2' : text2});
//alert('btn2 clicked!')
});