Javascript 一旦客户端离开房间或断开连接,客户端就不会重新连接

Javascript 一旦客户端离开房间或断开连接,客户端就不会重新连接,javascript,reactjs,webrtc,kurento,Javascript,Reactjs,Webrtc,Kurento,我使用Kurento客户端在房间里进行视频通话。一个呼叫中只有两个参与者(本地和远程)。客户可以离开房间,但当客户离开房间时,该客户的流不会显示给其他客户,这很明显,但当同一客户再次希望加入房间时,该客户不会连接,因为其他客户不会看到他/她的流进行视频通话 以下是我的做法 import kurentoUtils from "kurento-utils"; import socketIOClient from "socket.io-client"; import { createWebRTCP

我使用Kurento客户端在房间里进行视频通话。一个呼叫中只有两个参与者(本地和远程)。客户可以离开房间,但当客户离开房间时,该客户的流不会显示给其他客户,这很明显,但当同一客户再次希望加入房间时,该客户不会连接,因为其他客户不会看到他/她的流进行视频通话

以下是我的做法

import kurentoUtils from "kurento-utils";
import socketIOClient from "socket.io-client";
import {
  createWebRTCPeer,
  sendMessage,
  createWebRTCScreenPeer
} from "./common";

const CONSTRAINTS = {
  audio: true,
  video: {
    width: 640,
    framerate: 15
  }
};

class VideoRoom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startCall: false,
      room: "",
      clientJoined: false,
      email: "",
      isLoggedIn: false,
      open: false,
      mute: false
    };
    this.localStreamRef = React.createRef();
    this.remoteStreamRef = React.createRef();
    this.onIceCandidates = this.onIceCandidates.bind(this);
    this.handleError = this.handleError.bind(this);
    this.socket = null;
    this.webRTC = null;
    this.loginName = null;
  }

  handleError = (e)=> {
    console.log(e);
  }

  onIceCandidates(candidate) {
    sendMessage(
      {
        event: "iceCandidate",
        data: candidate
      },
      this.socket
    );
  }


  componentDidMount() {
    this.socket = new socketIOClient("http://localhost:8443/sockets");
    this.webRtcPeer = null;
    this.webRtcScreenPeer = null;
    const { state } = this.props.location;
    if (state && state.interviewId) {
      this.initiateSocket();
    }
  }


  initiateSocket() {
    const { interviewId } = this.props.location.state;
    this.socket.emit("room:addUser", { interviewId, userEmail: this.state.email });

    this.socket.on("ICE_CANDIDATE", async candidate => {
      console.log("candidate in listener", candidate);
      await this.webRTC.addIceCandidate(candidate);
    });

    this.socket.on("RTC:PEER", room => {
      console.log("RTC:PEER", room, this.localStreamRef);
      this.webRtcPeer = createWebRTCPeer(
        {
          localVideo: this.localStreamRef.current,
          remoteVideo: this.remoteStreamRef.current,
          onicecandidate: this.onIceCandidates
        },
        this.socket,
        room
      );
    });

    this.socket.on("client:joined", () => {
      this.setState({ clientJoined: true });
    });

    this.socket.on("iceCandidate", (candidate) => {
      console.log("GOT Candidate....");
      this.webRtcPeer.addIceCandidate(candidate);
    });

    this.socket.on("answer", answer => {
      console.log("GOT ANSWER....");
      this.webRtcPeer.processAnswer(answer);
    });

    this.socket.on("remote:leave", () => {
      console.log("LEAVE FROM REMOTE");
      this.handleLeaveRoom(true);
      this.setState({ clientJoined: false });
    });

    this.socket.on("ERROR", error => this.onError(error));
  }

  componentWillUnmount() {
    this.socket.emit('end');
    this.socket = null;
    this.webRtcPeer && this.webRtcPeer.dispose();
    this.webRtcPeer = null;
  }

  onError = error => console.error(error);

  handleLeaveRoom = (remote = false) => {
    if (remote) {
      this.remoteStreamRef.current.srcObject = null;
    } else if (
      this.webRtcPeer !== null &&
      this.webRtcPeer !== undefined &&
      this.socket !== null
    ) {
      this.localStreamRef.current.srcObject = null;
      this.props.history.push("/interivew-id");
    } else {
      return ;
    }
  };

  render() {

    return (
      <React.Fragment>
        <Wrapper>
          <Studio
            {...this.state}
            interviewer={this.localStreamRef}
            interviewee={this.remoteStreamRef}
          />
          <Controls
            handleLeaveRoom={() => this.handleLeaveRoom()}
            handleMute={() => this.handleMute()}
            mute={this.state.mute}
            handleScreenShare={this.handleScreenShare}
          />
        </Wrapper>
      </React.Fragment>
    );
  }
}

export default withRouter(VideoRoom);
这是完整的代码


leave room可以工作,但当尝试重新加入时,客户端无法连接并向远程客户端显示其流。

有错误吗?套接字是否成功连接?是否有错误?套接字是否成功连接?
socket.on("end", () => {
    console.log(`closing socket in room:: ${socket.room}`);
    // console.log(`socket end: room: ${room ? room : socket.room}`)
    socket.disconnect(0);
  });

  socket.on('disconnect', () => {
    console.log("Client disconnected from", socket.room);
    let session = sessions[socket.room];
    if(session){
      session.removeClient(socket.id);
    }
    socket.broadcast.to(socket.room).emit('remote:leave', socket.id);
  });