你错过了两件事。
第一,您需要向"join"
服务器发送一个事件。
<script>
function joinRoom() {
console.log("ask server to join room");
socket.emit("join", { "user": Date.now(), "room": "Notifications" });
}
</script>
<body>
<button onclick="joinRoom()">Join</button>
</body>
例如,在这里我将触发器附加到按钮上。为了让最初测试将用户添加到房间变得更容易,我使用Date.now()
它作为用户名。您可以打开不同的选项卡以充当不同的用户。
第二,您需要有该join
事件的处理程序。Flask-SocketIO 文档的房间和命名空间部分
有一个示例。
@socketio.on("join")
def on_join(data):
user = data["user"]
room = data["room"]
print(f"client {user} wants to join: {room}")
join_room(room)
emit("room_message", f"Welcome to {room}, {user}", room=room)
在处理程序中,您需要调用该join_room
方法将用户添加到当前命名空间下的房间。请注意有关名称空间的部分。默认情况下,所有连接都在根 ( /
) 命名空间下。如果您有自定义命名空间,那么每个命名空间都会有自己的房间。
也有相应的leave_room
方法。
这是完整的服务器端代码:
@socketio.on("connect")
def connect():
print("client wants to connect")
emit("status", { "data": "Connected. Hello!" })
@socketio.on("join")
def on_join(data):
user = data["user"]
room = data["room"]
print(f"client {user} wants to join: {room}")
join_room(room)
emit("room_message", f"Welcome to {room}, {user}", room=room)
这是完整的客户端代码:
<script type="text/javascript" charset="utf-8">
const socket = io();
socket.on("connect", () => {
console.log("connect");
});
socket.on("status", (status) => {
console.log("received status: " + status.data);
});
socket.on("room_message", (msg) => {
console.log("message from room: " + msg);
});
function joinRoom() {
console.log("ask server to join room");
socket.emit("join", { "user": Date.now(), "room": "Notifications" });
}
</script>
<body>
<button onclick="joinRoom()">Join</button>
</body>
现在,您现在可以打开多个选项卡并将每个选项卡连接到服务器。服务器端应显示以下消息:
client wants to connect
client wants to connect
client wants to connect
client 1582428076724 wants to join: Notifications
client 1582428080023 wants to join: Notifications
client 1582428082916 wants to join: Notifications
在第一个用户加入房间 (1582428076724) 时,您应该能够看到其他用户加入房间时的日志。
connect
received status: Connected. Hello!
ask server to join room
message from room: Welcome to Notifications, 1582428076724
message from room: Welcome to Notifications, 1582428080023
message from room: Welcome to Notifications, 1582428082916