Flask 使用Flask和Socket.io加入和离开房间的简洁示例

在本文中，我们将介绍如何使用Flask和Socket.io实现加入和离开房间的功能。Socket.io是一个基于事件的实时库，可用于在服务器和客户端之间进行双向通信。

阅读更多：Flask 教程

什么是Flask和Socket.io？

Flask是一个Python的微型Web开发框架，简单易用且灵活。
Socket.io是一个用于实时、双向通信的JavaScript库，可以在客户端和服务端之间建立WebSocket连接。

实现步骤

为了演示如何使用Flask和Socket.io实现加入和离开房间的功能，我们将创建一个简单的聊天应用程序。用户可以加入特定的聊天房间，并与其他房间成员进行实时通信。

步骤1：创建Flask应用程序

首先，我们需要创建一个Flask应用程序，并为它添加必要的路由和模板。

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
   return render_template("index.html")

if __name__ == "__main__":
   app.run()

步骤2：添加Socket.io支持

接下来，我们将为我们的Flask应用程序添加Socket.io支持，并实现加入和离开房间的功能。

首先，我们需要安装所需的依赖包。

$ pip install flask-socketio

然后，我们需要在我们的应用程序中导入和初始化Socket.io。

from flask_socketio import SocketIO, join_room, leave_room

app = Flask(__name__)
socketio = SocketIO(app)

为了演示加入和离开房间的功能，我们将使用两个Socket.io事件：join和leave。

@socketio.on("join")
def on_join(data):
   username = data["username"]
   room = data["room"]
   join_room(room)
   socketio.emit("join_room", f"{username} has joined the room {room}", room=room)

@socketio.on("leave")
def on_leave(data):
   username = data["username"]
   room = data["room"]
   leave_room(room)
   socketio.emit("leave_room", f"{username} has left the room {room}", room=room)

在join事件中，我们使用join_room函数将用户加入指定的房间，并使用socketio.emit函数向房间中的所有成员发送一个通知。

在leave事件中，我们使用leave_room函数将用户从指定的房间移除，并再次使用socketio.emit函数向房间中的所有成员发送一个通知。

步骤3：创建前端页面

接下来，我们需要创建一个包含加入和离开房间功能的前端页面。

<!DOCTYPE html>
<html>
<head>
   <title>Flask Chat</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js" integrity="sha512-NgJ8XtK68tP+jrR/EcYWcQJFE8gavS4jjDa4oAqo7OBv6veiey9mz5ysfgz/2Fa2HK/aZxVVkScmyzwe+1ze4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
   <h1>Flask Chat</h1>
   <div id="room-form">
      <input type="text" id="username" placeholder="Username">
      <input type="text" id="room" placeholder="Room">
      <button onclick="joinRoom()">Join Room</button>
      <button onclick="leaveRoom()">Leave Room</button>
   </div>

   <div id="messages"></div>

   <script>
      var socket = io();

      function joinRoom() {
         var username = document.getElementById("username").value;
         var room = document.getElementById("room").value;
         socket.emit("join", { username: username, room: room });
      }

      function leaveRoom() {
         var username = document.getElementById("username").value;
         var room = document.getElementById("room").value;
         socket.emit("leave", { username: username, room: room });
      }

      socket.on("join_room", function(message) {
         var div = document.createElement("div");
         div.textContent = message;
         document.getElementById("messages").appendChild(div);
      });

      socket.on("leave_room", function(message) {
         var div = document.createElement("div");
         div.textContent = message;
         document.getElementById("messages").appendChild(div);
      });
   </script>
</body>
</html>