After websocket.close() funtion continues to run

Question

We are connecting to a websocket, sending some audio, and receiving a trascription of the speech (basic speech-to-text). The code I've presented is a rough version of working code.

We are able to get the transcription. The issue is with closing the websocket. When the websocket is closed the sendMessage() function continues to get called repeatedly even though it is only called in one place in the code and that is only when we are sending the audio (you'll see we use the same function to send the config, but I checked and it isn't the config that is getting sent)

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

Try force to close connection by passing TRUE inside close()

this.connection.close(true);

May it helps