NestJS Socket.Io 离开了房间，但仍在接收消息

Question

我有三个房间 General、TypeScript 和 Nest。我正在第一个和第二个浏览器选项卡中加入 General Room。当我决定从第二个选项卡离开 General 并加入 TypeScript 房间时，即使我应该离开它，我仍然会收到 General 的消息。当您切换到已被其他客户端使用的房间并离开时，就会出现该错误。我正在使用 NodeJs、Socket.io、NestJS 和 React。

服务器

@WebSocketGateway()
 export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
 
  @WebSocketServer() server: Server;
  private logger: Logger = new Logger('ChatGateway');
 
  @SubscribeMessage('msgToServer')
  handleMessage(client: Socket, message: { sender: string, room: string, message: string }): void {
    
   this.server.to(message.room).emit('msgToClient',  message);
   this.logger.log(`msgToClient: ${message}`);
   

   
  }
  @SubscribeMessage('joinRoom')
  handleRoomJoin(client: Socket, room: string ) {
    client.join(room);
    client.emit('joinedRoom', room);
    this.logger.log(`Client joined ${room}`);
  }

  afterInit(server: Server) {
   this.logger.log('Init');
  }
 
  handleDisconnect(client: Socket) {
   this.logger.log(`Client disconnected: ${client.id}`);
  }
 
  handleConnection(client: Socket, ...args: any[]) {
   this.logger.log(`Client connected: ${client.id}`);
  }
  @SubscribeMessage('leaveRoom')
  handleRoomLeave(client: Socket, room: string ) {
    console.log(client.id);
   /*  console.log(client.rooms);
    console.log(client.adapter.rooms); */
    client.leave(room);
  /*   console.log(room); */
  /*   client.rooms = {};
    delete client.adapter.rooms[room]; */
    client.emit('leftRoom', room);
    this.logger.log(`Client left ${room}`);
  /*   console.log(client.adapter.rooms);
    console.log(client.rooms); */
   // console.log(client.adapter.rooms) 
    
  }
 }

客户

  const [state, setState] = useState({ sender: "", room: "", message: "" });
  const [chat, setChat] = useState([
    { sender: "Peter", room: "General", message: "test" },
  ]);
  const socket = io(BASE_URL);
  const [room, setRoom] = useState({
    General: false,
    TypeScript: false,
    NestJS: false,
  });
  console.log(room);
  useEffect(() => {
    socket.on("msgToClient", (msg) => {
      setChat([...chat, { ...msg }]);
    });
  });

  const onTextChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value });
  };

  const onMessageSubmit = (e) => {
    e.preventDefault();
    const { sender, room, message } = state;
    socket.emit("msgToServer", { sender, room, message });
    setState({ message: "", sender: "", room: "" });
  };

  const toggleRoomMembership = (chatroom) => {
    const isMemberOfActiveRoom = (chatroom) => {
      return room[chatroom];
    };
    if (isMemberOfActiveRoom(chatroom)) {
      setRoom({ ...room, [chatroom]: false });
    
      socket.emit("leaveRoom", chatroom);
    } else {
      setRoom({ ...room, [chatroom]: true });

      socket.emit("joinRoom", chatroom);
    }
  };

  const renderChat = () => {
    return chat.map(({ sender, message }, index) => (
      <div key={index}>
        <h3>
          {sender}: <span>{message}</span>
        </h3>
      </div>
    ));
  };

Answer 1

原来解决方案很简单。将套接字放入 useEffect 并为其创建状态。

const [socket, setSocket] = useState({});
     useEffect(() => {
    const socket = io(BASE_URL);
    setSocket(socket);
    socket.on("msgToClient", (msg) => {
      setChat([...chat, { ...msg }]);
     
    });
    
  }, []);