websocket.close() 函数继续运行后

Question

我们正在连接到 websocket，发送一些音频，并接收语音转录（基本语音到文本）。我提供的代码是工作代码的粗略版本。

我们能够获得转录。问题在于关闭 websocket。当 websocket 关闭时，sendMessage() 函数会继续被重复调用，即使它只在代码中的一个地方被调用，而且只有在我们发送音频时（你会看到我们使用相同的函数来发送配置，但我检查了，它不是正在发送的配置）

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.initConnection = this.initConnection.bind(this);
    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.onMessage = this.onMessage.bind(this);
    this.onError = this.onError.bind(this);
    this.sendMessage = this.sendMessage.bind(this);
    this.toInt16 = this.toInt16.bind(this);
  }

  componentDidMount() {
    this.initConnection();
  }

  // Open the websocket connection
  initConnection = () => {
    this.connection = new WebSocket("wss://app.projectwalrus.com/ws");
    this.connection.onopen = event => { this.onOpen(event) };
    this.connection.onclose = event => { this.onClose(event) };
    this.connection.onmessage = event => { this.onMessage(event) };
    this.connection.onerror = event => { this.onError(event) };
  }

  onOpen = event => {
    // Only send the config if the connection is open
    if (this.connection.readyState === 1) {
      let config = { /* my config */ }
      this.sendMessage(JSON.stringify(config));
    }
  }

  onClose = event => { console.log(event); }

  onMessage = event => { console.log(event); }

  onError = event => { console.log(event); }

  // ****
  // This is the function that keeps getting called
  // ****
  sendMessage = (message) => {
    if (this.connection.readyState === 1) {
      this.connection.send(message)
    }
    return false;
  }

  startRecording = () => {
    this.setState({ record: true });

    if (this.connection.readyState === 3) {
      this.initConnection();
    }

    if (this.connection.readyState === 1) {
      // request permission to access audio stream
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then(stream => {
          // ****
          // This is the only place where we are calling this function
          // ****
          this.sendMessage(this.toInt16(audioIn));
        }).catch(console.error);
    }
  }

  stopRecording = () => {
    if (this.connection.readyState === 1) {
      this.connection.close();
      this.setState({
        record: false
      });
    }
  }

  render() {
    const { classes } = this.props;

    return (
      <Wrapper>

        <TextField
          name="text"
          multiline
          margin="normal"
          // this.props.dictation is the returned value from the websocket
          value={ this.props.dictation }
        />

        <div align="center">
          <Button onClick={this.startRecording} type="button">Start</Button>
          <Button onClick={this.stopRecording} type="button">Stop</Button>
        </div>

      </Wrapper>
    );
  }
}

function mapStateToProps(state) {
  return {
    token: state.token,
    dictation: state.dictation,
    alert: state.alert
  };
}

export default withRouter(connect(mapStateToProps, userActions)(withStyles(styles, { withTheme: true })(WalrusPad)));

Answer 1

尝试通过在 close() 中传递 TRUE 来强制关闭连接

this.connection.close(true);

希望对你有帮助