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

Posted 2023-02-16

【中文标题】websocket.close() 函数继续运行后

【英文标题】：After websocket.close() funtion continues to run

【发布时间】：2018-07-19 13:26:33

【问题描述】：

我们正在连接到 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)));

【问题讨论】：

如果您仍在发送数据，关闭是否会有延迟，有没有办法让您在关闭套接字之前关闭对麦克风的访问？

【参考方案1】：

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

this.connection.close(true);

希望对你有帮助